В процессе разработки переднего времени мы часто сталкиваемся с проблемой добавления событий в элементы страницы. Существует также много методов JS для добавления событий, в том числе непосредственно добавлено в структуру страницы, и некоторые методы мониторинга событий JS. Поскольку в каждом браузере есть различные механизмы для мониторинга событий событий событий, в браузере LE есть только пузырьки событий и механизм мониторинга событий, а проблема совместимости прослушивания событий является самой большой проблемой:
1. Напишите метод события непосредственно на структуре страницы
function eventfun () {//console.log(Tis); } <input type = "button" onclick = "eventFun ()" value = "кнопка"/> // Это включает проблему этой области. Eventfun также является глобальной функцией здесь. Объект [окно объекта], и это указывает на окно.Чтобы решить эту проблему области, вы можете использовать метод добавления переменных событий в глобальную функцию и передать этот объект в качестве параметра в функцию внутри структуры страницы
<input type = "button" onclick = "eventFun2 (this)" value = "button2"/> function eventFun2 (eve) {// здесь объект события передается в качестве параметра для глобального метода eve.name = "alect"; window.name = "robin"; console.log (this); // [Object Window] console.log (eve); // [Object htmlinputElement] console.log (this.name); // robin console.log (eve.name); // alexvar self = eve; console.log (this.name); // robin console.log (self.name); // alex alert (window.name); оповещение (self.name); }2. Использование метода назначения значения атрибутам события является методом привязки с событиями, но ограничение этого метода заключается в том, что он может привязать только один метод с событиями. Если связаны несколько привязков, преобладает один метод.
Htmlelementobject.onclick = fucntion () {// Использование этого метода для назначения значения атрибутам события, этот указатель будет указывать на объект окна, а не на объект события, поэтому этот метод является ссылкой
// JS CODE FUN1 (); fun2 (); fun3 (); console.log (this); // window.object} function dosomething () {// js code} htmlelementobject.onclick = dosomething; // Использовать эту форму присвоения значения для атрибутов объекта события, этот указатель указывает на консоль объекта выполнения.3. Распространение событий - пузырь и захват
Стандарт события DOM определяет два потока событий, которые значительно отличаются и могут оказать значительное влияние на ваше приложение. Эти два потока событий - это захват и пузырь. Как и многие веб -технологии, Netscape и Microsoft реализовали их по -разному, прежде чем они стали стандартными. Netscape решил реализовать потоки событий захвата, в то время как Microsoft реализовала потоки событий пузырьков. К счастью, W3C решил использовать оба метода в комбинации, и большинство новых браузеров следуют этим двум методам потоковой передачи событий.
По умолчанию события используют пузырьковые потоки событий, и не используется потоки событий захвата. Тем не менее, в Firefox и Safari вы можете явно указать использование потоков событий захвата, передавая параметр useCapture при регистрации события и установлении этого параметра в True.
Пузырьковый поток событий
Например, когда событие запускается на элементе DOM, пользователь нажимает мышь на узле имени клиента, событие будет следовать за различными родительскими узлами, унаследованными, от которых узел пузырится через всю иерархию узла DOM, пока не встретит узлы, который прикреплен к процессору типа события. В настоящее время мероприятие является событием OnClick. Пузырьки событий могут быть прекращены в любое время во время пузырькового процесса. В браузерах, которые соответствуют стандартам W3C, вы можете вызвать метод StopPropagation () в объекте события, а в Internet Explorer вы можете установить атрибут CancelBubble объекта события в True. Если событие не будет остановлено, событие пробивается через DOM, пока оно не достигнет корня документа.
Захват событие поток
Обработка события начинается в корне уровня DOM, а не из целевого элемента, который запускает событие, и событие передается последовательно из всех элементов предка целевого элемента. В этом процессе события захватываются различными унаследованными производными элементами от корня документа в целевой элемент события. Если слушатель событий устанавливает атрибут usecapture на True при регистрации, его можно назначить любому элементу в течение этого периода для обработки события; В противном случае события будут впоследствии переданы следующему элементу на пути полученного элемента до целевого элемента. После того, как событие достигнет целевого элемента, он затем пробится через узел DOM.
Современный метод привязки событий
Для предыдущего урока использование традиционного привязки событий имеет много недостатков, таких как неспособность зарегистрировать несколько обработчиков событий на одном и том же событии. А браузеры и W3C не без учета этого, поэтому в современных браузерах у них есть свои собственные методы для связывания событий.
W3C Dom
obj.addeventlistener (evtype, fn, usecapture) - W3c предоставляет метод для добавления функций обработки событий. OBJ - это объект для добавления событий, Evtype - это тип события, без префикса, FN является функцией обработчика событий, если используется истина, функция обработчика событий выполняется на стадии захвата, иначе она выполняется в стадии пузырька
obj.removeeventlistener (evtype, fn, usecapture)-W3c предоставляет метод удаления функций обработки событий
Microsoft IE Метод
obj.attachevent (evtype, fn) - метод, предоставленный IE для добавления функций обработки событий. obj - это объект для добавления событий, Evtype - это тип события, с Prefix, FN является функцией обработчика событий, т.е. не поддерживает захват событий
obj.detachevent (evtype, fn,) - IE предоставляет способ удаления функции обработки событий, Evtype содержит в префиксе
Способ интегрировать оба
Функция addEvent (obj, evtype, fn, usecapture) {if (obj.addeventlistener) {obj.addeventlistener (evtype, fn, usecapture); } else {obj.attachevent ("on"+evtype, fn); // ie не поддерживает захват событий} else {obj ["on"+evtype] = fn; // Фактически, эта ситуация не будет существовать}} функция Delevent (obj, evtype, fn, usecapture) {obj.RemoveEv obj.removeeventlistener (evtype, fn, usecapture); } else {obj.detachevent ("on"+evtype, fn); } else {obj ["on"+evtype] = null; }}Существует проблема с методом прикрепления IE, то есть при использовании AttactEvent, это указывает на окно, а не OBJ! Конечно, есть решение для этого!
Но есть еще одна проблема с методом IE в AttachmentEvent. Одна и та же функция может быть зарегистрирована с одним и тем же объектом и одним и тем же событием несколько раз. Решение: отказаться от метода AttachmentEvent IE! Метод AttactEvent в соответствии с IE не поддерживает захват, который не сильно отличается от традиционной регистрации событий (за исключением привязки нескольких обработчиков событий), а метод AttachmentEvent IE имеет проблему утечки памяти!
Addevent, Delevent Modern Version
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> js uliding mulding </title> <style> table td {font: 12px; border-bottom:1px solid #efefefef;} </style> </head> <body> <div id="outEle" style="padding:10px; border:1px solid #b2b2b2; background:#efefefefef;"> <input type="button" onclick="eventfun()" id="button" value="button" /><br /> <input type="button" onclick = "eventfun2 (это);" id = "button2" value = "button2" /> <br /> <input type = "button" id = "button3" value = "button3" /> <br /> <input type = "button" id = "button4" value = "button4" /> <br /> <table id = "htmleletable" style = "style: 1px solid #b2b2b2; id = "1111"> <TD> 111111111111111111111111111111 </td> </tr> <tr id = "222222"> <TD> 222222222222222222222222222 </td> </tr> <tr id = "3333333333333333333333333333333333 </td> </tr> <tr id="44444"><td>44444444444444444444444444444444444444444444444444444444444444444444444444444444444444 44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</td></tr> <tr id = "555555555555555555555555555 </td> </tr> </table> </div> <script language =" javascript "type =" text/javascript "> function eventFun () {// 1. Прямо напишите метод JS на консоли структуры страницы. EventFun - это глобальная функция, объект - окно, и это указывает на оповещение о окне (это); } function eventFun2 (eve) {// здесь передавать объект события в качестве параметра глобальному методу eve.name = "alect"; // window.name = "robin"; console.log (this); // [Object Window] console.log (eve); // [Object htmlinputElement] console.log (this.name); // robin console.log (eve.name); // alex var self = eve; console.log (this.name); // robin console.log (self.name); // alex alert (window.name); оповещение (self.name); } function eventFun3 () {// 1. Напрямую напишите метод JS на консоли структуры страницы. EventFun - это глобальная функция, объект - окно, и это указывает на Window Console.log (this.id); оповещение (это); оповещение (это); предупреждение (this.id); // var outeleobj = eventutil. $ ("upele"); // removeEvent (utereleobj, "click", eventfun3); } /* var EventUtil = {}; Eventutil. $ = Function (id) {return document.getElementById (id); } EventUtil.openmes = EventFun3; Eventutil.addeventhandle = function (EventTarget, EventType, EventHandle) {// определить элемент объекта, тип события для прослушивания событий, функция события if (eventTarget.attachevent) {eventTarget.attachevent («on» eventType, eventHandle); } else if (EventTarget.AddeventListener) {eventTarget.AddeventListener (eventType, eventHandle, false)} else {eventTarget ["on" + eventType] = null; }}; Eventutil.deleeventhandle = function (EventTarget, EventType, EventHandle) {// определить элемент объекта, тип события для прослушивания событий, функция события if (eventTarget.detachevent) {alert ("on"+eventType); оповещение ("on"+eventHandle); eventTarget.detachevent ("on"+EventType, EventHandle); } else if (EventTarget.RemoveEventListener) {eventTarget.RemoveEventListener (EventType, EventHandle, false)} else {eventTarget ["on" + eventType] = null; }};*/ var eventutil = {$: function (id) {return document.getElementById (id); }, but4fun: function () {console.log (this); this.addeventhandle (); }, EventFun3: function () {console.log (this); оповещение (это); Delevent (obj, evtype, fn, usecapture); }} /*** Используйте addEventListener, AttachEvent для функции прослушивания addEvent (obj, evtype, fn, usecapture) {if (obj.addeventlistener) {obj.addeventlistener (evtype, fn, usecapture); } else if (obj.attachevent) {obj.attachevent ("on"+evtype, function () {fn.call (obj);}); } else {obj ["on"+evtype] = fn; // Фактически, эта ситуация не будет существовать}} function delevent (obj, evtype, fn, usecapture) {if (obj.removeeventlister) {obj.removeeventlistener (evtype, fn, usecapure); } else if (obj.detachevent) {obj.detachevent ("on"+evtype, fn); } else {obj ["on"+evtype] = null; }} функция addEvent (obj, evtype, fn, usecapture) {if (obj.addeventlistener) {// Приоритет придается схеме регистрации событий w3c obj.addeventlistener (evtype, fn, !! } else {// Когда AddEventListener не поддерживается (т.е.), поскольку IE не поддерживает захват одновременно, лучше использовать традиционное связывание событий if (! fn .__ EventId) {fn .__ EventEd = addEvent .__ EventHandlesCounter ++;} // Присвоение уникального идентификатора ovendles {abj hudles {abjhand); // _ Атрибут EventHandles используется для сохранения ссылок на все обработчики событий // классифицируется по типу события if (! Obj .__ Eventhandles [evtype]) {// При первом случае событие зарегистрировано obj .__ eventhandles [evtype] = {}; if (obj ["on"+evtype]) {// Функция обработки событий была зарегистрирована традиционным способом до (obj .__ EventHandles [evtype] [0] = obj ["on"+evtype]) .__ EventId = 0; // Добавить в зарезервированное 0 бит // и добавить идентификатор к оригинальной функции управления событием}}}}. obj ["on"+evtype] = addevent.execeventhandles; // Когда происходит событие, ExeceVenthandles Traverse table obj .__ EventHandles [evtype] и выполнять функцию в IT}}}} addEvent .__ EventHandlesCounter = 1; // Счетчик, 0 бит зарезервировал все vadevent.exeventhandles = function (evt) {// tranquility через все события и executandles =. true;} evt = evt || window.event; var fns = this .__ EventHandles [evt.Type]; for (var i in fns) {fns [i] .call (this); }}; /* Функция Delevent (obj, evtype, fn, usecapture) {if (obj.removeeventlistener) {// сначала используйте метод W3C для удаления функции обработчика событий obj.removeEventListener (evtype, fn, !! UseCapture); } else {if (obj .__ EventHandles) {var fns = obj .__ EventHandles [evtype]; if (fns) {delete fns [fn .__ eventid];}}}}} function fixevent (evt) {// Функция FixEvent не выполняется отдельно. У него должен быть параметр объекта события, и он будет выполняться только после того, как произойдет событие! Лучший способ - интегрировать его в выполнение функции addevent if (! Evt.target) {evt.Target = evt.srcelement; evt.preventdefault = fixeVent.preventDefault; evt.stoppropagation = fixevent.stoppropagation; if (evt.type == "mouseover") {evt.RelatedTarget = evt.Fromelement; } else if (evt.type == "mouseout") {evt.RelatedTarget = evt.ToElement; } evt.Charcode = (evt.type == "keypress")? Evt.KeyCode: 0; evt.eventphase = 2; // IE работает только на стадии пузыря evt.timestamp = (new Date ()). getTime (); // Установить его только в текущее время} return evt; } fixEvent.preventDefault = function () {this.returnValue = false; // Это здесь указывает на определенный объект события, а не FixEvent}; fixevent.stoppropagation = function () {this.cancelbubble = true; };*///console.log(eventutil.$("button3"));//terurn атрибут объекта функции Eventutil //eventutil.$("button3").onclick= eventfun; // 2. Используйте метод присвоения значений атрибуту события объекта, чтобы реализовать прослушивание событий //eventutil.$("button3").onclick= eventfun2; // При добавлении нескольких методов в атрибут события последнее ///eventutil.$("button3"). Onclick= Eventfun; ////////////////////////////////////////////////////////////////////////////////////eventutil. = function () {function getByid (id) {return document.getElementById (id); }; // written by Dean Edwards, 2005 // with input from Tino Zijdel, Matthias Miller, Diego Perini // http://dean.edwards.name/weblog/2005/10/add-event/ function addEvent(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else {// назначить каждому обработчику события уникальный идентификатор if (! Handler. $$ guid). // Создать хэш -таблицу типов событий для элемента if (! element.events) element.events = {}; // Создать хэш -таблицу обработчиков событий для каждого элемента/пара событий var handlers = element.events [type]; if (! Handlers) {Handlers = element.events [type] = {}; // Хранить существующий обработчик событий (если один) if (element ["on" + type]) {Handlers [0] = element ["on" + type]; }} // хранить обработчик событий в хэш -обработчиках таблицы [Handler. $$ GUIN] = Handler; // назначить глобальный обработчик событий для выполнения всего рабочего элемента ["on" + type] = handleevent; }}; // счетчик, используемый для создания уникальных идентификаторов addevent.guid = 1; функция removeEvent (element, type, handler) {if (element.removeeventListener) {element.removeeventListener (type, Handler, false); } else {// Удалить обработчик событий из хэш -таблицы if (element.events && element.events [type]) {delete element.events [type] [handler. $$ guid]; }}}; функция handleevent (event) {var returnValue = true; // захватить объект события (IE использует глобальный объект события) событие = событие || FixEvent ((this.OwnerDocument || this.document || this) .parentWindow || window) .event); // Получить ссылку на хэш -таблицу обработчиков событий var Handlers = this.events [event.type]; // выполнять каждый обработчик событий для (var i in handlers) {this. $$ handleevent = Handlers [i]; if (this. $$ handleevent (event) === false) {returnValue = false; }} returnValue; }; function fixevent (event) {// добавить стандартные методы события w3c event.preventdefault = fixevent.preventDefault; event.stoppropagation = fixevent.stoppropagation; возвращение события; }; fixeVent.preventDefault = function () {this.returnValue = false; }; fixevent.stoppropagation = function () {this.cancelbubble = true; }; function tableAddevent () {}; return {add: addEvent, remove: removeEvent, $: getByid}} (); var outeleobj = eventutil. $ ("upele"); //addevent.apply(eventutil, тнелеобидж, сульт ", Eventfun3]); //Eventutil.add(oteleobj,"click", eventfun3); var inputObj = eventutil. $ ("button4"); var tableele = Eventutil. $ ("htmleletable"); var tabtrele = tableele.getelementsbytagname ("tr"); EventUtil.Add (Tableele, "Click", EventFun3); for (i = 0; i <tabtrele.length; i ++) {eventutil.add (tabtrele [i], "click", eventfun3); } Eventutil.remove (Tableele, "click", eventfun3); // Метод удаления событий eventutil.add (tableele, "click", eventfun3); // eventutil.add (inputobj, "click", eventfun3); //Eventutil.remove(Outeleobj,"click", eventfun3); //Console.log(AdDevent); // addEvent (inputObj, "click", eventfun3, true); // delevent (upeleobj, "click", eventfun3, false); </script> </body> </html>PS: Здесь мы предоставляем вам онлайн -инструмент о событиях JS, который суммирует широко используемые типы событий и функции функций JS:
Полный список событий и функций JavaScript:
http://tools.vevb.com/table/javascript_event