js--事件冒泡-捕获

时间：2023-03-08 19:21:41
js--事件冒泡-捕获

什么是事件流：

事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，

IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)。

第一种：事件冒泡

　　　IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

第二种：事件捕获

网景公司提出的事件流叫事件捕获流。

事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件

DOM事件流

"DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，

最后阶段是冒泡阶段。以上面的HTML页面为例，单击<div>元素将按照下图触发事件：

js--事件冒泡-捕获

<script type="text/javascript">
var div=document.getElementById("myDiv");
div.onclick=function(event){
alert("div");
};
document.body.addEventListener("click",function(event){
alert("event bubble");
},false);
document.body.addEventListener("click",function(event){
alert("event catch");
},true);

</script>

以上是DOM2级别 使用addEventListener添加事件

DOM0级事件处理程序

通过Javascript指定事件处理程序的传统方式，所有浏览器均支持。每个元素（包括window，document）都有自己的事件处理程序属性，

但是必须在DOM节点加载完之后才会有效。如下所示

<script type="text/javascript">

        var div = document.getElementById("myDiv");

        div.onclick = function(event) {

            alert(this.id);

        };

    </script>

删除通过DOM0级方法指定的事件处理程序：div.onclick=null;

补充：HTML事件处理程序、DOM0级事件处理程序和IE事件处理程序均以“on”开头，DOM2级事件处理程序不需要加“on”。

IE9，chrome，Firefox，Opera，Safari均实现了DOM2级事件处理程序，绑定事件方法addEventListener()接收三个参数：
事件名称，事件处理函数和一个布尔值。布尔值为true，
则表示在捕获阶段调用事件处理程序；如果为false，则表示在冒泡阶段调用事件处理程序。
addEventListener允许在同一个元素上添加多个事件处理程序

IE事件处理程序

IE8和IE8以下的版本不支持addEventListener()，而是采用attachEvent()来实现事件绑定。

目前只有IE和Opera支持attachEvent()。IE9支持addEventListener()，同时也兼容IE8的attachEvent()方法，但是IE9和IE8对attachEvent()的实现有点不同。

总结：attachEvent()采用冒泡方式，而addEventListener()可以采用冒泡或事件捕获方式。

 

相关文章