Обзор прослушивателей событий JavaScript

1. Основные понятия

1.1 Что такое событие? Компоненты мероприятия? Привязка события?

(1) События относятся к каким-то конкретным интерактивным моментам, происходящим в документах или браузерах, это естественное поведение элементов (это не имеет никакого отношения к написанию кода JS или нет). Когда мы работаем с элементом, будут запущены многие события элемента. События — это мост взаимодействия между JavaScript и DOM.

Например, когда вы открываете определенную веб-страницу, событие загрузки будет запущено после загрузки браузера (onload не является событием), когда указатель мыши будет наведен на элемент, будет запущено событие наведения (onhover не является событием) . , и когда мышь щелкнет элемент, щелчок будет инициирован событиями (onclick не является событием) и так далее. Браузер смонтирует некоторые общие события в частные свойства объекта элемента, чтобы мы могли реализовать привязку событий DOM0,

(2) Компоненты события: источник события Тип события = функция предварительной обработки

Источник события: элемент, который фактически запускает событие,
тип события: пример: onmousemove, onmouseover и т. д.,
функция предварительной обработки: function ( ) { };

(3) Привязка события (событие уровня DOM 0): метод привязки к событию текущего элемента, цель состоит в том, чтобы выполнить некоторые реакции при запуске события текущего элемента.

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

Обработка событий — это поведение браузера, реагирующего на событие, когда событие запускается, а код, соответствующий этому поведению, — это обработчик событий (также называемый функцией обработки событий, обработчиком событий).

Имена обработчиков событий начинаются с «on», поэтому обработчик события click — onclick, а обработчик события load — onload.

Короче говоря, событие — это момент действия, такой как щелчок мышью; обработчик события — это процесс, функция функции, которая обрабатывает событие, когда оно происходит.

1.3 Слушатели событий

Прослушиватель — это объект, специально используемый для отслеживания и обработки событий или изменений состояния, которые происходят на других объектах.При возникновении контролируемого объекта он немедленно предпримет соответствующие действия, то есть, когда вышеупомянутое событие произойдет на наблюдаемом объекте, A метод слушателя выполняется немедленно.
　　Прослушиватель событий (событие DOM уровня 2) позволяет компьютеру отслеживать, происходит ли событие, чтобы выполнять некоторые написанные программы, чтобы элементы HTML реагировали на событие;

В общем случае событие прослушивания соответствует элементу dom, а также необходимо объявить тип события прослушивания. Например, вы можете установить событие мониторинга для кнопки и автоматически вызывать соответствующую функцию для ее обработки после нажатия. В то же время вы можете использовать объект события (event object) при обработке функциями для получения информации об объекте, вызвавшем событие.

1.4 Ход событий

Поток событий, также известный как распространение событий, относится к потоку событий и порядку их выполнения.
Когда происходит событие, оно распространяется среди узлов элементов в определенном порядке.Этот процесс распространения называется потоком событий DOM.

Поскольку теги в HTML вложены друг в друга, вы можете думать об элементе как о маленьком поле внутри большого окна.Документ — это самый внешний большой блок, и события кликов привязаны ко всем блокам. box События также будут инициированы, что называется распространением событий. Итак, событие щелчка большого ящика выполняется первым или событие щелчка маленького ящика выполняется первым?

Поток событий современных браузеров (относится к браузерам, отличным от IE6-IE8, включая IE9+, FireFox, Safari, Chrome и Opera и т. д.) содержит две модели потока событий и три процесса. Двумя методами являются захват событий и всплывающее представление событий, а тремя процессами являются фаза захвата, целевая фаза и фаза всплытия. Следующий рисунок наглядно иллюстрирует этот процесс:

Событие.прототип：

• 0 NONE: значение по умолчанию, ничего не означает
• 1CAPTURING_PHASE 捕获阶段
• 2 AT_TARGET 目标阶段（当前事件源）
• 3BUBBLING _PHASE :冒泡阶段

