DOM事件简单来说（一）

在项目开发过程中，我们经常需要考虑用户在使用产品时产生的各种交互事件，比如鼠标点击事件、按键事件等，这类事件行为属于前端的一部分结束DOM事件，不同的DOM事件会有不同的触发条件和触发效果。本文将带你深入浅出地了解DOM事件的属性和方法。在介绍DOM事件之前，先来了解一下DOM的不同层次。针对不同层次的DOM，我们的DOM事件处理方式也不同。DOM层级和DOM事件DOM层级分为4个层级：DOM0层、DOM1层、DOM2层和DOM3层，而DOM事件又分为3个层级：DOM0层事件处理、DOM2层事件处理和DOM3层事件处理。如下图所示：有人会问，为什么没有DOMlevel1的事件处理呢？因为level1DOM标准没有定义事件相关的内容，所以没有所谓的level1DOM事件模型。DOM层级这里就不详细介绍了。下面主要介绍DOM不同层级的不同事件。1、DOM0级事件在了解DOM0级事件之前，我们需要先了解一下HTML事件处理器，这也是最早出现的此类事件处理方式。代码如下：在上面的代码中，我们触发showFn方法通过在HTML代码中直接定义一个onclick属性，这样的事件处理器***的缺点是HTML与JS强耦合。一旦我们需要修改函数名，就要修改两个地方。当然，好处是不需要操作DOM就可以完成事件绑定。那么什么是DOM0级处理事件呢？DOM0级事件就是给一个事件处理属性赋值一个函数，比如：在上面的代码中，我们为按钮定义了一个id，通过JS获取到了这个id的按钮将函数分配给事件处理属性onclick。该方法是DOM0级事件处理的体现。我们可以通过将null分配给事件处理程序属性来取消绑定事件。DOM0级事件处理程序的缺点是一个处理程序不能同时绑定多个处理函数。例如，我想为按钮点击事件添加另一个功能。2、DOM2级事件DOM2级事件在DOM0级事件的基础上弥补了一个handler不能同时绑定多个handler的缺点，允许一个handler添加多个handler。代码如下：DOM2级别的事件定义了两个方法addEventListener和removeEventListener，分别用于绑定和解除绑定事件，该方法包含3个参数，分别是绑定的事件处理属性的名称（不包括on），处理函数，捕获时是否执行事件处理函数。如果我们还需要添加鼠标进入方法，我们只需要：btn.addEventListener('mouseover',showFn,false);这样，当点击按钮，鼠标移入时，就会触发showFn方法。需要注意的是IE8以下版本不支持addEventListener和removeEventListener，需要用attachEvent和detachEvent实现：btn。attachEvent('onclick',showFn);//绑定事件btn.detachEvent('onclick',showFn);//解除绑定事件这里我们不需要传入第三个参数，因为IE8以下版本只支持冒泡事件。3、DOM3级事件DOM3级事件在DOM2级事件的基础上增加了更多的事件类型，所有类型如下：UI事件，当用户与页面上的元素交互时触发，如：load、scrollFocus事件，当元素获得或失去焦点时触发，例如：blur，focus鼠标事件，当用户通过鼠标在页面上执行操作时触发，例如：dbclick，mouseupwheel事件，使用鼠标滚轮时触发或者类似的设备，比如：mousewheeltextevent，在文档中输入文字时触发，比如：textInput键盘事件，当用户通过键盘在页面上进行操作时触发，比如：keydown,keypress合成事件，触发当为IME（输入法编辑器）输入字符时，比如:compositionstartChange事件，当底层DOM结构发生变化时触发，比如：DOMsubtreeModified和DOM3级别的事件也允许用户自定义一些事件。上面DOM事件流程中提到，addEventListener的第三个参数是指定事件是在捕获阶段执行还是在冒泡阶段执行。设置为true表示事件在捕获阶段执行，设置为true表示事件在捕获阶段执行，设置为false表示事件在冒泡阶段执行。那么什么是事件冒泡和事件捕获呢？可以用下图来解释：1.事件冒泡所谓事件冒泡，就是事件从最开始产生的地方一层层往上冒泡，比如上图中间的a标签就是事件目标。点击a标签后，p和li上的click事件会同时触发，一层一层，直到最外层的html或document。这是一个代码示例：事件冒泡