我 相 信 这 么 优秀 的 你

  已 经 置 顶了 我

  春节福利：公众号回复“1”，免费领取我亲自主讲的【JavaScript从入门到精通】视频，价值998元。0.DOM级别与DOM事件首先在介绍DOM事件之前我们先来认识下DOM的不同级别。针对不同级别的DOM，我们的DOM事件处理方式也是不一样的。

  DOM级别一共可以分为4个级别：DOM0级，DOM1级，DOM2级和DOM3级，

  而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。

  如下图所示：

  其中1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。

  1.事件事件指可以被 JavaScript 侦测到的行为。即鼠标点击、页面或图像载入、鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等操作。事件通常与函数配合使用，当事件发生时函数才会执行。

  事件名称：click/mouseover/blur("不带on")

  响应某个事件的函数就是事件处理程序(事件侦听器)。

  事件处理程序函数名称：onclick/onmouseove/onblur

  更多事件类别请参考w3c中关于事件的详细类别。

  JavaScript 事件

  JavaScript 事件参考手册

  2.事件流事件流指从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。

  一点背景：

  早期的IE事件传播方向为由上至下，即从document逐级向下传播到目标元素；

  而Netscape公司的Netscape Navigator则是朝相反的方向传播，也就是从目标元素开始向上逐级传播最终至window。 两家公司对于事件流出现了截然相反的定义。

  后来ECMAScript在DOM2中对事件流进行了进一步规范，基本上就是上述二者的结合。

  当事件发生时，最先得到通知的是window，然后是document，由上至下逐级依次而入，直到真正触发事件的那个元素(目标元素)为止，这个过程就是捕获。

  接下来，事件会从目标元素开始起泡，由下至上逐级依次传播，直到window对象为止，这个过程就是冒泡。

  所以捕获比冒泡先执行。

  其中DOM3级事件在DOM2的基础之上添加了更多的事件类型。

  DOM2级事件规定的事件流包括三个阶段：

  （1）事件捕获阶段（2）处于目标阶段（3）事件冒泡阶段。

  我们写一个例子：如下图，中间白色区域的盒子分别为box1,box2...box6,包含控制按钮设置我们的事件

  大概流程图如下：

  例子源码

  参考链接————小侠同学

  3.事件处理程序前面我们已经说到了，事件处理程序就是响应某个事件的函数，简单地来说，就是函数。我们又把事件处理程序称为事件侦听器。事件处理程序是以"on"开头的，比如点击事件的处理程序是"onclick",事件处理程序大概有以下5种。3.1 HTML事件处理程序

  像我们的第一个例子，就是HTML事件处理程序，它是写在html里面的，是全局作用域：

  当我们需要使用一个复杂的函数时，将js代码写在这里面，显然很不合适，所以有了下面这种写法：

  这样会出现一个时差问题，当用户在HTML元素出现一开始就进行点击，有可能js还没有加载好，这时候就会报错。但我们可以将函数封装在try-catch块中来处理：

  同时，一个函数的改变，同时可能会涉及html和js的修改，这样是很不方便的，综上，我们有了DOM0级事件处理程序。

  3.2 DOM0级事件处理程序

  之所以有DOM0级事件处理程序，和我们之前提到的IE以及Netscape对应事件传播方向不同处理而产生的事件处理程序。

  可以看到button.onclick这种形式，这里事件处理程序作为了btn对象的方法，是局部作用域。

  所以我们可以用

  如果我们尝试给事件添加两个事件，如：

  输出，hello again，很明显，第一个事件函数被第二个事件函数给覆盖掉了，所以，DOM0级事件处理程序不能添加多个，也不能控制事件流到底是捕获还是冒泡。

  3.3 DOM2级事件处理程序（不支持IE）

  进一步规范之后，有了DOM2级事件处理程序，其中定义了两个方法：

  addEventListener() ---添加事件侦听器

  removeEventListener() ---删除事件侦听器

  函数均有3个参数，

  第一个参数是要处理的事件名(不带on前缀的才是事件名)

  第二个参数是作为事件处理程序的函数

  第三个参数是一个boolean值，默认false表示使用冒泡机制，true表示捕获机制。

  这时候两个事件处理程序都能够成功触发，说明可以绑定多个事件处理程序，但是注意，如果定义了一摸一样时监听方法，是会发生覆盖的，即同样的事件和事件流机制下相同方法只会触发一次，比如：

  removeEventListener()的方法几乎和添加时用法一摸一样：

  这样的话，事件处理程序只会执行一次。

  但是要注意，如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次，一共两次，这两次事件需要分别移除。两者不会互相干扰。

  这时候的this指向该元素的引用。

  这里事件触发的顺序是添加的顺序。

  3.4 IE事件处理程序

  对于 Internet Explorer 来说，在IE 9之前，你必须使用 attachEvent 而不是使用标准方法 addEventListener。

  IE事件处理程序中有类似与DOM2级事件处理程序的两个方法：

  1.attachEvent()

  2.detachEvent()

  它们都接收两个参数：

  1.事件处理程序名称。如onclick、onmouseover，注意：这里不是事件，而是事件处理程序的名称，所以有on。

  2.事件处理程序函数。

  之所以没有和DOM2级事件处理程序中类似的第三个参数，是因为IE8及更早版本只支持冒泡事件流。

  removeEventListener()的方法几乎和添加时用法一摸一样：

  这里事件触发的顺序不是添加的顺序而是添加顺序的相反顺序。

  使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。

  3.5 跨浏览器的事件处理程序

  这一部分需要创建两个方法：

  addHandler() --这个方法职责是视情况来使用DOM0级、DOM2级、IE事件处理程序来添加事件。

  removeHandler()--这个方法就是移除使用addHandler添加的事件。

  这两个方法接收相同的三个参数：

  1.要操作的元素--通过dom方法获取

  2.事件名称--注意：没有on，如"click"、"mouseover"

  3.事件处理程序函数--对应的函数

  使用：

  4.事件对象事件对象是用来记录一些事件发生时的相关信息的对象，但事件对象只有事件发生时才会产生js在元素内部添加元素，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁！

  4.1 属性

  下面是一个例子：

  在这个例子里，我们用到了currentTarget、eventPhase属性。

  4.2 方法

  Event对象主要有以下两个方法，用于处理事件的传播（冒泡、捕获）和事件的取消。

  stopPropagation()——冒泡机制下，阻止事件的进一步往上冒泡

  <pre class="hljs javascript" style="" px="px" border-box="border-box" em="em" break-word="break-word" break-all="break-all" relative="relative" block="block" important="important" auto="auto" normal="normal" none="none" rgb="rgb" medium="medium" new="new" pro="pro" code="#" source="source">   </pre>

  preventDefault()——用于取消事件的默认操作,比如链接的跳转或者表单的提交，主要是用来阻止标签的默认行为

  4.3 兼容性

  当然，事件对象也存在一定的兼容性问题，在IE8及以前本版之中，通过设置属性注册事件处理程序时，调用的时候并未传递事件对象，需要通过全局对象window.event来获取。解决方法如下：

  在IE浏览器上面是event事件是没有preventDefault()这个属性的，所以在IE上，我们需要设置的属性是returnValue

  stopPropagation()也是，所以需要设置cancelBubble，cancelBubble是IE事件对象的一个属性，设置这个属性为true能阻止事件进一步传播。

  5.事件委托事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

  例子说明，我们为ul添加新的li，其中对li标签元素绑定了click事件，但是发现，后增加的元素没有办法触发我们的click事件。

  这是因为如果事件涉及到更新HTML节点或者添加HTML节点时，新添加的节点无法绑定事件，更新的节点也是无法绑定事件，表现的行为是无法触发事件。

  这也是问题所在：

  1.首先我们多次操作DOM获取元素，这样势必会降低浏览器处理性能

  2.事件不具有继承性，如果我们动态在页面中添加了一个元素，那么还需要重新走一遍上述程序为其添加监听事件

  那么有没有更好的方法呢？根据事件的冒泡原理，我们还可以实现另外一个很重要的功能：事件委托。

  我们只监听最外层的元素，然后在事件函数中根据事件来源进行不同的事件处理。这样，我们添加事件监听时只需要操作一个元素，极大的降低了DOM访问，并且不用再给新增的元素添加监听事件了，因为元素的事件会冒泡到最外层，被我们截获。

  这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，所以要判断点击的对象到底是不是li标签元素。

  Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置js在元素内部添加元素，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）。

  这样，我们就实现了我们的事件委托，当然，不是所有的事件都是可以委托的。

  适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

  当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，新增加的节点也可以触发事件效果。

  点击下面链接 查看历史文章

  1、

  2、

  3、

  我是石川（Blue），如果你觉得我的公众号还不错，请多帮我推荐给你的朋友，多谢了。

  石川简介：前阿里巴巴高级技术经理，现开课吧技术学院院长。精通C/C++、Java、Python、前端开发等多种开发技术，曾参与淘宝网的早期建设和优化，拥有丰富的企业级系统开发经验，对HTML5移动端互联网技术及生态体系有深厚的造诣。