Краткое представление о всплытии, делегировании, привязке и распространении событий JavaScript.

Всплывание событий

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

Особенности:

• Когда срабатывает наша функция событий, она фактически получает объект события.

• Когда мы выполняем метод event.stopPropagation() в нашей функции обработки событий, на этом всплывание событий заканчивается.

• Не все типы событий поддерживают всплытие событий.

• Всплывание событий будет запускать только функции событий того же типа.

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

Существует два способа предотвращения всплытия событий: один — это свойство, а другой — метод.

cancelBubble

устанавливает или возвращает значение, должно ли событие распространяться на верхний уровень.

Синтаксис: event.cancelBubble = true;

stopPropagation()

предотвращает дальнейшее распространение события в потоке событий.

Синтаксис: event.stopPropagation();

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

window.onload = функция(){
      var span = document.getElementById("sp");
      span.onclick = функция(){
          предупреждение('тег диапазона');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = функция(){
          предупреждение('коробка3');
      }
      вар тело = document.body;
      body.onclick = функция(){
          предупреждение('тело');
      }}

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

window.onload = функция(){
      var span = document.getElementById("sp");
      span.onclick = функция(){
          предупреждение('тег диапазона');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = функция (событие) {
          предупреждение('коробка3');
           событие.stopPropagation();

      }
      вар тело = document.body;
      body.onclick = функция(){
          предупреждение('тело');
      }}

Делегирование событий

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

Атрибут

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

Получите элемент, по которому щелкнули.

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

target

возвращает элемент, вызвавший событие.

Синтаксис: event.taget;

window.onload = функция(){
     var ul = document.getElementById('ul1');
     ul.onclick = функция (событие) {
         if(event.target.className == 'abq'){
             alert('Событие сработало!!')
         } 
     }
     //Добавляем гиперссылку document.getElementById('bt1').onclick = function(){
         вар li = document.createElement('li');
         li.innerHTML = "<a href = 'javascript:;' class='abq'>Новый тег</a>";
         ul.appendChild(ли);
     }
 }

Привязка событий через addEventListener().

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

• Параметры:

1. строка события, не используйте
2. функцию обратного вызова. Эта функция будет вызываться при срабатывании события.
3. Требуется ли для запуска события на этапе захвата логическое значение. Значение по умолчанию — false

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

window.onload = функция(){
    var bt = document.getElementById('bt1');
    bt.addEventListener('click',function(){
        alert('Сработала соответствующая функция первого клика!')
    },ЛОЖЬ);
    bt.addEventListener('click',function(){
        alert('Сработала соответствующая функция второго щелчка!')
    },ЛОЖЬ);
    bt.addEventListener('click',function(){
        alert('Сработала соответствующая функция третьего клика!')
    }, false);}

Распространение событий

• Netscape и Microsoft по-разному понимают распространение событий:
  Microsoft считает, что события должны распространяться изнутри наружу , то есть, когда событие инициируется, сначала должно инициироваться событие в текущем элементе, а затем распространяться на элементы-предки текущего элемента, а это означает, что событие должно быть выполнено на стадии «пузырения» .
  Netscape считает, что события должны распространяться снаружи внутрь , то есть при срабатывании текущего события сначала должно инициироваться событие самого внешнего элемента-предка текущего элемента, а затем распространяться внутрь элементов-потомков.
• W3C объединяет решения двух компаний и разделяет распространение событий на три этапа:

1. этап захвата. На этапе захвата события фиксируются от самого внешнего элемента-предка до целевого элемента, но по умолчанию событие не будет инициироваться в этот момент. .
2. Событие целевой фазы захватывает целевой элемент, захват завершается и начинает запускать события на целевом элементе.
3. Событие фазы всплеска передается от целевого элемента к его элементам-предкам, по очереди запуская события в элементах-предках.

Функция ответа выполняется во время фазы барботирования. Третий параметр по умолчанию — false

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('click',function(){
         предупреждение('коробка1');
     },ЛОЖЬ);
     box2.addEventListener('click',function(){
         предупреждение('коробка2');
     },ЛОЖЬ);
     box3.addEventListener('click',function(){
         предупреждение('коробка3');
     },ЛОЖЬ);
 }

Если вы хотите инициировать событие на этапе захвата, вы можете установить для третьего параметра addEventListener() значение true!

window.onload = функция(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('click',function(){
         предупреждение('коробка1');
     },истинный);
     box2.addEventListener('click',function(){
         предупреждение('коробка2');
     },истинный);
     box3.addEventListener('click',function(){
         предупреждение('коробка3');
     },истинный);
 }