频道导航

DOM 事件流详解

2018-12-31 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了DOM 事件流详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1.冒泡型事件

浏览器的事件模型分两种：捕获型事件和冒泡型事件。由于ie不支持捕获型事件，所以以下主要以冒泡型事件作为讲解。（dubbed bubbling）冒泡型指事件安装最特定的事件到最不特定的事件逐一触发。

以上介绍的两者方法都十分便捷，在制作处理一些小功能时都被光大开发者所喜爱。但对于同一个事件。他们都只能添加一个函数，列如对于p标记的onclick函数，利用这两种方法都只能有一个函数，因此，ie有自己的解决办法，同事，标准的dom则规定了另外一种方法。

ii.IE中的监听方法早ie浏览器中，每个元素都有两个方法来处理时间的监听。分别是attachEvent()和detachEnevt()。从它们的函数名称就能看出来，attachEnevt()是用来给某个元素添加事件处理的函数，而detachEvent()则是用来删除元素上的监听函数。它们的语法如下：

[object].attachEvent("enevt_handler","fnHandler"); [object].detachEvent("enevt_handler","fnHandler"); 其中enevt_handler代表常用的onclick,onload,onmouSEOver等 fnHandler是监听函数的名称。上一节事件中可以使用attachEvent()方法替代添加监听函数，当单击了一下，可以使用detachEvent()删除监听函数，使其下次单击后再不执行。

代码如下:

添加监听函数

}

iii.添加多个监听事件（ie）

代码如下:

删除监听函数1 } var oP; window.onload = function(){ oP = document.getElementById("myP"); //找到对象 oP.attachEvent("onclick",fnClick1); //添加监听函数1 oP.attachEvent("onclick",fnClick2); //添加监听函数2 }

3.标准DOM事件监听

与ie的两个方法对于，标准DOM也使用两个方法分别添加和删除监听函数。即addEventListener()，和removeEventListener()

与ie不同，这两个函数接受3个参数，即事件的名称，要分配的函数名和是用于冒泡阶段还是捕获阶段。捕获阶段的参数为true，冒泡阶段参数为false.语法如下：

代码如下:

这两个函数的使用方法和ie基本类似，只不过要注意，event_name的名称是“click”，“mouSEOver”等，而不是Ie中的“onclick”，“onmouSEOver”。

另外第三个参数bCapture通常设置为false，冒泡阶段。

标准dom的事件监听方法：

代码如下:

function fnClick2() { alert("我被点击了2"); }

window.onload = function() { oP = document.getElementById("myP"); oP.addEventListener("click",false); oP.addEventListener("click",fnClick2,false); }

具体的执行顺序大家可测试。

以上就是本文的全部内容了，希望大家能够喜欢。