持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情
1. 注册事件
给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：传统方式和方法监听注册方式
-
传统注册方式
利用 on 开头的事件 onclick
<button onclick=“alert('hi~')”></button>或者btn.onclick = function() {}特点：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
-
方法监听注册方式(w3c 标准推荐方式)
addEventListener 事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
-
type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
-
listener：事件处理函数，事件发生时，会调用该监听函数
-
useCapture：可选参数，是一个布尔值，默认是 false。
特点：同一个元素同一个事件可以注册多个监听器,按注册顺序依次执行
-
2. 删除事件
- 传统方式 eventTarget.onclick = null;
- 方法监听注册方式 eventTarget.removeEventListener(type, listener[, useCapture]);
3. DOM 事件流
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。
注意 :
- JS代码中只能执行捕获或者冒泡其中的一个阶段。
- onclick 只能得到冒泡阶段。
- addEventListener(type, listener[,useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
- 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
DOM 事件流会经历3个阶段：
-
捕获阶段
由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。
document -> html -> body -> div
-
当前目标阶段
-
冒泡阶段
事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程
div -> body -> html -> document
4. 事件对象
eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {}） // 这个 event 就是事件对象
官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
事件对象的属性和方法
| 事件对象属性方法 | 说明 |
|---|---|
| e.target | 返回触发事件的对象 |
| e.type | 返回事件的类型 |
| e.preventDefault() | 该方法阻止默认事件(比如不让链接跳转) |
| e.stopPropagation() | 阻止冒泡 |
html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。
<a href="http://www.baidu.com">百度</a>
<script>
//阻止默认行为 让链接不跳转
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法
});
//传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
e.preventDefault();
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题
return false;
}
</script>
e.target 和 this 的区别：
this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）
e.target 是事件触发的元素。
通常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象，而target指向的是子元素，因为它是触发事件的那个具体元素对象。
//事件冒泡下的e.target和this
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// 我们给ul 绑定了事件 那么this 就指向ul
console.log(this); // ul
// e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
console.log(e.target); // li
});
</script>