• В всплывающем потоке событий порядок распространения события клика для div следующий: div>body>html>document
• В потоке событий захвата последовательность распространения события клика для div выглядит следующим образом: document>html>body>div.
• Не все события проходят через фазу всплытия. Все события проходят через фазу захвата и находятся в целевой фазе, но некоторые события пропускают фазу всплытия: например, событие focus для получения фокуса ввода, событие blur для потери фокуса ввода, mouseenter, mouseleave, load, unload, resize.

2. Как в JavaScript реализована обработка событий (регистрация событий)?

События делятся на события уровня 0 DOM и события уровня 2 DOM, а события уровня 2 DOM также называются мониторингом событий.
Недостаток привязки событий DOM уровня 0 заключается в том, что если события совпадают, последнее событие переопределяет предыдущее.
Привязка событий на уровне DOM2 может связывать несколько обработчиков событий для одного и того же события одного и того же объекта, и предыдущее событие не будет перезаписано и будет выполняться последовательно.
События уровня DOM0 и события уровня DOM2 могут сосуществовать, не перезаписывая друг друга, но dom0 все равно перезапишет друг друга.

2.1 Событие уровня DOM 0 (запускается на стадии всплытия) — традиционный метод регистрации

Принцип привязки событий DOM0

Процесс присвоения значения частному атрибуту (onXXX) текущего элемента; (значение атрибута по умолчанию до этого равно null, если мы назначаем функцию, это эквивалентно привязке метода), когда мы успешно присваиваем значение ( назначить функцию),
это В то время, когда браузер свяжет элемент DOM с назначенной функцией и установит мониторинг поведения элемента DOM.Когда пользователь инициирует определенное поведение, браузер выполнит назначенную функцию;

Особенности привязки событий DOM0:

Только элементы DOM рождаются с этим частным свойством (частное свойство события onxxx), метод, который мы назначаем, называется привязкой события, в противном случае при настройке пользовательских свойств для удаления привязки события нам нужно только
назначить значение null (eventTarget.event type = null; )
В привязке события DOM0 только один метод может быть привязан к определенному поведению события текущего элемента, и могут быть привязаны несколько методов, и последняя привязка заменит предыдущую привязку.

2.1.1 Встроенный HTML-атрибут (on+имя события='функция обработки')

То есть напрямую заполните атрибуты, связанные с событием, в элементе HTML, а значением атрибута будет обработчик события. Примеры следующие:

<button onclick="console.log('You clicked me!');"></button>

onclick соответствует событию click, поэтому при нажатии кнопки будет выполнен обработчик события, то есть в консоль выводится You clicked me!.

Тем не менее, мы должны отметить, что этот метод объединяет код HTML и код JavaScript вместе, что не способствует сопровождению кода, поэтому этого метода следует избегать , насколько это возможно.

2.1.2 Привязка атрибутов DOM в коде JavaScript (element.onclick)

Привязка функций прослушивателя событий
Укажите события и обработчики событий, непосредственно задав свойства узла DOM, приведенный выше код:

const btn = document.getElementById("btn");

btn.onclick = function(e) {
    
    

    console.log("You clicked me!");

};

В приведенном выше примере сначала получите объект btn и прослушайте событие click, добавив к этому объекту атрибут onclick. Значение этого атрибута соответствует обработчику события. Эта подпрограмма также называется обработчиком событий DOM уровня 0.

2.1.3 Событие отмены привязки традиционного метода регистрации

eventTarget.EventType = ноль;

(1) Напишите событие отмены привязки в любом месте функции, и событие регистрации будет выполнено только один раз; (
2) Напишите событие отмены привязки в конце функции, и событие регистрации не будет выполняться после его уничтожения.
(3) Записать событие отвязки перед событием регистрации вне функции, и событие отвязки будет для него недействительным;
(4) После записи события отвязки перед событием регистрации вне функции событие регистрации выполняться не будет.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传统注册解除绑定</title>
</head>
<body>
    <button class='btn1'>传统注册</button>
