事件捕获和时间冒泡、以及默认事件

[diveDylan]

事件冒泡和事件捕获是因为不同浏览器实现事件流的方式不一样衍生的两个概念

Event capturing

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

Event bubbling

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

有关事件流的解释 1、event flow 2、Javascript event order

addEventListener

将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

// api 
target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);
target.addEventListener(type, listener, useCapture, wantsUntrusted  );  // Gecko/Mozilla only

这里的useCapture就是是否开启event flow捕获行为，默认为false。

ul        // addEventListener   click
    li 
        span

我们这边以ul标签为例，进行事件注册，对是用不同useCapture的事件顺序进行解释

   const ulEl = document.querySelector('ul')
    const liEl = document.querySelector('li')
    ulEl.addEventListener('click', e => {
      console.log('ul element click')
    }, true)
    liEl.addEventListener('click', e =>{
      console.log('li element click')
    })
/**
* output
* ul element click
* li element click
* update useCapture to default false
* li element click
* ul element click
*/

默认事件

指的是浏览器一些标签具有默认的事件行为，如a链接的href，input的focus和input，button的click事件，还有video标签play等等 有些情况在我们没有覆盖默认事件的时候，往往希望浏览器对事件不执行默认响应

// 阻止默认行为
event.preventDefault()
// or return false