Get Started

DOM事件
○ 标准
○ 术语
○ addEventListener
○ 取消冒泡
○ 自定义事件
事件委托

DOM事件

点击事件，先从这里开始研究

代码


    
        
            文字

给三个div分别添加了事件监听，当点击文字时，最先点击了哪个div，最新按调用哪个事件监听函数？

2002年，W3C发布标准

• 文档名伪DOM Level 2 Events Specification
• 规定浏览器应该同时支持两种调用顺序
• 首先按照最外层=>最里层（1->2->3）顺序看看有没有函数监听
• 然后按照最里层=>最外层（3->2->1）顺序看看有没有函数监听
• 有监听函数就调用，并提供事件信息，没有就跳过
术语
• 从外向内找监听函数，叫事件捕获
• 从内向外找监听函数，叫事件冒泡
注意：开发者可以自己选择把监听函数放在捕获阶段还是冒泡阶段。

示意图

image.png

addEventListener

• 事件绑定API

    x.attachEvent('onclick', fn)  // 冒泡（IE 5）
    x.addEventListener('click', fn)  // 捕获（网景）
    x.addEventListener('onclick', fn, bool)

如果bool不传或为falsy
就让fn走冒泡，即当浏览器在冒泡阶段发现x有fn函数监听，就会调用fn，并提供事件信息
如果bool为true
就让fn走捕获，即当浏览器在捕获阶段发现x有fn函数监听，就会调用fn，并提供事件信息
决定走哪种方式，另一边就会按照顺序空跑。
示例代码：http://js.jirengu.com/pupuz/6/edit?html,css,js,output
示例代码笔记：事件信息e对象被传给所有监听函数，事件结束后，e对象就不存在了。若是延迟函数或者其他时候需要用到e对象时，需要copy一份到函数局部变量里使用。

target V.S. currentTarget

区别
e.target - 用户操作的元素
e.currentTarget - 程序员监听的元素
this是e.currentTarget，但为了不搞混最好不要用。
举例
div > span{文字} ，用户点击文字
e.target 就是span
e.currentTarget 就是div

一个特例

背景
只有一个div被监听（不考虑父子同时被监听）
fn分别在捕获阶段和冒泡阶段监听click事件
用户点击的元素就是开发者监听的
代码

div.addEventListener('click', f1)
div.addEventListener('click', f2,true)

答案：谁先监听谁先执行

取消冒泡

捕获不可以取消，但是冒泡可以
e.stopPropagation()可以中断冒泡，浏览器不再向上走。一般用于封装某些独立的组件
不可阻止默认动作
有些事件不能阻止默认动作
MDN搜索scroll event，看到Bubbles和Cancelable
Bubbles的意思是该事件是否冒泡，所有冒泡都可取消
Cancelable的意思是开发者是否可以阻止默认事件
Cancelable与冒泡无关

image.png

插曲：如何阻止滚动

scroll事件不可阻止默认动作
阻止scroll默认动作没用，因现有滚动才有滚动事件
要阻止滚动，可阻止wheel和touchstart的默认动作
注意需要找准滚动条所在元素，示例
到那时滚动条还能用，可用CSS让滚动条width: 0
::-webkit-scrollbar{width: 0 !important}
CSS也行
使用overflow: hidden可以直接取消滚动条
但此时JS依然可以修改scrollTop
代码

    //  pc端 
    div.addEventListener('wheel',(e) => {    // 滚轮事件
        e.preventDefault();  //  阻止默认事件
    })
    // 然后CSS设置 ::webkit-scrollbar{
        // width:0;!important
    //}   即可实现无滚动
    
    //  移动端
    div.addEventListener('touchstart',(e) => {   // 触摸事件
        e.preventDefault();  //  阻止默认事件
    })

自定义事件

浏览器自带事件
一共100多种事件，MDN
可以自定一个事件

代码

button1.addEventListener('click', ()=>{
  const event = new CustomEvent('frank',{
    detail:{name: 'frank', age:18},
    bubbles: true, //默认不进行冒泡，所以要加上
    cancelable: false
  })
  button1.dispatchEvent(event)
})

div1.addEventListener('frank', (e)=>{
  console.log('事件触发了')
  console.log(e.detail)
})

事件委托

场景一
要给100个按钮添加点击事件，需要监听这100个按钮的上层，等冒泡的时候判断target是不是这100个按钮中的一个
代码

image.png
场景二
监听目前不存在的元素的点击事件，也是监听上层，等点击的时候看看是不是想要监听的元素即可
代码

image.png
优点
省监听数（内存）
可以监听动态元素

封装事件委托

要求
写出函数on('click', '#div1', 'button', fn)，当用户点击里面的button元素时，调用fn函数

代码一
判断target是否匹配'#div1'

// 封装事件函数
function on(eventType, element, selector, fn){
  if(!(element instanceof Element)){ // '#div'是个选择器
    element = document.querySelector(element)
  }
  element.addEventListener(eventType,(e)=>{
    const t = e.target
    if(t.matches(selector)){
      fn(e)
    }
  })
}

代码二
递归判断，向上层找，一直到第二个参数锁给定的范围

function on(eventType, element, selector, fn) {
  if (!(element instanceof Element)) { // '#div'是个选择器
    element = document.querySelector(element)
  }
  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
}

JS支持事件吗？

不支持。这是DOM事件，不属于JS功能，属于浏览器提供的DOM功能
JS只是调用了DOM提供的addEventListener而已
如何JS支持事件？手写一个事件系统

DOM事件与事件委托