Подробное объяснение объектов событий, объектов источников событий и потоков событий в js.

• Что такое события: События относятся ко всем событиям, которые могут происходить в js и отслеживаются, например: (мышь, клавиатура, изменения в окне браузера и т. д.).

• Что такое объект события (событие): С точки зрения непрофессионала, это объект, записывающий различную информацию о событии.
  Здесь необходимо отметить, что объект события будет иметь проблемы совместимости. В браузерах, отличных от IE, это событие, но в других браузерах это window.event.

 btn.onclick = функция(событие){let e = событие || window.event}

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

• В fireFox это event.srcElement.
• В IE это event.target.
  Совместимый метод записи относится к объекту события.

поток событий

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

захватывать события

Самый верхний узел сначала получает событие, а затем передает его вниз к конкретному узлу. например: когда пользователь нажимает на элемент p и использует захват событий, событие щелчка будет распространяться в порядке document>htm>body>p. Путь передачи – снаружи внутрь.

Бурлящие события

В отличие от события захвата, оно передается изнутри наружу. Когда пользователь нажимает p, оно передается родительскому элементу p>body>html. ***Поскольку эта функция часто используется для делегирования событий.

Делегация мероприятия

Мы связываем одни и те же события, которые будут запускаться всеми дочерними элементами, с родительским элементом, что может сократить количество операций DOM и повысить производительность. Конкретным методом использования является использование метода объекта источника событий.

 <ул>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

Чтобы привязать события кликов к li, обычно наш подход заключается в циклическом переборе событий кликов к li.

 let oLi = document.querySelectorAll("li")
 for(пусть я; я <oLi.length; я++){
            oLi[i].onclick = function(){
                console.log("я")
            }
        }

Способ использования делегирования событий:

 let oUl = document.querySelector("ul")
  oUl.onclick = функция(событие){
            пусть e = событие ||
            console.log(e.target.innerHTML)
        }

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

Операция по предотвращению всплытия событий (запись совместимости)

***Некоторые события не требуют операций барботирования.

 функция stopBubble(событие){
    var e = event||window.event //Метод записи, совместимый с объектом события, e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //Метод записи, совместимый с IE}

Блокировать события по умолчанию (совместимый метод записи)

***Блокируйте тег и события перехода по умолчанию и меню правой кнопкой мыши.

 функция cancelHandle(событие){
    var e = событие||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

Рекомендации по теме: [Видеоруководство по JavaScript]

Выше приведено подробное объяснение объекта события, объекта источника события и потока событий в js. Для получения дополнительной информации обратите внимание на другие соответствующие статьи на китайском веб-сайте PHP!