js之事件冒泡和事件捕获

事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。
事件捕获（的过程）：则是从document开始，沿着文档树向下，直到事件目标为止。

关键一句：在IE浏览器中，只发生事件冒泡的过程；在W3C（或支持事件捕获的）浏览器中，先发生捕获的过程，再发生冒泡的过程。

想要添加一个由捕获过程触发的事件，只能这样了：
addEventListener('click',functionname,true);//该方法在IE下报错（对象不支持此属性或方法）

注：将第三个参数设置为true，表明该事件是为捕获过程设置的。如果第三个参数为false，则等同onclick =functionname;

[html] view plaincopy

<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function altin(){
alert("in");
}
function altmiddle(){
alert("middle");
}
function altout(){
alert("out")
}
window.onload=function() {
$('o').onclick = altout;
//$('m').onclick = altmiddle;
$('m').addEventListener('click',altmiddle,true);
$('i').onclick = altin;
}
</script>
</head>
<body>
<div id="o" style="width:400px;height:400px;border:1px solid #CCCCCC;">
<div id="m" style="width:200px;height:200px;border:1px solid #CCCCCC;">
<div id="i" style="width:100px;height:100px;border:1px solid #CCCCCC;">
</div>
</div>
</div>
</body>
</html>

以上代码执行效果如下：

1、$('m').onclick = altmiddle;

a）当点击#i时，显示顺序为in,middle,out

b）当点击#m时，显示顺序为middle,out

c）当点击#o时，显示顺序为out

2、$('m').addEventListener('click',altmiddle,true);

a）当点击#i时，显示顺序为middle,in,out

b）当点击#m时，显示顺序为middle,out

c）当点击#o时，显示顺序为out

3、$('m').addEventListener('click',altmiddle,false);

a）当点击#i时，显示顺序为in,middle,out

b）当点击#m时，显示顺序为middle,out

c）当点击#o时，显示顺序为out

把事件捕获和冒泡的过程统称为事件的传播
事件的传播是可以阻止的：
• 在W3C中，使用stopPropagation()方法
• 在IE下设置cancelBubble = true;

在捕获的过程中stopPropagation()后，后面的冒泡过程也不会发生了~

阻止事件的默认行为，例如click <a>后的跳转~
• 在W3C中，使用preventDefault()方法；
• 在IE下设置window.event.returnValue = false;

注：不是所有的事件都能冒泡，例如：blur、focus、load、unload，（这个是从别人的文章里摘过来的,我没测试）。

js之事件冒泡和事件捕获相关推荐

JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
彻底弄懂JS的事件冒泡和事件捕获
原文地址为: 彻底弄懂JS的事件冒泡和事件捕获在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题 ...
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获一.总结一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...
JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）
事件冒泡添加三个套在一起的div元素,在最里面放一个button,感受事件触发时从里到外"冒泡"的过程. 给每个div都加一个事件:点击时就alert test.html < ...
JS高级：事件冒泡和事件捕获；
1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做 ...
addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
js事件冒泡和事件委托
原文:js事件冒泡和事件委托 js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix&quo ...
事件冒泡 vs 事件捕获 vs 事件委托的区别
事件冒泡 vs 事件捕获 vs 事件委托本主要用于理解这JS的这三种事件的专业术语所表述的意义: 在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览 ...
简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序
JavaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 jav ...

js之事件冒泡和事件捕获

js之事件冒泡和事件捕获相关推荐

最新文章

热门文章