DOM0级事件处理程序

  • DOM0级事件处理程序是将一个函数赋值给一个事件处理属性，有两种表现形式。
    • 第一种是先通过JavaScript代码获取DOM元素，再将函数赋值给对应的事件属性。
    • 第二种是直接在html中设置对应事件属性的值，值有两种表现形式，一种是执行的函数体，另一种是函数名，然后在script标签中定义该函数。
    • 以上两种DOM0级事件处理程序同时存在时，第一种在JavaScript中定义的事件处理程序会覆盖掉后面在html标签中定义的事件处理程序。
  • DOM0级事件处理程序只支持事件冒泡阶段。

  • DOM0级事件处理程序的优缺点如下。

    • 优点：简单且可以跨浏览器。
    • 缺点：一个事件处理程序只能绑定一个函数。

      DOM2级事件处理程序

      在DOM2级事件处理程序中，当事件发生在节点时，目标元素的事件处理函数就会被触发，而且目标元素的每个祖先节点也会按照事件流顺序触发对应的事件处理程序。DOM2级事件处理方式规定了添加事件处理程序和删除事件处理程序的方法。

  • 针对DOM2级事件处理程序，不同的浏览器厂商制定了不同的实现方式，主要分为IE浏览器和非IE浏览器。

    • 在IE10及以下版本中，只支持事件冒泡阶段。在IE11中同时支持事件捕获阶段与事件冒泡阶段。在IE10及以下版本中，可以通过attachEvent()函数添加事件处理程序，通过detachEvent()函数删除事件处理程序。
    • 在IE11及其他非IE浏览器中，同时支持事件捕获和事件冒泡两个阶段，可以通过addEventListener()函数添加事件处理程序，通过removeEventListener()函数删除事件处理程序。
  • 既然DOM2级事件处理程序存在两种实现方式，那么它们之间有没有共同点和不同点呢？
    • 共同点
      • 在DOM2级事件处理程序中，不管是IE浏览器还是非IE浏览器都支持对同一个事件绑定多个处理函数。如果绑定了多个处理函数，都会调用。
      • 在需要删除绑定的事件时，不能删除匿名函数，因为添加和删除的必须是同一个函数。
        • 如果使用的是匿名函数的形式，绑定与取消的函数并不是同一个，则无法取消绑定的事件。
    • 不同点
      • 在IE浏览器中，使用attachEvent()函数为同一个事件添加多个事件处理函数时，会按照添加的相反顺序执行。
      • 在IE浏览器下，使用attachEvent()函数添加的事件处理程序会在全局作用域中运行，因此this指向全局作用域window。在非IE浏览器下，使用addEventListener()函数添加的事件处理程序在指定的元素内部执行，因此this指向绑定的元素。

DOM3级事件处理程序

DOM3级事件处理程序是在DOM2级事件的基础上重新定义了事件，也添加了一些新的事件。最重要的区别在于DOM3级事件处理程序允许自定义事件，自定义事件由createEvent(“CustomEvent”)函数创建，返回的对象有一个initCustomEvent()函数，通过传递对应的参数可以自定义事件。

  • 函数可以接收以下4个参数。
    • type：字符串、触发的事件类型、自定义，例如“keyDown”“selectedChange”。
    • bubble（布尔值）：表示事件是否可以冒泡。
    • cancelable(布尔值）：表示事件是否可以取消。
    • detail（对象）：任意值，保存在event对象的detail属性中。

创建完成的自定义事件，可以通过dispatchEvent()函数去手动触发，触发自定义事件的元素需要和绑定自定义事件的元素为同一个元素。