DOM事件简介

Posted 2022-12-01 viana37

Click、touch、load、drag、change、input、error、risize — 这些都是冗长的DOM（文档对象模型）事件列表的一部分。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。而这个生命周期让DOM事件有更多的用途和可扩展性。

作为一个开发人员，我们必须要理解DOM事件是如何工作的，然后才能更好的驾驭它，利用它们潜在的优势，开发出更高交互性的参与体验（engaging experiences）。

反观我做前端开发的这么长时间里，我觉得我从来没有看到过一个关于DOM事件是如何工作的较为直接准确的解释。今天我的目标就是在这个课题上给大家一个清晰的介绍，让大家能够更快速的了解它。 我首先会介绍DOM事件的基本使用方式，然后会深入挖掘事件内部的工作机制，解释我们如何使用这些机制来解决一些常见的问题。

 

监听事件

在过去，主流浏览器之间对于如何给DOM节点添加事件监听有着很大的不一致性。jQuery这样的前端库为我们封装和抽象了这些差异行为，为事件处理带来了极大的便利。

如今，我们正一步步走向一个标准化的浏览器时代，我们可以更加安全地使用官方规范的接口。为了简单起见，这篇文章将主要介绍在现代浏览器中如何管理事件。如果你在为IE8或者更低版本写javascript，我会推荐你使用polyfill或者一些框架（如jQuery）来管理事件监听。

在JavaScript中，我们使用如下的方式为元素添加事件监听：

1	element.addEventListener(<event-name>, <callback>, <use-capture>);

• event-name(string)
  这是你想监听的事件的名称或类型。它可以是任何的标准DOM事件（click, mousedown, touchstart, transitionEnd,等等），当然也可以是你自己定义的事件名称（我们会在后面介绍自定义事件相关内容）。
• callback(function)（回调函数）
  这个函数会在事件触发的时候被调用。相应的事件(event)对象，以及事件的数据，会被作为第一个参数传入这个函数。
• use-capture(boolean)
  这个参数决定了回调函数(callback)是否在“捕获(capture)”阶段被触发。不用担心，我们稍后会对此做详细的解释。

1 2 3 4 5 6 7 8

var element = document.getElementById( 'element' );   function callback()    alert( 'Hello' );   // Add listener element.addEventListener( 'click' , callback);

Demo: addEventListener

 

移除监听

移除不再使用的事件监听是一个最佳实践（尤其对于长时间运行的Web应用）。我们使用element.removeEventListener()方法来移除事件监听：

1	element.removeEventListener(<event-name>, <callback>, <use-capture>);

但是removeElementListener有一点需要注意的是：你必须要有这个被绑定的回调函数的引用。简单地调用element.removeEventListener('click');是不能达到想要的效果的。

本质上来讲，如果我们考虑要移除事件监听（我们在长时间运行(long-lived)的应用中需要用到），那么我们就需要保留回调函数的句柄。意思就是说，我们不能使用匿名函数作为回调函数。

1 2 3 4 5 6 7 8 9

var element = document.getElementById( 'element' );   function callback()    alert( 'Hello once' );    element.removeEventListener( 'click' , callback);   // Add listener element.addEventListener( 'click' , callback);

Demo: removeEventListener

 

维护回调函数上下文

一个很容易遇到的问题就是回调函数没有在预想的运行上下文被调用。让我们看一个简单的例子来解释一下：

1 2 3 4 5 6 7 8 9 10 11 12 13

var element = document.getElementById( 'element' );   var user =   firstname: 'Wilson' ,   greeting: function ()     alert( 'My name is ' + this .firstname);   ;   // Attach user.greeting as a callback element.addEventListener( 'click' , user.greeting);   // alert => 'My name is undefined'

Demo: Incorrect callback context

 

使用匿名函数(Anonymous Functions)

我们希望回调函数中能够正确的输