Внешний интерфейс 20k пишет делегирование события вот так 🐹

JavaScript

17 марта 2020 г.
"Ежедневная серия вопросов 🚀"
Автор: Ван Эргоу
Блог:Наггетс,думаю нет,Знай почти,короткая книга,CSDN
Ставьте лайк и смотрите снова, сформируйте привычку, ежедневная серия вопросов будет постоянно обновляться, ваша поддержка - самая большая мотивация для меня продолжать делиться 😘

чтобы понятьDOMСвязанные события, мы должны сначала понять“事件流”Понятие «поток событий» описывает порядок, в котором события поступают со страницы.

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

Захват событий: события сначала принимаются менее специфическими узлами, а затем распространяются на наиболее специфичные узлы. Это противоположность пузырьковым событиям.

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

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

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

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

<ul id="myLink">
  <li id="1">aaa</li>
  <li id="2">bbb</li>
  <li id="3">ccc</li>
</ul>

Не используйте делегирование событий

var myLink = document.getElementById('myLink');
var li = myLink.getElementsByTagName('li');

for(var i = 0; i < li.length; i++) {
  li[i].onclick = function(e) {
    var e = event || window.event;
    var target = e.target || e.srcElement;
    alert(e.target.id + ':' + e.target.innerText);  
  };
}

Существует проблема:

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

Делегат события, написанный интерфейсом 8k

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

Давайте посмотрим, как пишется неправильная версия делегата события:

 ul.addEventListener('click', function(e){
     if(e.target.tagName.toLowerCase() === 'li'){
         fn() // 执行某个函数
     }
 })

20 000 делегаций событий, написанных внешним интерфейсом

Неправильная версия делегированного событияbugэто если пользователь нажметliвнутриspan, это не сработаетfn, что явно неверно.

Тогда давайте посмотрим, как должно быть написано правильное делегирование события:

function delegate(element, eventType, selector, fn) {
     element.addEventListener(eventType, e => {
       let el = e.target
       while (!el.matches(selector)) {
         if (element === el) {
           el = null
           break
         }
         el = el.parentNode
       }
       el && fn.call(el, e, el)
     })
     return element
   }

Идея состоит в том, чтобы нажатьspanЗатем рекурсивно пройтиspanЭлемент предка, чтобы увидеть, что нетulвнутриli.

Преимущества делегирования мероприятия

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

Пункты к сведению

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

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

Если в статье что-то не так, поправьте меня.

Спасибо всем~ 💘

Категории