Механизм событий JavaScript — помните тщательно подготовленный технический обмен

JavaScript браузер jQuery
Механизм событий JavaScript — помните тщательно подготовленный технический обмен

Сначала задайте несколько вопросов, можете быстро ответить?

  1. Как записывать восходящие (пузырьковые) события и как записывать нисходящие (захватывающие) события?
  2. Тип захвата и тип всплытия существуют одновременно, какой из них действует?
  3. jQuery включен или привязка пузырится или захватывает?
  4. Может ли бульканье прекратиться, может ли захват остановить его?
  5. Разница между stopPropagation и stopImmediatePropagation
  6. Event.bubbles, Event.eventPhase
  7. Event.cancelable, Event.cancelBubble, event.defaultPrevented
  8. Общие навыки

js захват событий и всплывающий график

js事件的捕获和冒泡

Например:

Нажмите на s2, что будет напечатано на s1?

<div id="s1">s1
 <div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){ 
  console.log("s1 冒泡事件"); },false);
s2.addEventListener("click",function(e){ 
  console.log("s2 冒泡事件");},false);
s1.addEventListener("click",function(e){ 
  console.log("s1 捕获事件");},true);
s2.addEventListener("click",function(e){
  console.log("s2 捕获事件");},true);
</script>


//s1 捕获事件
//s2 冒泡事件
//s2 捕获事件
//s1 冒泡事件

Нажмите на s2, событие клика идет из документа-> html-> body-> s1-> s2 (захват вперед), где событие регистрации захвата находится на s1, а вывод «событие захвата s1» достигает s2, который достиг узел назначения.

События всплытия и захвата регистрируются на s2.Если сначала регистрируется всплытие, а затем регистрируется захват, сначала будет выполнено всплытие, и будет выведено «событие всплытия s2».

Событие, зарегистрированное после выполнения на s2, то есть событие захвата, выводит «событие захвата s2».

Теперь войдите в стадию всплытия, следуйте s2->s1->body->html->document (пузырька вперед) Если всплывающее событие найдено в s1, выведите «s1 всплывающее событие».

JQuery на событии пузырится

Вставьте исходный код jquery в событие ниже

jquery的on事件源码

Общие навыки

onclick --> всплывающее окно события, перезапись onlick перезапишет предыдущие свойства, проблем с совместимостью нет

ele.onclik = null;   //解绑单击事件，将onlick属性设为null即可

Блокировать события по умолчанию (ссылки href="", отправка форм и т. д.)

  1. return false;Событие по умолчанию для предотвращения событий, связанных с эксклюзивными свойствами (через on)

    ele.onclick = function() {
    ……                         //你的代码
    return false;              //通过返回false值阻止默认事件行为
}
    Однако в jQuery мы часто используем return false, чтобы предотвратить поведение браузера по умолчанию.Что делает «return false»?

    Каждый раз, когда вы вызываете «return false», он фактически делает 3 вещи:

    • event.preventDefault();

    • event.stopPropagation();

    • Остановить выполнение функции обратного вызова и немедленно вернуться.

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

    Вставьте исходный код jQuery ниже

    jQuery->return false 源码

  2. event.preventDefault( );Событие по умолчанию для предотвращения добавления событий через addEventListener().

    element.addEventListener(“click”, function(e){
    var event = e || window.event;
    ……
    event.preventDefault( );      //阻止默认事件
},false);

  3. event.returnValue = false;Событие по умолчанию, которое предотвращает добавление событий с помощью attachEvent() (это событие характерно для браузеров IE).

    element.attachEvent(“onclick”, function(e){
    var event = e || window.event;
    ……
    event.returnValue = false;  //阻止默认事件
},false);

Инкапсулировать привязку и отвязку событий в функцию, совместимую с браузерами, включая IE6 и выше (хотя сейчас в основном отказались от IE9 и ниже хххх)

// 事件绑定
function addEvent(element, eType, handle, bol) {
    if(element.addEventListener){           //如果支持addEventListener
        element.addEventListener(eType, handle, bol);
    }else if(element.attachEvent){          //如果支持attachEvent
        element.attachEvent("on"+eType, handle);
    }else{                                  //否则使用兼容的onclick绑定
        element["on"+eType] = handle;
    }
}

// 事件解绑
function removeEvent(element, eType, handle, bol) {
    if(element.addEventListener){
        element.removeEventListener(eType, handle, bol);
    }else if(element.attachEvent){
        element.detachEvent("on"+eType, handle);
    }else{
        element["on"+eType] = null;
    }
}

Событие перестает распространяться stopPropagation и stopImmediatePropagation

