深入理解js Dom事件机制（二）——添加事件处理程序

qianfeng 发布于2019-08-01 18:00 / 1676人阅读

摘要：深入理解事件机制一事件流事件就是当用户或者浏览器自身执行的某种动作，诸如等都是事件的名称，那响应个事件的函数就称为事件处理程序事件处理函数事件句柄。

深入理解js Dom事件机制（一）——事件流

事件就是当用户或者浏览器自身执行的某种动作，诸如 click、mouseover等都是事件的名称，那响应个事件的函数就称为事件处理程序（事件处理函数、事件句柄）。 事件处理程序的名字都是以on+事件名称命名，比如 click事件的事件处理程序就是onclick， 为某个事件指定事件处理程序的方式大致分为三种。

1、HTML事件处理程序

这个很简单，大家基本初学js的时候都应该用过，就不再赘述，直接看实例代码




    
    Html事件处理程序

以上代码展示了两种html指定事件处理程序的方法，需要注意的是 第一种做法的this指向的是元素本身， 所以我们可以很容易的访问元素本身的属性，而第二种做法的this指向的window对象。

缺点：

存在时差问题，当用户在元素出现在页面就触发事件，但有可能这个时候事件处理程序不具备执行的条件。

html与js代码耦合度高，这正是很多开发者放弃html事件处理程序的原因。

2、DOM0级事件处理程序

这种方式首先需要取得一个dom元素对象的应用，然后将一个函数赋值给一个事件处理程序，这种方式在第四代浏览器中就已经出现，至今仍然为现在浏览器所支持，原因一是简单，二是具有跨浏览器的优势。




    
    DOMO级事件处理程序

通过上面的代码可以看出，这种方法指定的事件处理程序中this是指向元素本身。相对应的这种方法也可以删除指定的事件处理程序： btn.onclick = null.

3、DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()、removeEventListener(),它们都接受三个参数：要处理的事件名、事件处理函数、布尔值（true：在捕获阶段调用事件处理函数，false:在冒泡阶段调用事件处理函数）。




    
    DOM2级事件处理程序

从上述代码中可以看出：

addEventListener可以对一个元素添加多个事件处理程序，并可以声明是将事件处理程序添加到哪一个阶段（为了保证兼容性、建议都将事件处理程序添加到冒泡阶段）。

需要特别注意的是：removeEventListener移除事件处理函数的时候，传入的事件事件处理函数必须和addEventListener传入的相同，方可移除，这就意味着如果addEventListener中使用了一个匿名函数来作为事件处理函数，那么removeEventListener将无法移除。

4、IE事件处理程序（IE8 && IE8 - && Opera）

IE实现了类似DOM中的两个方法：attacheEvent()、detachEvent(),它们接受两个参数：事件处理程序名称、事件处理函数。由于IE8以及更早的浏览器只支持冒泡事件流，所以通过attacheEvent（）添加的事件处理程序都将在会被添加到冒泡阶段。




    
    IE事件处理程序

与DOM2级方法的异同

相同：

   1、都可以添加和移除事件处理程序，匿名函数均不可移除。
   2、都可以添加多个事件处理程序。

不同：

   1、IE的事件处理函数会在全局作用于执行，所以this指向window，而DOM方法中this指向元素对象引用
   2、当添加多个事件处理程序时：执行的顺序和DOM2级事件处理程序相反。

5、跨浏览器事件处理程序

为了保证事件处理的代码能在大部分的浏览器下得到一致性的运行，我们可以恰当的使用浏览器能力检测能力封装一个通用的事件处理程序添加函数。

let eventUtil = {
    addEventHandle(element, eventType, handle) {
        if (Object.prototype.toString.apply(handle) !== "[object Function]") {
            throw new TypeError("handle invaild")
        }
        if (!element.addEventListener) {
            element.addEventListener(eventType,handle)
        } else if (element.attachEvent) {
            element.attachEvent(`on${eventType}`,handle)
        } else{
            element[`on${eventType}`] = handle
        }

    },
    removeEventHandle(element, eventType, handle) {
        if (Object.prototype.toString.apply(handle) !== "[object Function]") {
            throw new TypeError("handle invaild")
        }
        if (!element.removeEventListener) {
            element.removeEventListener(eventType,handle)
        } else if (element.detachEvent) {
            element.detachEvent(`on${eventType}`,handle)
        } else{
            element[`on${eventType}`] = null
        }

    }
}

上面的代码很简单，首先判断浏览器是否支持addEventHandle, 如果支持就用它来添加事件程序，否则再判断attachEvent，如果还不支持只能用Dom0级事件添加， 但是针对IE8--使用attachEvent添加事件处理程序时，this的指向并没有做处理，包括事件触发的阶段等。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51521.html

深入理解js Dom事件机制（二）——添加事件处理程序

摘要：深入理解事件机制一事件流事件就是当用户或者浏览器自身执行的某种动作，诸如等都是事件的名称，那响应个事件的函数就称为事件处理程序事件处理函数事件句柄。深入理解js Dom事件机制（一）——事件流事件就是当用户或者浏览器自身执行的某种动作，诸如 click、mouseover等都是事件的名称，那响应个事件的函数就称为事件处理程序（事件处理函数、事件句柄）。事件处理程序的名字都是以on...

ddongjian0000 2019-08-21 17:39 评论0 收藏0
由setTimeout深入JavaScript执行环境的异步机制

摘要：图片转引自的演讲和两个定时器中回调的执行逻辑便是典型的机制。异步编程关于异步编程我的理解是，在执行环境所提供的异步机制之上，在应用编码层面上实现整体流程控制的异步风格。问题背景在一次开发任务中，需要实现如下一个饼状图动画，基于canvas进行绘图，但由于对于JS运行环境中异步机制的不了解，所以遇到了一个棘手的问题，始终无法解决，之后在与同事交流之后才恍然大悟。问题的根节在于经典的J...

codeGoogle 2019-08-21 18:29 评论0 收藏0
深入理解js Dom事件机制（一）——事件流

摘要：事件捕获提出的事件流模型称为事件捕获。事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。首先我们思考一个很有意思的事情：一张纸上画了两个同心圆，当我们把手指放到圆心上时，手指指向的不是一个圆，而是纸上的两个圆，同理之，当我们单击网页上的一个div...

OBKoro1 2019-08-21 17:34 评论0 收藏0
深入前端-彻底搞懂浏览器运行机制

摘要：当这些异步任务发生的时候，它们将会被放入浏览器的事件任务队列中去，等到运行时执行线程空闲时候才会按照队列先进先出的原则被一一执行，但终究还是单线程。浏览器是多进程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser进程：浏览器的主进程（负责协调、主控），只有一个。负...

YPHP 2019-08-02 15:30 评论0 收藏0
深入前端-彻底搞懂浏览器运行机制

摘要：当这些异步任务发生的时候，它们将会被放入浏览器的事件任务队列中去，等到运行时执行线程空闲时候才会按照队列先进先出的原则被一一执行，但终究还是单线程。浏览器是多进程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser进程：浏览器的主进程（负责协调、主控），只有一个。负...

Youngs 2019-08-23 18:34 评论0 收藏0