JavaScript事件处理方法(三)

最近因为网站每天都要修改，为网站做特效，看了很多js接触事件，但是只用了很少一部分，有时候用起来很迷茫。现在我已经系统整理好了，所以想和我们的平台分享一下，供大家参考！

1.什么是JavaScript事件？

事件是JavaScript应用程序跳动的心脏，也是把一切粘在一起的胶水。当我们在浏览器中与某些类型的网页交互时，事件就会发生。

事件可能是用户点击某个东西、鼠标经过某个特定元素或按下键盘上的某些键。事件也可能是在网络浏览器中发生的事情，例如加载网页完成，或者用户滚动窗口或更改窗口大小。说白了，事件就是文档或浏览器中的特定交互时刻！

通过使用JavaScript，您可以监视特定事件的发生，并指定某些事件应该响应这些事件而发生。

二是事件流。

事件流描述事件在页面中被接受的顺序。浏览器开发初期，两大浏览器厂商IE和网景互相挤压，出现了一个令人怜惜的情况，那就是他们对事件流的解读呈现出两种截然相反的定义。也就是我们熟悉的：IE的事件冒泡和网景的事件捕捉。让我们拍张照，简单看一下结构：

1、事件泡沫。

事件冒泡是指事件最初由最特定的元素(文档中嵌套层次最深的节点)接收，然后逐步传播到最不特定的节点(文档)。以上图为例，即当你点击文本部分时，首先被文本处的元素接收，然后逐级扩散到窗口，即执行6-7-8-9-10的过程。

2.事件捕获。

事件捕获意味着事件首先由不太特定的节点接收，而最特定的节点最后接收事件。同样，在上面的模型中，当点击文本部分时，它首先被窗口接收，然后逐步扩散到文本元素，即执行1-2-3-4-5过程。

如何用代码表达？以后再给吧！

3.Javascript事件处理程序的三种方式。

当一个事件产生时，我们必须处理它。Javascript事件处理程序有三种主要方式：

1.HTML事件处理程序。

也就是说，我们直接在HTML代码中添加事件处理程序，比如下面的代码：

输入id='btn '值=' button '类型=' button ' onclick=' showmsg()；'脚本showmsg () {alert ('html添加事件处理')；}/script从上面的代码中，我们可以看到事件处理直接嵌套在元素中，这有一个缺陷：html代码和js之间的耦合性太强。如果有一天想在js中修改showmsg，不仅需要在js中修改，还需要在html中修改。我们可以接受一两个修改。然而，当您的代码达到10，000行的水平时，修改它将花费人力和金钱。因此，这样，我们不仅会修改它。

2.DOM0级事件处理程序。

若要将事件处理添加到指定的对象，请参见以下代码：

输入id='btn '值=' button '类型=' button '脚本var BTN=document . getelementbyid(' BTN ')；BTN . onclick=function(){ alert(' DOM级别添加事件处理')；} btn.onclick=null//如果要删除btn的点击事件，只需设置为空即可。/script从上面的代码中，我们可以看到，与html事件处理程序、DOM0级别的事件相比，HTML代码和js代码之间的耦合性已经大大降低。然而，聪明的程序员仍然不满足，并期望找到一种更简单的方法来处理它们。让我们看看第三种方法。

3.DOM2级事件处理程序。

DOM2还向特定对象添加事件处理程序，但主要涉及两种方法来处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件的名称、作为事件处理程序的函数以及一个布尔值(是否在捕获阶段处理事件)。请参见以下代码：

输入id='btn '值=' button '类型=' button '脚本var BTN=document . getelementbyid(' BTN ')；btn.addEventListener('click '，showmsg，false)；//在这里，我们将最后一个值设置为false，即在捕获阶段不进行处理。一般来说，冒泡处理兼容各种浏览器。函数showmsg(){ alert('DOM级别添加事件处理程序')；} BTN . removeeventlistener(' click '，showmsg，false)；//如果要删除这个事件，只需要传入相同的参数即可。/script在这里，我们可以看到在添加和删除事件时，最后一种方法更加直接和简单。但是，马提醒大家，删除事件时，传入的参数必须与之前的参数一致，否则删除无效！

第四，事件冒泡和事件捕捉的过程和区别。

说到这里，让我们给你一点代码来说明事件冒泡和事件捕获的过程，同时让你看到它们之间的区别：

！doctype html html lang=' en ' head meta charset=' UTF-' title document/title style # p { width : px；height:pxborder:px纯黑；} # c { width:pxheight:pxborder:px固体红色；} /style/headbody div id='p '我是www.mahaixiang.cn div id=' c '我喜欢www.mahaixiang.cn/div/div脚本var p=document . getelementbyid(' p ')；var c=document . getelementbyid(' c ')；C. addeventlistener ('click '，function () {alert('子节点捕获')}，true)；C. addeventlistener ('click '，function () {alert('子节点冒泡')}，false)；P. addeventlistener ('click '，function () {alert('父节点捕获')}，true)；P. addeventlistener ('click '，function () {alert('父节点冒泡')}，false)；/script/body/html运行上面的代码，当我们点击子元素的时候，我们会发现执行的顺序是：父节点抓取-子节点抓取-子节点冒泡-父节点冒泡。从这个例子中，大家都会明白，除此之外，DOM2级别的事件规定事件包括三个阶段：

1.事件捕获阶段；

2.在目标阶段；

3.事件的高潮阶段。

首先被捕获，然后处于目标阶段(即到达事件的发送位置)，最后冒泡。不科学的是没有DOM1级别的事件处理程序。请注意，不要开玩笑！

动词（verb的缩写）补充

1.ie事件处理程序还有两种方法：添加事件的attachEvent()和删除事件的disconnectevent()。这两个方法接收相同的两个参数：事件处理程序名称和事件处理程序函数。为什么这里没有布尔值？因为ie8和更早的版本只支持事件冒泡，最后一个参数默认相当于false！(支持IE事件处理程序的浏览器有IE和opera)。

2.事件对象用于记录事件发生时的一些相关信息，但事件对象只会在事件发生时生成，只能由事件处理程序内部访问。所有事件处理程序运行后，事件对象将被销毁！

以上是边肖介绍的JavaScript事件处理方法(三)。希望对大家有帮助！