DOM事件

DOM事件流

• 事件捕获：最外层元素先接收事件，沿着DOM树至最具体的元素最后接收
• 事件冒泡：最具体的元素先接收事件，沿着DOM树至最外层元素最后接收

事件处理

1. HTML事件处理程序

// html
<button value="hhhh" onclick="handleClick(this, event, value)">click here</button>

// js
function handleClick(el, e, val) {
  console.log(el)  // 元素本身
  console.log(e)  // 事件
  console.log(val)  // hhhh
}

2. DOM0 级事件处理程序

绑定事件

document.getElementById('child').onclick = function (e) {
  console.log(e)  // 事件
  console.log(this)  // 元素本身
}

解绑事件

document.getElementById('child').onclick = null

3.DOM2 级事件处理程序

绑定事件

• addEventListener 第三个参数默认false，false表示在冒泡阶段调用事件处理程序、true代表事件捕获阶段
• 可以给一个元素绑定多个同类型事件处理程序，解绑时也需逐个解绑

// html
<div id="father">
  <button id="child">click here</button>
</div>

// js
document.getElementById('child').addEventListener('click', function (e) {
  console.log(e)
  console.log(this)
}, true)
document.getElementById('father').addEventListener('click', function (e) {
  console.log('father')
}, true)

解绑事件
removeEventListener的三个参数必须与addEventListener一样才有效

//html
<button id="child">click here</button>
<button id="cancelClick">cancelClick</button>

// js
document.getElementById('child').addEventListener('click', handler, true) // 绑定

document.getElementById('cancelClick').addEventListener('click', function (e) {
  document.getElementById('child').removeEventListener('click', handler, true) // 解绑
})
function handler() {
  console.log('handler')
}

4.IE

事件委托

• 原理：事件冒泡
• 过程：指定一个事件处理程序，就可以管理某一类型的所有事件。一般就是给一个外层元素指定一个事件处理程序，用于管理该元素中的后代元素（通过事件target）
• 作用：

1. 只需给一个元素绑定事件，访问DOM的次数更少，添加的处理函数更少，消耗时间更少
2. 当后代元素动态增删时不需对应进行事件的绑定和解绑

// html
<ul id="listContainer">
  <li>aaaa</li>
  <li>bbbb</li>
</ul>

// js
document.getElementById('listContainer').onclick = function (e) {
  console.log(e.target)
}