事件流--事件冒泡现象及阻止

事件冒泡现象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件冒泡现象</title><style>div{padding: 50px;}#div1{background: red;}#div2{background: blue;}#div3{background: yellow;}</style><script>window.onload = function(){var aDivs = document.getElementsByTagName('div');for(var i = 0; i < aDivs.length; i++){aDivs[i].onclick = function(){alert(this.id);}}}</script></head>
<body><div id="div1"><div id="div2"><div id="div3"></div></div></div>
</body>
</html>

浏览器效果

阻止事件流的方法：

阻止事件冒泡：

事件对象.cancelBubble=true; IE8一下阻止事件冒泡

事件对象。stopPropagation(); 其他浏览器阻止事件冒泡

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件冒泡阻止</title><style>div{padding: 50px;}#div1{background: red;}#div2{background: blue;}#div3{background: yellow;}</style><script>window.onload = function(){var aDivs = document.getElementsByTagName('div');for(var i = 0; i < aDivs.length; i++){aDivs[i].onclick = function(ev){var e = ev || window.event;alert(this.id);stopBubble(e);}}}/*阻止事件冒泡 *///e为事件对象function stopBubble(e){if(e.cancelBubble){e.cancelBubble = true;//ie8一下阻止方法}else{e.stopPropagation();//其他浏览器阻止方法
            }}/*---阻止事件冒泡---end*/</script></head>
<body><div id="div1"><div id="div2"><div id="div3"></div></div></div>
</body>
</html>

浏览器效果

总结

阻止事件流的固定写法

                /*事件冒泡的浏览器兼容写法*/function stopBubble(e){if(e.cancelBubble){e.cancelBubble = true;//IE8一下阻止事件冒泡}else{e.stopPropagation();//其它浏览器阻止事件冒泡
                    }}

转载于:https://www.cnblogs.com/taohuaya/p/9597529.html

事件流--事件冒泡现象及阻止相关推荐

JavaScript 详说事件流（冒泡、捕获、传播、委托）
事件流事件流描述的是从页面中接收事件的顺序. 标准DOM事件流存在三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 事件捕获:当触发事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元 ...
JS事件流(事件冒泡事件委托)
DOM事件流事件流描述的是从页面中接受事件的顺序事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流分为三个阶段: 捕获阶段(从上往下,从外往内) 目标阶段冒泡阶段(从下往 ...
事件模型、事件流（冒泡与捕获）、事件代理
本文原链接:https://www.cnblogs.com/hngdlxy143/p/9068282.html https://www.jb51.net/article/139997.htm 事件模型 ...
JavaScript事件流--事件冒泡、目标与事件捕获
1.事件冒泡微软提出了名为事件冒泡的事件流.事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面.也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象. 因 ...
js 事件流的事件冒泡和事件捕获与阻止事件传播
为了方便引入事件流的概念,我们先来说说什么是事件. 事件就是用户或浏览器自身执行的某种动作.换句话说,我们在浏览网页或者 APP 时,通常会在设备上产生很多交互性的操作,例如点击.选择.滚动屏幕.键盘 ...
JS7day(事件对象，事件流，事件捕获和冒泡，阻止事件流动，事件委托，学生信息表案例)
文章目录事件对象获取事件对象部分常用属性事件流事件捕获概念: 事件冒泡概念: 阻止事件流动: 相同的鼠标经过事件: 两种(监听事件)注册事件的区别: 传统on注册(L0) 事件监听注册(L2 ...
JS基础-事件模型(事件事件流自定义事件事件冒泡/代理)
文章目录一.事件与事件流二.事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.DOM3级事件处理方式三.事件对象四.事件绑定与解除 1.事件绑定 1.1对象.on事件名字 ...
13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...
事件注册方法、阻止默认事件、事件对象、事件冒泡:事件委托、事件捕获、重置表单
dom两种注册事件语法 1.点语法注册事件: 事件源.事件类型 = 事件处理函数特点:不能注册'同名事件', 否则会覆盖 2.addEventListener 事件源.addEventListene ...

事件流--事件冒泡现象及阻止

事件流--事件冒泡现象及阻止相关推荐

最新文章

热门文章