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则保留原来的
执行方式。