事件处理机制详解-优快云博客

本文深入讲解了事件处理机制，包括事件流的概念、事件捕获与冒泡的区别，并介绍了不同浏览器的事件模型。此外，还详细解释了HTML事件处理程序、DOM0级与DOM2级事件处理、以及IE事件处理程序等不同事件绑定方式的特点与使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-family: Arial, Helvetica, sans-serif;"><style></span>

        .div1{width:200px;height:200px;background: lawngreen;}
    </style>

事件
事件是一种异步编程的实现方式，本质上是程序各个组成部分之间
的通信。就是文档或浏览器窗口中发生的一些特定的交互瞬间(某
种动作)
1.事件流：
事件流描述的是从页面中接收事件的顺序。
（1）事件冒泡

（2）事件捕获

注：因为老版本不支持事件捕获，所以很少人使用，这里建议大家
使用事件冒泡，再有特殊需求时在使用事件捕获

IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流
事件冒泡（沿着DOM树向上传播）：即事件最开始由最具体的元
素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最
不具体的节点(文档)
事件捕获（沿着DOM树向下传播）：不太具体的节点应该更早接
收到事件，而最具体的节点最后接收到事件

事件传播的最上层对象是window，接着依次是document，html
（document.documentElement）和body（document.dody）
。
也就是说，如果body元素中有一个div元素，点击该元素。
事件的传播顺序，
{
在捕获阶段依次为window、document、html、body、div；
在冒泡阶段依次为div、body、html、document、window
}

事件的传播(传播的三个阶段)：
当一个事件发生以后，它会在不同的DOM节点之间传播
（propagation）。这种传播分成三个阶段：
1、第一阶段：从window对象传导到目标节点，称为“捕获
阶段”（capture phase）
2、第二阶段：在目标节点上触发，称为“目标阶段”
（target phase）
3、第三阶段：从目标节点传导回window对象，称为“冒泡
阶段”（bubbling phase）

<div>
<p>Click Me</p>
</div>
1、捕获阶段：事件从div向p传播时，触发div的click事件；
2、目标阶段：事件从div到达p时，触发p的click事件；
3、目标阶段：事件离开p时，触发p的click事件；
4、冒泡阶段：事件从p传回div时，再次触发div的click事件

2.事件处理程序
（1）HTML事件处理程序
HTML语言允许在元素标签的属性中，直接定义某些事件的监听代
码。
<body onload="doSomething()">
<div onclick=“myClick()“>
注：通过HTML指定事件处理程序的最大缺点是，HTML与JS代码
紧密耦合，要更改一个是事件需要改变两处位置。所有很多人都摒
弃了这种方式

（2）DOM0级处理事件
Element节点有事件属性，可以定义监听函数。
div.onclick = function(event){
console.log('触发事件');
};
使用这个方法指定的监听函数，只会在冒泡阶段触发。
删除DOM0级事件的方法：div.onclick = null;

缺点：
同一个事件只能定义一个监听函数，也就是说，如果定义两次
onclick属性，后一次定义会覆盖前一次，不推荐使用，除非是为
了程序的兼容问题，因为所有浏览器都支持这种方法。

（3）DOM2级处理事件
通过Element节点、document节点、window对象的
addEventListener方法，也可以定义事件的监听函数。
target.addEventListener(type, listener, useCapture);
target:文档节点、document、window或XMLHttpRequest
type:字符串，事件名称，不含'on',比
如”click”,”mouseover”..
listener:实现监听回调函数
useCapture:定义冒泡或捕获：true-捕获事件，false-冒泡事件;一
般用false

移除DOM2级事件：
removeEventListener（type, listener, useCapture）
注：我们在使用的时候为了可以最大限度的兼容各种浏览器，最好
设置为冒泡，除非有特殊需求

优点：
1.代码分离原则
2.可以添加多个事件
缺点：
IE 6、7、8不支持这个事件

3.IE事件处理程序
IE实现了与DOM中类似的两个方法：attachEvent和detachEvent
。这两个方法接受相同的两个参数：事件处理程序名称和事件处理
程序函数。由于IE8及更早的版本只支持事件冒泡，所以通过这种
形式添加的事件都会被添加到冒泡阶段。
target.attachEvent(type,listener)
target:文档节点、document、window或XMLHttpRequest
type:字符串，事件名称；含'on'，如'onclick'、'onmouseover'
listener:实现监听回调函数

3.IE事件处理程序
var btn = document.getElementById(“mybtn”);
btn.attachEvent(“onclick”,function(){
alert(“click”);
})

注意：这里第一个参数是：onclick不是click
删除事件：btn.detachEvent(“onclick”,handler);
注：在IE11上。已经不存在这个方法，而是换成了
addEventListener

<div class="div1"></div>

<script>
    //DOM0监听事件  只能在冒泡阶段触发 、定义两次相同click会被覆盖
   var Div1=document.getElementsByClassName('div1').item(0);//[0]也可以
    Div1.onclick=function(){
        console.log("触发了DOM0监听事件")
    };
 //移除Dom0级事件
    Div1.onclick=null;


 //DOM2级事件 IE6/7/8不支持
Div1.addEventListener("click",abc,false);
  function  abc(){
        Div1 .style.backgroundColor='red';
    }
//移除Dom2级事件
    Div1. removeEventListener("click",abc,false);


//IE事件处理程序只<span style="color:#808080;">Ie 5/6/7/8/9/10支持</span>
    function ee(){
        Div1.style.backgroundColor = 'red';
    }
    Div1.attachEvent("click",ee);
</script>

综合兼容各浏览器

var mixEvent ={
        addEvent:function(Div1,type,listener){
            if((Div1.addEventListener){ //dom2级事件处理
                (Div1.addEventListener(type,listener,false);
            }else if((Div1.attachEvent){ // ie事件处理
                (Div1.attachEvent("on"+type,listener);
            }else{ // dom0ji事件处理
                (Div1["on"+type] = listener;  // element.onclick === element["onclick"]
            }
        },
        removeEvent:function((Div1,type,listener){
            if((Div1.removeEventListener){ //dom2级事件处理
                (Div1.removeEventListener(type,listener,false);
            }else if((Div1.detachEvent){ // ie事件处理
                (Div1.detachEvent("on"+type,listener);
            }else{ // dom0ji事件处理
                (Div1["on"+type] = null;  // element.onclick === element["onclick"]
            }
        }
    };

    function ff(){
        console.log("兼容之后");
    }
    sxtEvent.addEvent((Div1,"click",ff);
    sxtEvent.removeEvent((Div1,"click",ff);