JavaScript 事件处理程序

常见的事件处理程序属性：

• onclick：单击事件
• onload：在页面被浏览器加载完成之后，自动触发的事件
• onblur：失去焦点事件
• onchange：内容发生改变事件
• onsubmit：表单提交事件

1. HTML 事件处理程序

Javascript代码作为了 HTML 标签的事件处理程序属性的值。

<button onclick="alert('success')">点我</button>

<button onclick="show()">点我</button>
<script>
    function show(){
        alert("success");
    }
</script>

HTML 事件处理程序缺点

• 时差问题，在HTML元素一出现就触发对应事件，但是有可能该事件的函数还没有加载完成。
• HTML 和 JS 紧密耦合，如果需要改动事件处理程序，要改 HTML 和 JS 两处代码。

2. DOM0级处理事件程序

DOM0级处理事件程序就是将一个函数赋值给一个事件处理程序属性，可以认为是元素的方法，在这个事件处理程序的作用域中，可以用this访问到该元素的任何方法和属性。

每个元素（包括window和document）都有自己的事件处理程序属性，这些属性全部小写。

document.getElementById('myButton').onclick = function(){
  alert('hello')
}

DOM0级处理事件程序会在事件流的冒泡阶段被处理。

移除DOM0级事件处理程序

button.onclick = null

DOM0级事件处理程序的优点

相比于 HTML 事件处理程序，DOM0级事件处理程序：

• 不会出现执行事件时，对应事件处理函数不存在的问题
• HTML 和 JS 解耦

DOM0级事件处理程序的缺点

• 不能给一个元素同时添加两个事件
• 不能控制元素的事件流（捕获or冒泡）

3. DOM2级处理事件程序

DOM2级事件处理程序定义了两个方法：addEventListener()和removeEventListener()，所有DOM节点都包含这两个方法。

3个参数：

• 处理的事件名（事件处理程序属性去掉前缀“on”）
• 事件处理的函数
• 一个布尔值（默认为false）
  • 布尔值为true，表示在事件捕获阶段执行事件处理程序
  • 为false，表示在事件冒泡阶段执行事件处理程序

移除DOM2级处理事件程序

通过addEventListener()添加的时间处理程序，只能通过removeEventListener()来删除。removeEventListener 需要传和 addEventListener 一样的参数，

button.addEventListener('click', function(){
  alert('hello')  
})
button.removeEventListener('click', function(){
  alert('hello')  
})

上面这样写是没用的，表面上你确实参数传的一样，其实不是，里面传的是匿名函数，永远都不会一样的。
事件处理程序为匿名函数时无法移除。可以使用函数名来绑定事件和移除事件，如下：

let sayHi = ()=>{
  alert('hello')  
}
button.addEventListener('click', sayHi, false)
button.removeEventListener('click', sayHi, false)

DOM2级事件处理程序的优点

相比于DOM0 级事件处理程序，DOM2级事件处理程序：

• 可以添加多个事件，那么事件就会按照添加它们的顺序执行
• 可以控制元素的事件流