事件冒泡、捕获？如何阻止

事件冒泡

    <style>div{color: white;font-size: 30px;}.content{width: 400px;height: 400px;background-color: blue;position: relative;}.wraper{width: 300px;height: 300px;background-color:yellowgreen;position: absolute;left: 400px;}.box{width: 200px;height: 200px;background-color: pink;position: absolute;left: 300px;}</style>
</head>
<body><div class="content">content<div class="wraper">wraper<div class="box">box</div></div></div>
</body>
<script>var box = document.getElementsByClassName("box")[0]var wraper = document.getElementsByClassName("wraper")[0]var content = document.getElementsByClassName("content")[0]box.addEventListener('click',function(e){console.log('box')},false)wraper.addEventListener('click',function(e){console.log('wraper')},false)content.addEventListener('click',function(e){console.log('content')},false)
</script>

点击box后触发了wraper，content绑定的点击事件。这种由子元素向祖先元素触发的事件处理模型叫做事件冒泡。

事件冒泡应用：事件委托

利用事件冒泡，和事件源对象(e[非IE事件对象].target或event[IE事件对象].srcElement)进行处理。

事件捕获

事件捕获只需要把监听事件的第三个参数，false改为true。

    box.addEventListener('click',function(e){console.log('box')},true)wraper.addEventListener('click',function(e){console.log('wraper')},true)content.addEventListener('click',function(e){console.log('content')},true)

发现控制台打印结果，反了过来，从祖先元素往子元素依次触发事件。IE不存在事件捕获。

事件冒泡和捕获优先级

    // 事件捕获box.addEventListener('click',function(e){console.log('box捕获')},true)wraper.addEventListener('click',function(e){console.log('wraper捕获')},true)content.addEventListener('click',function(e){console.log('content捕获')},true)// 事件冒泡box.addEventListener('click',function(e){console.log('box冒泡')},false)wraper.addEventListener('click',function(e){console.log('wraper冒泡')},false)content.addEventListener('click',function(e){console.log('content冒泡')},false)

由结果可知，先执行事件捕获，在执行事件冒泡。

阻止事件捕获，冒泡

使用e.stopPropagation()
IE使用event.cancelBubble = true（兼容所有IE）或 event.stopPropagation() （IE9以下不兼容）

    box.addEventListener('click',function(e){e.stopPropagation()console.log('box冒泡')},false)wraper.addEventListener('click',function(e){console.log('wraper冒泡')},false)content.addEventListener('click',function(e){console.log('content冒泡')},false)

阻止事件捕获和事件冒泡都可以使用这个事件对象的stopPropagation方法阻止。

事件冒泡、捕获？如何阻止相关推荐

jQuery中的事件冒泡捕获阻止冒泡
jQuery中的事件冒泡捕获阻止冒泡事件冒泡 IE中的事件流叫做事件冒泡,就是又最开始的时间接收到逐级向上传播较为不具体的节点.IE9.谷歌浏览器.Safari.Opera等等都是将事件一直冒泡到w ...
什么是事件冒泡？如何阻止事件冒泡？
什么是事件冒泡?如何阻止事件冒泡? 比如说在一个层层嵌套的HTML元素中,触发了最里面的那个HTML元素的某个事件,接下来会自里向外相继触发每一层HTML元素的相同事件,这就是事件冒泡.阻止事件冒泡可 ...
DOM-7 【兼容】事件处理函数、冒泡捕获、阻止冒泡默认事件
事件处理函数绑定事件 = 绑定事件的处理函数(事件本身是存在的,绑定的是相应的反馈) 事件 + 事件的反馈 = 前端交互 (前端核心) 绑定事件的方式 1. 句柄绑定默认(只能)是事件冒泡这种事件 ...
事件流--事件冒泡现象及阻止
事件冒泡现象 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
android 防止点击事件冒泡,移动端阻止事件冒泡需要注意！
移动端使用的js插件式zepto和touch,想要在一个大的区域做一个点击事件,但是里面小的区域也有自己的点击事件,就要阻止事件冒泡,但是使用了之后发现不好使,原因是:大的区域使用的事件是移动端的ta ...
vue 阻止事件冒泡和捕获
vue 阻止事件冒泡和捕获 @click.stop : 阻止事件冒泡 @click.prevent : 阻止事件默认行为 @click.self : 事件只作用在元素本身,而不是其子元素
vue 阻止事件冒泡，捕获方法
要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法 1. js 事件的三阶段捕获阶段目标阶段:执行当前对象的事件处理程序冒泡阶段 2. js 阻 ...
JavaScript 事件（冒泡捕获）处理模型
JavaScript 事件处理模型 (冒泡&捕获) 1.事件处理流程 DOM 结构: html --> body --> div(事件绑定对象) 2. 事件捕获阶段获取事件触发对 ...
如何阻止事件冒泡与默认事件？
[修真院小课堂]--如何阻止时间冒泡冒泡与默认事件目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 8.更多讨论 1.背景介绍 1.什么是事件? ...
JS 事件高级（包括DOM事件流，阻止事件冒泡，阻止事件默认行为，，，以及对我来说，很好用的事件代理）
事件对象概念事件处理函数:事件发生时调用的函数事件对象:window.event,内置的对象,事件发生的时候会将所有和事件相关的信息都存储在事件对象中,鼠标位置,事件类型,事件目标... //事件 ...

事件冒泡、捕获？如何阻止

事件冒泡

事件冒泡应用：事件委托

事件捕获

事件冒泡和捕获优先级

阻止事件捕获，冒泡

事件冒泡、捕获？如何阻止相关推荐

最新文章

热门文章