小知识，大挑战！本文正在参与「程序员必备小知识」创作活动本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

为了感谢掘金读者这段时间的支持，在主页放上了私人微信，有需要技术交流等可直接加阿ken微信与我交流哦

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

↓ 第七部分 DOM下

7.6_事件进阶

接下来我们说一下学习事件的相关操作内容。

7.6.1_注册事件

在JavaScript 中，注册事件(绑定事件)有两种方式，即传统方式注册事件和事件监听方式注册事件。下面我们分别进行讲解。

1.传统方式

在 JavaScript 代码中，经常使用 on 开头的事件 ( 如 onclick )，为操作的 DOM 元素对象添加事件与事件处理程序。具体语法格式如下。

元素对象.事件 = 事件的处理程序;
// 示例
oBtn.onclick = function() {  }

在上述语法中，元素对象是指使用 getElementByld() 等方法获取到的元素节点。使用这种方式注册事件的特点在于注册事件的唯一性，即同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

事件监听方式

为了给同一个 DOM 对象的同一个事件添加多个事件处理程序，DOM 2 级事件模型中引人了事件流的概念，可以让 DOM 对象通过事件监听的方式实现事件的绑定。由于不同浏览器采用的事件流实现方式不同，事件监听的实现存在兼容性问题。通常根据浏览器的内核，可以把浏览器划分为两大类，一类是早期版本的 IE 浏览器( 如 IE6 ~ IE8)，一类是遵循 W3C 标准的浏览器( 以下简称标准浏览器 )。

接下来我们将根据不同类型的浏览器，分别介绍事件监听的实现方式。

(1) 早期 IE 内核的浏览器

在早期版本的 IE 浏览器中，事件监听的语法格式如下。

DOM 对象.attachEvent (type, callback) ;

在上述语法中，参数 type 指的是为 DOM 对象绑定的事件类型，它是由 on 与事件名称组成的，如 onclick 。参数 callback 表示事件的处理程序。

(2) 标准浏览器

标准浏览器，包括 IE 8 版本以上的 IE 浏览器，以及新版的 Firefox、 Chrome 等浏览器。具体语法格式如下。

DOM 对象.addEventListener (type, callback, [capture]);

在上述语法中，参数 type 指的是 DOM 对象绑定的事件类型，它是由事件名称设置的，如 click。参数 callback 表示事件的处理程序。参数 capture 默认值为 false ，表示在冒泡阶段完成事件处理，将其设置为 true 时，表示在捕获阶段完成事件处理。

以上介绍的两种类型的浏览器，在实现事件监听时除了语法不同外，事件处理程序的触发顺序也不相同。早期版本 IE 浏览器的示例代码如下。

<div id="t">test</div>
<script>
var obj = document.getElementById('t');
// 添加第1个事件处理程序
obj.attachEvent ('onclick',function() {
console.log ('one');
});
// 添加第2个事件处理程序
obj.attachEvent('onclick'，function() {
console.log('two');
});
</script>

标准浏览器的示例代码如下。

<div id="t">test</div>
<script>
var obj = document.getElementById('t');
// 添加第1个事件处理程序
obj.addEventListener('click', function() {
console.log ('one');
});
// 添加第2个事件处理程序
obj.addEventListener('click', function() { 
console.log ('two');
});
</script>

以上两种方式用于为 < div> 标签的单击事件添加两个处理程序，第 1 个处理程序在控制台输出one ，第 2 个处理程序在控制台输出 two。接下来我们在 test.html 文件中保存早期版本 IE 浏览器的相关事件监听代码，在 IE 11 的开发人员工具中，中，通过 IE 8 兼容模式来测试，

运行结果 128 同一个对象的相同事件，早期版本IE浏览器的事件处理程序按照添加的顺序倒序执行，因此输出结果依次为 two 和 one；而标准浏览器的事件处理程序按照添加顺序正序执行，因此输出的结果依次为 one 和 two。

7.6.2_删除事件

在保证事件监听的处理程序是一个有名的函数时，开发中可根据实际需求移出 DOM 对象的事件监听。同样，事件监听的移出也需考虑兼容性问题，具体语法格式如下。

DOM对象.onclick = null; // 传统方式删除事件
DOM对象.detachEvent(type, callback); // 早期版本IE浏览器
DOM对象.removeEventListener(type, callback); // 标准浏览器

在上述语法中，参数 type 值的设置要与添加事件监听的事件类型相同，参数 callback 表示事件处理程序的名称，即函数名。

7.6.3_DOM 事件流

事件发生时，会在发生事件的元素节点与 DOM 树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流。

在浏览器发展历史中，网景 (Netscape) 公司团队的事件流采用事件捕获方式，指的是事件流传播的顺序应该是从 DOM 树的最上层开始出发一直到发生事件的元素节点。而微软 ( Microsoft ) 公司的事件流采用事件冒泡方式，指的是事件流传播的顺序应该是:从发生事件的元素节点到 DOM 树的根节点。

W3C 对网景公司和微软公司提出的方案进行了中和处理，规定了事件发生后，首先实现事件捕获，但不会对事件进行处理；然后进行到目标阶段，执行当前元素对象的事件处理程序。但它会被看成是冒泡阶段的一部分；最后实现事件的冒泡，逐级对事件进行处理。

🌊🌈往期回顾：

挑战最短时间带你走进HTML（十八）
挑战最短时间带你走进HTML（十九）
挑战最短时间带你走进HTML（二十）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「关注」 谢谢支持❤

感激相遇你好我是阿ken

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（二十一）