事件冒泡(event bubbling)和事件捕获(event capturing)

事件冒泡时，触发click事件：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>Bubble Test</title>
 6 </head>
 7 <body>
 8     <div id="myDiv">Div</div>
 9 </body>
10 <script>
11     window.addEventListener(‘click‘, function () {
12         alert(‘window‘);
13     },false);
14     document.addEventListener(‘click‘, function () {
15         alert(‘document‘);
16     },false);
17     document.childNodes[1].addEventListener(‘click‘, function () {
18         alert(‘html‘);
19     },false);
20     document.body.addEventListener(‘click‘, function () {
21         alert(‘body‘);
22     },false);
23     document.getElementById(‘myDiv‘).addEventListener(‘click‘, function () {
24         alert(‘myDiv‘);
25     },false);
26 </script>
27 </html>

事件捕获时，触发click事件：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>Bubble Test</title>
 6 </head>
 7 <body>
 8     <div id="myDiv">Div</div>
 9 </body>
10 <script>
11     window.addEventListener(‘click‘, function () {
12         alert(‘window‘);
13     },true);
14     document.addEventListener(‘click‘, function () {
15         alert(‘document‘);
16     },true);
17     document.childNodes[1].addEventListener(‘click‘, function () {
18         alert(‘html‘);
19     },true);
20     document.body.addEventListener(‘click‘, function () {
21         alert(‘body‘);
22     },true);
23     document.getElementById(‘myDiv‘).addEventListener(‘click‘, function () {
24         alert(‘myDiv‘);
25     },true);
26 </script>
27 </html>

时间： 2024-08-10 02:10:22

事件冒泡(event bubbling)和事件捕获(event capturing)的相关文章

JS 事件冒泡整理浏览器的事件流

JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕获阶段.处于目标阶段.事件冒泡阶段. 1.事件捕获事件捕获,是从document元素开始,越高级的父级元素越早接收到事件,因此这是一个从上而下的过程. A): 坑一:新插入的子元素没有绑定点击事件一个ul元素中初始的状态有4个li元素,我们可以循环给li元素添加click事件,执行我们想要的动作

这可能是最简明扼要的 js事件冒泡机制+阻止默认事件讲解了

哎 js事件冒泡机制和阻止冒泡阻止默认行为好像永远也整不清楚,记了忘忘了记...醉了这篇文章写完以后下次再忘记就呼自己一巴掌,忘一次一巴掌首先要明白两个概念--事件和事件流事件指的是用户或浏览器自身执行的某种动作,又称为原始事件模型,例如onclick等事件流指的是从页面中接收事件的顺序,也就是说当一个事件产生时,这个事件的传播过程就叫做事件流. 事件冒泡: 从事件目标开始一级级向上冒泡,到document为止--从里到外 IE 5:div--body--document; I

阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, 2.event.preventDefault()方法这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素: 3.return false : 这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件:写上此代

JS 之阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开. 二.event.preventDefault() 阻止默认事件的方法,调用此方法时,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素: 三.return false: 这个方法比较暴力,会同时阻止事件冒泡也会阻止默认事件:写上此代码,连接不会被

JS事件——禁止事件冒泡和禁止默认事件

Event 对象Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,即事件由子元素向祖先元素传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达

JS如果阻止事件冒泡和浏览器默认事件

原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下JavaScript阻止默认事件与JavaScript阻止事件冒泡示例. (1)阻止冒泡事件注:嵌套元素一般都存在冒泡事件,会带来某些影响最外层标签:outer,中间层标签:center,最内层标签:inner,并且在outer.center.inner都添加了alert弹框事件,在正常思维情况下

关于什么是事件冒泡和如何取消事件冒泡的讨论！

在学习jQuery的过程中我们肯定会碰到这样一个问题,那就是事件冒泡,那么,何为事件冒泡呢? 事件冒泡通俗点讲就是,当你的子元素和父元素注册了同一个事件的时候,当你激活子元素的时候,父元素也会跟着被激活, 显然,这并不是我们所需要的结果!所以我们就要想办法取消事件冒泡具体实例如下 <body> <div id="mybigdiv"> 我是大div <div id="myid">我是小div</div> </di

jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件冒泡与阻止冒泡</title> <script src="js/jquery.min.js" type="text/javascript"></script></head><b

javascript 停止事件冒泡以及阻止默认事件冒泡

停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // 因此它支持W3C的stopPropagation()方法 e.stopPropagation(); } else { // 否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 阻止事件冒泡 function stopDefault( e ) {