Подробное объяснение потоков событий и обработчиков событий в JavaScript

Поток событий: есть два типа. Т.е. это поток пузырьков событий. Когда событие начинается, оно получено от наиболее специфического элемента и распространяется вверх шаг за шагом к менее конкретным узлам (элемент -> документ). Напротив, поток захвата событий Netscape.

События уровня DOM2 предусматривают, что поток событий включает в себя три этапа: этап захвата событий, целевой этап и этап пузыря событий.

В большинстве случаев это пузырьковая фаза добавления обработчика событий в поток событий. Каштан Eventutil:

 var EventUtil = {addHandler: function (element, type, handler) {if (element.addeventListener) {element.AddeventListener (type, Handler, false); } else if (element.attachevent) {element.attachevent ('on' + type, Handler); // ie8} else {element ['on' + type] = Handler; }}, удалить handler: function () {...}}

Давайте подробно рассмотрим это ниже:

Обработчик событий DOM0

Традиционный способ определения обработчиков событий через JavaScript - назначить функцию атрибуту обработчика событий.

Каждый элемент имеет свои собственные атрибуты обработчика событий, которые обычно являются более строчными, например, Onclick. Установка значения этого свойства на функцию может указать обработчик событий.

 var btn = document.getElementbyId ('myBtn'); // Добавить обработчик событий btn.onclick = function () {alert (this); // - элемент DOM btn}; // Удалить обработчик событий btn.onclick = null;

Преимущества: 1. Просто 2. У него есть преимущества Cross-Browser

Недостатки: обработчики событий не указаны до запуска кода, поэтому эти коды расположены за кнопкой на странице, поэтому возможно, что не получен ответ через некоторое время, и пользовательский опыт становится хуже.

Обработчик событий DOM2 уровня

Два метода определяются для обработки операций, которые указывают и удаляют обработчики событий: addEventListener () и RemoveEventListener (). Три параметра, 1. Имя события, которое будет обработано. 2. Функция как обработчик событий 3. Булевое значение. Последнее логическое значение верно, что означает, что обработчик событий называется на стадии захвата, а ложь означает, что обработчик событий называется на стадии пузырьков.

 // Добавить несколько обработчиков событий var btn = document.getElementById ('myBtn'); btn.addeventListener ('click', function () {alert (this); // is dom lement btn}, false); btn.addeventlistener ('click' function () {alert ('hello World'); btn.removeeventListener ('click', function () {// анонимная функция не может быть удалена, удаление не удалось}, false); // переписать var handler = function () {alert (this.id); }; btn.addeventlistener ('Щелкни, обработчик, false); // снова удалить обработчик событий Btn.RemoveEventListener ('click', Handler, false); // Удалить успешно

Эти два обработчика событий увольняются в том порядке, в котором они добавлены. В большинстве случаев обработчики событий добавляются к стадии пузырьков потока событий, что может быть максимальной совместимостью с различными версиями браузера.

Преимущества: один элемент может добавить несколько обработчиков событий

Недостатки: IE8 и ниже браузеры не поддерживают обработчики событий DOM2. (Включая IE8)

Т.е. обработчик событий

Определены два метода, аналогичные вышеперечисленному: AttedEvent (), DetachEvent (). Эти два метода получают одинаковые два параметра: имя обработчика событий и функция обработчика событий. Поскольку IE8 и более ранние версии поддерживают только пузырьки событий, обработчики событий, добавленные через DetachEvent (), будут добавлены в фазу пузырьков.

 var btn = document.getElementbyId ('myBtn'); btn.attachevent ('onclick', function () {alert (this); // window}); btn.attachevent ('onclick', funciton () {alert ("hello, world");});

Нажмите кнопку, порядок запуска этих двух обработчиков событий является точно противоположностью вышеуказанного. Не запускается в порядке, в котором добавляются обработчики событий, как раз наоборот.

Преимущества: один элемент может добавить несколько обработчиков событий

Недостатки: только поддержка т.е.

Поперечный обработчик событий

например:

 var EventUtil = {addHandler: function (ele, type, handler) {if (ele.addeventlistener) {ele.addeventListener (type, handler, false); } else if (ele.attachevent) {ele.attachevent ('on' + type, Handler); } else {ele ['on' + type] = handler}}, removehandler: function (ele, type, handler) {if (ele.removeeventlister) {ele.removeeventListener (type, handler, false); } else if (ele.detachevent) {ele.detachevent ('on' + type, handler); } else {ele ['on' + type] = null; }}}