js 事件在大多数浏览器中都遵循冒泡模型。
冒泡模型可以用一个简单的例子解释:
比如你画了一个同心圆,手指点击某个圆圈内部,那么事件会从这个圆圈逐个传播到包含这个圆圈的外部圆圈。这又让我想起了像平静的湖面扔一块小石头,湖面荡起一圈一圈的涟漪。
不过在Netscape浏览器中却是相反的。
Dom事件模型包括两方面
捕获过程和冒泡过程。
IE不支持。
Dom 0 level 事件处理
Dom 2 level 事件处理
Dom2 Level可以添加多个同样事件到一个DOM对象上
执行时按定义时的顺序。
匿名函数不能被移除。
DOM Level 2 在 Firefox, Safari, Chrome, and Opera等浏览器得到支持。
IE呢有自己的独特的方法:
attachEvent() detachEvent()
当添加多个handler到一个dom对象时,执行顺序和他们定义的顺序相反。
preventDefault() 取消事件,前提是event的cancelable必须设为true
stopPropagation()停止冒泡。
冒泡模型可以用一个简单的例子解释:
比如你画了一个同心圆,手指点击某个圆圈内部,那么事件会从这个圆圈逐个传播到包含这个圆圈的外部圆圈。这又让我想起了像平静的湖面扔一块小石头,湖面荡起一圈一圈的涟漪。
不过在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()停止冒泡。