<script>
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
// 传统注册
// btn1.onclick = null;//对应（3）
btn1.onclick = function(e) {
    
    
        btn1.onclick = null;//对应（1）
        console.log('我是传统注册，明天周日了')
        // btn1.onclick = null;//对应（2）
    }
// btn1.onclick = null;//对应（4）
</script>
</body>
</html>

2.1.4 Часто используемые сводки мониторинга событий на уровне DOM0

Общий мониторинг событий мыши

название события	Описание события
по щелчку	Когда мышь щелкает по объекту
ondblclick	Когда мышь дважды щелкает объект
onmousedown	Когда кнопка мыши нажата на объект
onmouseup	Когда кнопка мыши отпущена на объекте
onmousemove	Когда кнопка мыши перемещается по объекту
наведение мыши	наведите курсор мыши
вводить мышь	Когда мышь входит в объект (аналогичное событие при наведении мыши)
onmouseleave	Когда мышь покидает объект (аналогично событие onmouseout)

Общий мониторинг событий клавиатуры

название события	Описание события
нажатие клавиши	При нажатии клавиши клавиатуры (системные кнопки, такие как клавиши со стрелками и функциональные клавиши, не распознаются)
onkeydown	При нажатии клавиши на клавиатуре (системная кнопка может быть распознана и произойдет до нажатия клавиши)
onkeyup	Когда клавиша клавиатуры отпущена

Прослушиватели событий общей формы

название события	Описание события
по изменению	Запускается, когда пользователь изменяет содержимое поля формы
в фокусе	Когда элемент получает фокус (например, клавиша табуляции или щелчок мыши)
размытие	когда элемент теряет фокус
onsubmit	когда форма отправлена
при перезагрузке	Когда форма сбрасывается
на входе	При использовании для изменения содержимого поля формы

Мониторинг событий общей страницы

название события	Описание события
в процессе	Когда страница или изображение закончили загрузку
при разгрузке	Когда пользователь покидает страницу

2.2 События DOM уровня 2 — метод регистрации мониторинга

О мониторинге событий Сначала Netscape разработала управляемый событиями механизм JavaScript (т. е. захват событий). Немедленно IE также запустил свой собственный набор механизмов, управляемых событиями (то есть всплывающую подсказку событий). Наконец, W3C стандартизировал два механизма событий, которые делятся на фазу захвата, целевую фазу и фазу всплытия.Подробное введение см. ниже. До IE8 IE всегда настаивал на собственном механизме событий (вопросы совместимости, которые всегда вызывали головную боль у фронтенд-персонала), а после IE9 IE также поддерживает спецификацию W3C.

Принцип привязки событий уровня DOM2

Метод addEventListener/attachEvent, используемый привязкой событий уровня DOM2, определен на прототипе встроенного класса eventTarget, и при его вызове мы должны сначала найти этот метод в цепочке прототипов, а затем выполнить эффект привязки событий. Браузер
создаст пул событий (очередь событий) для определенного поведения события текущего элемента.Браузер имеет унифицированный пул событий, и поведение, привязанное к каждому элементу, размещается здесь, отличаясь соответствующими флагами.Когда мы передаем addEventListener / attachEvent Когда событие связано, связанный метод будет помещен в пул событий;
когда определенное поведение элемента срабатывает, браузер вернется к соответствующему пулу событий и выполнит все методы, которые в настоящее время находятся в пуле событий в заказ

Особенности привязки событий уровня DOM2

Браузер смонтирует некоторые общие события в частные свойства объекта элемента, чтобы мы могли реализовать привязку событий DOM0, можно было использовать все поведения, поддерживаемые DOM0, DOM2, а DOM2 также поддерживает поведение событий, которого нет в DOM0, для пример: onDOMContentLoaded(Все DOM0 и DOM2 IE6-8 не поддерживаются) // Это событие будет вызвано при загрузке структуры DOM в текущем браузере.
В DOM2 несколько различных методов могут быть привязаны к определенному поведению событий текущего элемента (поскольку все связанные методы помещаются в пул событий);
удаление события: тип события, связанный метод, завершение третьей фазы распространения Согласовано, удаление может быть завершено (поэтому при связывании методов старайтесь не использовать анонимные функции, иначе удалить будет непросто)

