javascript 事件模型-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_13008/article/details/82099612

本文深入探讨了JavaScript事件处理机制，包括事件冒泡与捕获模型的区别，并详细介绍了不同浏览器中的事件处理方式，如IE的attachEvent和现代浏览器的addEventListener方法。此外还讨论了如何正确使用removeEventListener来移除事件监听器。

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

js 事件在大多数浏览器中都遵循冒泡模型。
冒泡模型可以用一个简单的例子解释：
比如你画了一个同心圆，手指点击某个圆圈内部，那么事件会从这个圆圈逐个传播到包含这个圆圈的外部圆圈。这又让我想起了像平静的湖面扔一块小石头，湖面荡起一圈一圈的涟漪。

不过在Netscape浏览器中却是相反的。

Dom事件模型包括两方面
捕获过程和冒泡过程。
IE不支持。

Dom 0 level 事件处理


var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
alert(this.id); //”myBtn”
};
//用完以后
btn.onclick = null; //remove event handler

Dom 2 level 事件处理


var btn = document.getElementById(“myBtn”);
//false表示在冒泡阶段，true表示在捕获阶段
btn.addEventListener(“click”, function(){
alert(this.id);
}, false);

Dom2 Level可以添加多个同样事件到一个DOM对象上


var btn = document.getElementById(“myBtn”);
btn.addEventListener(“click”, function(){
alert(this.id);
}, false);
btn.addEventListener(“click”, function(){
alert(“Hello world!”);
}, false);

执行时按定义时的顺序。


var btn = document.getElementById(“myBtn”);
btn.addEventListener(“click”, function(){
alert(this.id);
}, false);
//other code here
btn.removeEventListener(“click”, function(){ //won ’ t work!
alert(this.id);
}, false);

匿名函数不能被移除。


var btn = document.getElementById(“myBtn”);
var handler = function(){
alert(this.id);
};
btn.addEventListener(“click”, handler, false);
//other code here
btn.removeEventListener(“click”, handler, false); //works!

DOM Level 2 在 Firefox, Safari, Chrome, and Opera等浏览器得到支持。
IE呢有自己的独特的方法：
attachEvent() detachEvent()


var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){
alert(“Clicked”);
});
/*IE DOM0LEVEL 事件处理里的this值该DOM对象，而在DOM2level this值指window对象。*/
var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){
alert(this === window); //true
});


var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){
alert(“Clicked”);
});
btn.attachEvent(“onclick”, function(){
alert(“Hello world!”);
});

当添加多个handler到一个dom对象时，执行顺序和他们定义的顺序相反。

preventDefault() 取消事件，前提是event的cancelable必须设为true
stopPropagation()停止冒泡。