目录
前言
在之前的webAPI里面我们了解到了关于DOM的种种和事件最基础的概念，这次我们进阶的来讲一讲这些有趣的高级事件。这些内容为之后PC端的开发和点击鼠标触发事件，按键盘触发事件的种种互动息息相关。
一、注册事件
什么是注册事件？给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式。
1.传统注册方式
利用 on 开头的事件 onclick
<button οnclick=“alert('hi~')”></button>
btn.onclick = function() {}
特点： 注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
2.方法监听注册方式
- 方法监听注册方式，是 w3c 标准推荐方式
- addEventListener() 它是一个方法
- IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
特点：同一个元素同一个事件可以注册多个监听器按注册顺序依次执行
eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
- type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习
二、删除事件
既然我们能注册事件，我们就能删除事件，那么如何删除事件？让我们来看看：
1.传统注册事件的删除方式
eventTarget.onclick = null;
我们可以看到，通过把注册事件更改为空来删除这个事件。
2.方法监听注册方式
如下所示的方式来书写：
eventTarget.removeEventListener(type, listener[, useCapture]);
删除使用eventTarget.removeEventListener()方法添加的事件。使用事件类型，事件侦听器函数本身，以及可能影响匹配过程的各种可选择的选项的组合来标识要删除的事件侦听器。
三、DOM事件流
事件流是什么？我们可以通过JS给标签或者按钮添加注册事件，而这个事件在网页里执行的次序和过程，就是事件流。
DOM事件流分为3个阶段：
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
我们通过图片例子可以更加清晰的看到变化
如果要用理论的方式来说明，我们可以这样解释：我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
关于事件流我们需要注意一下几个重点：
- JS 代码中只能执行捕获或者冒泡其中的一个阶段。
- onclick 和 attachEvent 只能得到冒泡阶段。
- addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕
- 获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
- 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
- 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
- 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。
四、事件对象
- 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
- 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象
eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {}）
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
event，它有很多属性和方法。
比如：
- 谁绑定了这个事件。
- 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
- 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
1.事件对象的使用语法
eventTarget.onclick = function(event) {
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
}
eventTarget.addEventListener('click', function(event) {
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
}）
这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理数）。
2.事件对象的常见属性和方法
我们用图来看看对象属性的方法都有什么：
五、阻止事件冒泡
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。
e.stopPropagation()
标准写法：利用事件对象里面的 stopPropagation()方法
e.cancelBubble = true;
非标准写法：IE 6-8 利用事件对象 cancelBubble 属性
六、事件委托
事件委托也称为事件代理， 在 jQuery 里面称为事件委派。
事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器。
事件委托的作用：我们只操作了一次 DOM ，提高了程序的性能。
七、鼠标事件
了解完前面的内容，我们来了解一下和互动相关的常见鼠标事件：
1.触发鼠标事件
2.禁止鼠标右键和选中
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
取消选中
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
3.鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象
MouseEvent 和键盘事件对象 KeyboardEvent。
八、键盘对象
最后让我们了解一下键盘对象的内容
1.触发键盘对象
这里我们需要注意，键盘事件有一个触发的顺序：down -- press -- up
2.键盘事件对象
使用keycode来判断键盘的ASCII值
注意
键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
- 我们的keyup 和keydown事件不区分字母大小写a和A得到的都是65
- 我们的keypress事件区分字母大小写a 97和A得到的是65
注意:
- keydown和keypress在文本框里面的特点∶他们两个事件触发的时候，文字还没有落入文本框中。
- keyup事件触发的时候，文字已经落入文本框里面了
这里我们附上一个例子，按下S就可以选中文本框：
<input type="text" value="123">
<script>
//核心思路:检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
//使用键盘事件对象里面的keyCode判断用户按下的是否是s键
//搜索框获得焦点:使用js里面的 focus()方法
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
// console.log(e.keyCode); 判断S的ASCII数值
if (e.keyCode === 83) {
search.focus();
}
});
</script>通过这个方式，我们按下按键，判断了它的ASCII码值，最后可以实现这个效果：
总结
事件高级需要注意事件流的执行顺序，了解事件的注册方式，更多的是了解鼠标时间和键盘事件的触发。剩下的大家多多记忆就好，感谢你的观看，希望能给我一个赞。
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
