事件流（笔记)

事件流与两个阶段说明

事件流指的是事件完整的执行过程中的流动路径

实际工作都是使用事件冒泡为主

事件捕获 (不太重要）

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

说明

true:捕获

false:冒泡（默认就是false)

事件冒泡

概念 当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

阻止冒泡

前提 阻止事件冒泡需要拿到事件对象

事件对象.stopPropagation()

此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

    document.addEventListener('click', function () {
      alert('我是爷爷')
    })
    fa.addEventListener('click', function () {
      alert('我是爸爸')
    })
    son.addEventListener('click', function (e) {
      alert('我是儿子')
      // 组织流动传播  事件对象.stopPropagation()
      e.stopPropagation()
    })

解绑事件

on事件

     //绑定事件
    btn.onclick = function () {
      alert('已点击')
    }
    //解绑事件
    btn.onclick = null

addEventListener方式

    function fn() {
      alert('已点击')
    }
    //绑定事件
    btn.addEventListener('click', fn)
    // 解绑事件
    btn.removeEventListener('click', fn)

注：匿名函数无法被解绑