2.2.1 Браузеры, поддерживающие стандартные прослушиватели событий W3C, используют: addEventListener()

element.addEventListener(event, listener, useCapture)
//第一个参数是事件的类型(例如“ click”或“ mousemove”，与IE不同的是前面不用加on)。
//第二个参数是事件发生时我们要调用的监听函数。
//第三个参数是一个布尔值，指定是否使用捕获事件。此参数是可选的（默认是false true代表捕获,由外向里,很少用; false代表冒泡,由里向外）

//标准的事件监听函数如下：
```javascript
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
    
    
    console.log("1：You clicked me!");
}, false);
btn.addEventListener("click", () => {
    
    
    console.log("2：You clicked me!");
}, false);
btn.addEventListener("click", () => {
    
    
    console.log("3：You clicked me!");
}, false);
//执行的顺序：1 - 2 - 3

Приведенный выше пример означает, что сначала получается объект btn, представляющий узел, а затем к этому объекту добавляется прослушиватель событий.При обнаружении события клика вызывается функция обратного вызова, то есть на объект выводится сообщение You clicked me! консоль. Эта процедура также известна как обработчик событий DOM уровня 2.

Уведомление:

• Не используйте префикс on для событий. Используйте «клик» вместо «onclick».
• Самый внутренний элемент (т. е. целевой элемент) больше не различает этапы захвата и всплытия и сначала выполняет прослушиватель, написанный впереди, а затем выполняет прослушиватель, написанный позже;

• Событие jq click $(“.btn”).click(function(){alert(“1”)}) и событие click исходного addEventListener являются событиями уровня dom2, которые не будут перезаписаны и будут выполняться последовательно

2.2.1.1 Отменить привязку метода события addEventListener()

удалитьпрослушиватель событий()

(1) Запишите событие отмены привязки в любом месте функции, и событие регистрации будет выполнено только один раз;
(2) Запишите событие отмены привязки вне функции, тогда зарегистрированное событие будет недействительным.
(3) Для отмены привязки метода регистрации мониторинга следует отметить, что тип события и функция мониторинга должны быть одинаковыми, в противном случае отвязка будет недействительной.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class='btn2'>监听注册</button>
    <script>
        // 监听注册
        /*不能解绑事件
        btn2.addEventListener('click', function() {
                console.log('我是监听注册，明天也是周日')
            })
            // 不能解绑事件，必须放在函数内部
        btn2.removeEventListener('click', function() {
                console.log('监听注册解绑');
            })
             */
        btn2.addEventListener('click', fn);
        function fn() {
    
    
            console.log('监听注册解绑,我们真没关系了');
            btn2.removeEventListener('click', fn)
        }
    </script>
</body>
</html>

2.2.2 Браузеры IE (браузеры ниже IE9, все упомянутые ниже IE представляют браузеры ниже IE9): attachEvent() — событие, зарегистрированное таким образом, имеет только стадию всплытия

Дополнение: в событии this всегда указывает на объект, вызвавший событие, но особенность в том, что this в методе attachEvent() всегда указывает на окна

//对象.attachEvent(‘onevent’，‘function’)
//参数1：事件类型，需要在事件类型前加on 
//参数2：回调函数，即事件触发时执行的函数
const btn = document.getElementById("btn");
btn.attachEvent("click", () => {
    
    
    console.log("1:You clicked me!");
});
btn.attachEvent("click", () => {
    
    
    console.log("2:You clicked me!");
});
btn.attachEvent("click", () => {
    
    
    console.log("3:You clicked me!");
});
//三个方法执行的顺序是3 - 2 -1;

Отвязать метод события: detachEvent()

2.2.3 Совместимая запись событий на уровне DOM2

IE9+, FireFox, Safari, Chrome и Opera поддерживают метод addEventListener().Для IE8 и более ранних версий используйте функцию attacEvent() для привязки событий. Итак, мы можем написать совместимый код:

function addEventHandler(obj, eventName, handler) {
    
    
    if (document.addEventListener) {
    
    
        obj.addEventListener(eventName, handler, false);
    }
    else if (document.attachEvent) {
    
    
        obj.attachEvent("on" + eventName, handler);
    }    
    else {
    
    
        obj["on" + eventName] = handler;
    }
}

3. Сосуществование и последовательность выполнения событий уровня DOM0 и событий уровня DOM-2.

результат операции:

1. Блок отображения событий уровня DOM0 1:

Нажмите на div01, результат '01'
Нажмите на div02, результат 2,
01 Нажмите на div03, результат 3, 2, 01

• Элемент element.onclick, выполняемый после того, как будет виден результат нажатия div01, переопределит встроенный атрибут onclick(onclick="alert(1)"); и если один и тот же элемент привязан к нескольким событиям element.onclick, последний элемент element.onclick Это событие переопределит все предыдущие события element.onclick.
• Общий результат показывает, что в событиях уровня DOM0 событие запускается в фазе всплытия, и элемент, по которому щелкнули, начинает всплывать;

2. В блоке отображения событий уровня DOM2 2:

Щелкните выход 1, 4
div1 щелкните выход 1, 2, 4
div2 щелкните выход 1, 3, 2, 4 div3

• События div1 и div3 добавляют параметр true в использование addEventListener, указывающий, что событие запускается на этапе захвата, а порядок выполнения выше, чем на этапе всплытия.

3. События уровня DOM0 и события уровня DOM2 сосуществуют в блоке отображения 3:

Щелкните вывод div11: 11, 1, 14.
Щелкните вывод div12: 11, 12, 2, 1, 14.

• События уровня DOM0 и события уровня DOM2 могут сосуществовать , не перезаписывая друг друга , но dom0 все равно перезапишет друг друга . Порядок выполнения:
• Когда всплывающее событие и событие захвата происходят одновременно, захват события выполняется первым и выполняется последовательно в нижней части (распространенные вопросы интервью).
• Фаза захвата > фаза всплытия (всплытие событий уровня DOM0 > всплытие событий уровня DOM2)
  ① События уровня DOM2 запускаются в фазе всплытия (то есть третий параметр равен false), события уровня DOM0 > события уровня DOM2;
  ② Перехватываются события уровня DOM2. Фазовый триггер (то есть третий параметр истинен), событие уровня DOM0 < событие уровня DOM2;
• Событие встроенного атрибута ( οnclick="alert(1)") > Событие атрибута Bind DOM в коде JS (element.onclick = function(e){...})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style text="txt/css">
        div {
    
    border: 1px solid red;padding: 0 20px 20px 20px;margin: 15px;}
    </style>
</head>
<body>
    <div id="div01" onclick="alert(1)">
        div01 onclick 绑定输出1
        <div id="div02" onclick="alert(2)">
            div02 onclick 绑定输出2 ...
            <div id="div03" onclick="alert(3)">
                div03 onclick 绑定输出3... (DOM0级事件展示块1)
            </div>
        </div>
    </div>
    <hr>
    <div id="div1">
        div1 click 绑定输出1 4...
        <div id="div2">
            div2 click 绑定输出2...
            <div id="div3">
                div3 click 绑定输出3... （DOM2级事件展示块2）
            </div>
        </div>
    </div>
    <hr>
    <div id="div11" onclick="alert(1)">
        div11 click 绑定输出11 14 onclick 绑定输出1
        <div id="div12" onclick="alert(2)">
            div12 click 绑定输出 11 12... onclick 绑定输出2...（DOM0级事件&DOM2级事件共存展示块3）
        </div>
    </div>
    <script>
        var div01 = document.getElementById("div01");
        div01.onclick = function(e) {
    
    
            alert('02');
        };
        div01.onclick = function(e) {
    
    
            alert('01');
        };

        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var div3 = document.getElementById("div3");
        div1.addEventListener("click", function() {
    
    
            alert("1");
        }, true);
        div1.addEventListener("click", function() {
    
    
            alert("4");
        });
        div2.addEventListener("click", function() {
    
    
            alert("2");
        });
        div3.addEventListener("click", function() {
    
    
            alert("3");
        }, true);

        var div11 = document.getElementById("div11");
        var div12 = document.getElementById("div12");
        div11.addEventListener("click", function() {
    
    
            alert("11");
        }, true);
        div11.addEventListener("click", function() {
    
    
            alert("14");
        });
        div12.addEventListener("click", function() {
    
    
            alert("12");
        }, true);
    </script>
</body>
</html>

4. Делегирование события (прокси события)

Делегирование событий – это приложение всплывающих событий. Это механизм распространения всплывающих сообщений на основе событий. Он делегирует событие дочернего элемента родительскому элементу для прослушивания (добавления события в родительский элемент). Когда дочерний элемент инициирует событие , событие всплывает на родительский уровень;
если вы хотите, чтобы указанный дочерний элемент инициировал событие (в зависимости от того, кто делает разные вещи), вы можете получить источник события (цель) через объект события (событие), а затем решить, является ли он является желаемым дочерним элементом через условие, если это так, выполнить событие, иначе не выполнять.

获取事件源的方法： var target = e.target || e.srcElement

4.1 Общие сценарии применения

4.1.1 Сценарий применения 1

Если несколько дочерних элементов в контейнере должны выполнять одно и то же поведение (обработчик событий) при запуске одного и того же типа события .
Пример: Есть 100 лисов, давайте привяжем событие клика к этим 100 лисам.

Оригинальное решение : привязка событий выполняется отдельно для каждого элемента li. Дом нужно запускать 100 раз.Чем больше раз вы обращаетесь к дому, тем больше раз браузер будет перерисовываться и переставляться, что продлит время интерактивной готовности всей страницы.

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

// HTML
<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
// JavaScript
var list = document.getElementById("list");
list.addEventListener("click", function(e) {
    
    
    console.log(e.target);
});

4.1.2 Сценарий приложения 2

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

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

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

Используя делегирование событий, вы можете реализовать обработку динамических кликов, и вам не нужно получать привязки одну за другой.
Оригинальное решение : каждый раз, когда происходит изменение, необходимо заново привязывать событие для вновь добавленного элемента и отвязывать событие для удаляемого элемента.
Делегирование на основе событий : событие привязывается к родительскому элементу, и когда оно выполняется для целевого элемента, событие может быть сопоставлено посредством всплывающей всплывающей подсказки.
Таким образом, независимо от того, какой элемент в потомках запускает соответствующее поведение события, благодаря механизму всплывающего распространения метод, связанный с текущим контейнером родительского элемента, также будет запущен и выполнен, а привязка события добавления/удаления данных будет не быть затронутым.
Видно, что использование делегирования событий может сократить объем повторяющейся работы в случае динамических событий привязки.

// HTML
<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
// JavaScript
var list = document.getElementById("list");
var li=document.getElementsByTagName('li')
list.addEventListener("click", function(e) {
    
    
	console.log(e.target,e.target.nodeName,li.length);
	var ele = document.createElement("li");
	ele.innerHTML=('Item '+(li.length+1));
	list.appendChild(ele);
});

4.2 Проблемы, с которыми сталкиваются агенты событий

4.2.1 Описание проблемы

Когда агент событий привязан к li и span одновременно, при нажатии на span всплывают как li, так и span Код выглядит следующим образом:

//HTML
<ul>
<li><span>我是嵌套在li中的span里的内容</span></li>
</ul>
// JavaScript
<script>
    var li = document.getElementByTagName("li");
    var span = document.getElementByTagName("span");
	li.addEventListener("click", function(e) {
    
    
	    console.log('li',e.target);
	});
	span.addEventListener("click", function(e) {
    
    
	    console.log('span',e.target);
	});
</script>

4.2.2 Решение — предотвращение всплытия событий

Основной код для предотвращения всплытия событий :

//cancelBubble 适用于IE，而stopPropagation适用于其他浏览器。现代浏览器（IE9 及 以上、Chrome、FF等）均同时支持这两种写法，保险起见的兼容写法：  
e.cancelBubble = true;  
if (e.stopPropagation){
    
     
	e.stopPropagation();   
}

Способ 1. Предотвращение всплытия в обработчике событий span

var li=document.getElementByTagName('li');
var span =document.getElementByTagName('span');
li.addEventListener('click',function(e){
    
    
	// 兼容性处理方法1	
	//if (!e) {
    
    
    //    const e = window.event;
    var event = e || window.event;// 兼容性处理方法2
	console.log('li',event.target);
	//阻止冒泡 start
	event.cancelBubble = true;//IE
	if (event.stopPropagation) {
    
    
	 	event.stopPropagation();//其他浏览器
	}
	//阻止冒泡end
	//}
})

Способ 2. Обнаружение целевого элемента в обработчике событий li

var li = document.getElementByTagName('li');
var span =document.getElementByTagname('span');
li.addEventlistener('click',function(e){
    
    
	// 兼容性处理
	var event = e || window.event;
	if(event.target.nodeName.toLocaleLowerCase（）=='span){
    
    
		//阻止冒泡 start
		event.cancelBubble = true;//IE
		if (event.stopPropagation) {
    
    
		 	event.stopPropagation();//其他浏览器
		}
		//阻止冒泡end
		return;
	}
	console.log('点击li,且li的序号是',[].indexOf.call(lis,event.target));

})

4.3 Резюме

1. Преимущества прокси событий:

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

2. События, подходящие для делегирования событий: щелчок, наведение мыши, наведение мыши, нажатие клавиши, нажатие клавиши.
3. Несмотря на то, что mouseover, mousemove и mouseout также имеют всплывающие окна событий, при их обработке они должны постоянно вычислять и определять местоположение по положению, что потребляет много производительности, поэтому они не подходят для делегирования событий.
4. Такие события, как фокус и размытие, не имеют механизма всплытия событий, поэтому события привязки делегатов не могут быть выполнены.

5. Предотвратите поведение по умолчанию

5.1, поведение по умолчанию

Поведение по умолчанию (также называемое событием по умолчанию) — это то, что существует само по себе без нашей регистрации. Обычное поведение браузеров по умолчанию:

• метка щелкнуть прыжок
• Перенаправление кнопки отправки в форме
• Контекстное меню на странице браузера

5.2, предотвратить поведение по умолчанию

Иногда мы не хотим, чтобы браузер выполнял события по умолчанию:

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

У нас есть два метода блокировки событий по умолчанию:

 1. e.preventDefault() 在事件处理函数中，非 IE 使用
 2. e.returnValue = false 在低版本的ie中可用
 3. return false //
    只能阻止on+事件类型的事件中起作用，addEventListener（type,function）中不可用

• Когда мы блокируем событие по умолчанию, нам также нужно написать совместимое
событие, связанное с addEventListener:

 var oA = document.querySelector('a')
    oA.addEventListener('click', function (e) {
    
    
        e = e || window.event
        console.log(this.href)
        //兼容写法
        e.preventDefault ? e.preventDefault() : e.returnValue = false
    })

События типа on+event:

       window.onload = function(){
    
    
           var a1 = document.getElementById("a1");
           a1.onclick = function(){
    
    
                return false;
                return confirm("你确定要离开当前页面吗？");
           }
       }