javascript 事件的一点感悟

时间:2023-03-10 07:16:05
javascript 事件的一点感悟

javascript 冒泡事件的理解一般是这样的:

比方页面上有一个BODY里面包含一个DIV,DIV中包含一个BUTTON。在BODY,DIV,BUTTON中都有一个ONCLICK事件,在BUTTON中又有一个ONCLICK事件。那么我单击BUTTON时会先执行BUTTON中的事件

然后再执行DIV 的事件再执行BODY中的事件.这就是JAVASCRIPT的事件冒泡了。JQUERY好像就只支持这种事件的冒泡。

但如果我想先执行BODY中的单击事件再执行BUTTON中的单击事件,应该怎么办呢?

以下是我的事件监听代码:

<html>
<head>
<title></title>
</head> <body id='bodye'>
<input type="button" value="test" id="test" />
</body>
<script type="text/javascript">
function bodyEvent(){
alert('body');
}
function buttonEvent(){
alert('button');
}
document.body.onclick=bodyEvent;
document.getElementById("test").onclick=buttonEvent;
//按以上的写法,会先弹出BUTTON,再弹出BODY </script>
</html>
document.body.addEventListener("click", function(){
alert(this.id);
}, false);
document.getElementById("test").addEventListener("click",function(){
alert(this.id);
},true);
document.getElementById("div").addEventListener("click",function(){
alert(this.id);
},true);

这里我强行的添加一个事件的监听,注意true与false这个参数,就可以打破原来的事件冒泡流了。TRUE则先执行外层的事件,如果是FALSE则保留原来的
执行方式。