// 事件传播到 element 元素后，就不再向下传播了
element.addEventListener('click', function (event) {
  event.stopPropagation();
}, true);

// 事件冒泡到 element 元素后，就不再向上冒泡了
element.addEventListener('click', function (event) {
  event.stopPropagation();
}, false);

Однако метод stopPropagation предотвратит распространение только [текущего события элемента (всплывания или захвата)] и не предотвратит функции прослушивателя других событий щелчка узла. То есть, вместо полной отмены события клика, он также может создать новое событие клика в обычном режиме.

element.addEventListener('click', function (event) {
  event.stopPropagation();
  console.log(1);
});

element.addEventListener('click', function(event) {
  // 会触发
  console.log(2);
});

Если вы хотите полностью предотвратить распространение этого события и больше не запускать все последующие функции прослушивания кликов, вы можете использовать метод stopImmediatePropagation. Примечание: это для этого события.Например, если вы напишете этот метод в клике, то метод, привязанный к элементу [после использования этого метода], будет недействительным, но другие методы mousedown и mouseover все равно будут действовать. я проверял~

element.addEventListener('click', function (event) {
  // 会触发
  console.log(‘改方法内的可以执行’);
  event.stopImmediatePropagation();
  // 会触发
  console.log(1);
});

element.addEventListener('click', function(event) {
  // 不会被触发
  console.log(2);
});

// Jquery同理
$(element).click(function() {
  // 不会触发
  console.log(‘jquery click’)
})

$(element).hover(function() {
  // 会触发
  console.log(‘jquery click’)
})

Event.bubbles, Event.eventPhase

Event.bubblesСвойство возвращает логическое значение, указывающее, будет ли всплывать текущее событие. Это свойство доступно только для чтения и обычно используется, чтобы узнать, может ли экземпляр Event всплывать. Как упоминалось ранее, если это явно не объявлено, события, сгенерированные конструктором Event, по умолчанию не всплывают. Вы можете судить о том, всплывает ли событие в соответствии со следующим кодом, чтобы выполнять различные функции.

function goInput(e) {
  if (!e.bubbles) {
    passItOn(e);
  } else {
    doOutput(e);
  }
}

Специально проверены события, не поддерживающие всплытие:

  • События пользовательского интерфейса (загрузка, выгрузка, прокрутка, изменение размера)
  • События фокуса (размытие, фокус)
  • События мыши (mouseleave, mouseenter)

Event.eventPhaseСвойство возвращает целочисленную константу, представляющую текущую стадию события. Это свойство доступно только для чтения.

var phase = event.eventPhase;

Event.eventPhaseЕсть четыре возможных возвращаемых значения.

  • 0, событие в данный момент не происходит.
  • 1. В настоящее время событие находится в фазе захвата, то есть в процессе распространения от узла-предка к узлу-цели.
  • 2. Событие достигает целевого узла, который является узлом, на который указывает свойство Event.target.
  • 3. Событие находится в стадии всплытия, то есть в процессе обратного распространения от целевого узла к узлу-предку.

Event.cancelable, Event.cancelBubble, event.defaultPrevented

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

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

var evt = new Event('foo');
evt.cancelable  // false

Когда свойство Event.cancelable имеет значение true, вызов Event.preventDefault() может отменить событие, предотвратив поведение браузера по умолчанию для события. Обратите внимание, что этот метод только отменяет действие события по умолчанию на текущий элемент и не предотвращает распространение события. Если вы хотите остановить распространение, вы можете использовать методы stopPropagation() или stopImmediatePropagation().

function preventEvent(event) {
  if (event.cancelable) {
    event.preventDefault();
  } else {
    console.warn('This event couldn\'t be canceled.');
    console.dir(event);
  }
}

Event.cancelBubbleСвойство является логическим значением, которое может быть установлено само по себе. Если установлено значение true, это эквивалентно выполнению Event.stopPropagation(), что может предотвратить распространение события.

Примечание. MDN сообщает, что эта функция была удалена из веб-стандартов, хотя некоторые браузеры все еще поддерживают ее в настоящее время, но могут перестать поддерживать ее в будущем, пожалуйста, постарайтесь не использовать эту функцию. Пожалуйста, используйте метод event.stopPropagation() вместо этого нестандартного свойства.cancelBubble-MDN

Event.defaultPreventedСвойство возвращает логическое значение, указывающее, был ли вызван метод Event.preventDefault для этого события. Это свойство доступно только для чтения.

if (event.defaultPrevented) {
  console.log('该事件已经取消了');
}

Основные справочные документы:

Объяснить механизм событий в JS (с примерами)

модель событий

Категории