javascript的事件机制

一、事件模型

IE 和 标准DOM的事件模型

IE系：冒泡方式

NETSCAPE系：捕获方式

标准DOM：先捕获再冒泡

冒泡，从触发点向外层、顶层扩散，最后到达document、window，遇到相同注册事件立即触发执行；

捕获则相反，从window、document向里收缩，一直到触发点，遇到相同注册事件立即触发执行；

有代码如下：

<style type="text/css">
div {
border: solid 1px red;
}
#s1 {
padding: 10px;
border-color: blue;
}
</style>

<div id="s1">s1
<div id="s2">s2</div>
</div>

<script type="text/javascript">
if(document.attachEvent){//IE浏览器
document.getElementById("s1").attachEvent("onclick",function(e){
alert("s1冒泡模式");
});
document.getElementById("s2").attachEvent("onclick",function(e){
alert("s2冒泡模式");
});
}
else{
s1.addEventListener("click", function() {
alert("s1捕获模式");
}, true);
s2.addEventListener("click", function() {
alert("s2捕获模式");
}, true);
s1.addEventListener("click", function() {
alert("s1冒泡模式");
}, false);
s2.addEventListener("click", function() {
alert("s2冒泡模式");
}, false);
}
</script>

页面如下：



在非IE浏览器里，点击里层的s2，依次提示如下，清晰地体现了先捕获、后冒泡的特点：

s1捕获模式
s2捕获模式
s2冒泡模式
s1冒泡模式

如果是IE浏览器，则依次提示

s2冒泡模式
s1冒泡模式

二、事件注册

类似这样，

标准DOM

s1.addEventListener("click", function() {
alert("捕获模式");
}, true);
s1.addEventListener("click", function() {
alert("冒泡模式");
}, false);

IE

document.getElementById("s1").attachEvent("onclick",function(e){
alert("IE下注册事件");
});

三、阻断事件

标准DOM下：



IE下：



有代码如下：

<style type="text/css">
div {
border: solid 1px red;
}
#s1 {
padding: 10px;
border-color: blue;
}
</style>

<form id="f1">
<div id="s1">s1
<div id="s2">s2</div>
<div><input type="submit" id="b1" value="submit" /></div>
</div>
</form>

<script type="text/javascript">
if(document.attachEvent){//IE浏览器
document.getElementById("s1").attachEvent("onclick",function(e){
alert("s1事件");
});
document.getElementById("s2").attachEvent("onclick",function(e){
alert("s2事件");
});
document.getElementById("b1").attachEvent("onclick",function(e){
alert("b1点击事件1");
window.event.cancelBubble = true;//使s1事件无效；b1点击事件2不受影响，仍然执行（S2事件则与本次点击无关，始终不会被触发）
window.event.returnValue = false;//使f1提交事件无效
});
document.getElementById("b1").attachEvent("onclick",function(e){
alert("b1点击事件2");
});
document.getElementById("f1").attachEvent("onsubmit",function(e){
alert("提交...");
});
}
else{
s1.addEventListener("click", function() {
alert("s1事件");
}, false);
s2.addEventListener("click", function() {
alert("s2事件");
}, false);
b1.addEventListener("click", function(evt) {
alert("b1点击事件1");
evt.stopPropagation();//使s1事件无效；b1点击事件2不受影响，仍然执行（S2事件则与本次点击无关，始终不会被触发）
evt.stopImmediatePropagation();//使b1点击事件2，s1事件无效；
evt.preventDefault();//使f1提交事件无效
}, false);
b1.addEventListener("click", function(evt) {
alert("b1点击事件2");
}, false);
f1.addEventListener("submit", function() {
alert("提交...");
}, false);
}
</script>

参考资料：

[解惑]JavaScript事件机制