js事件冒泡于事件捕获
事件冒泡
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。
事件冒泡是自下而上(从最深节点开始,向上传播事件)的触发事件
//例子
<div id="parent">
<div id="child" class="child"></div>
</div> <script>
var d_parent = document.getElementById("parent");
var d_child= document.getElementById("child"); d_parent.addEventListener("click",function(e){
alert("parent事件被触发,"+this.id);
})
d_child.addEventListener("click",function(e){
alert("child事件被触发,"+this.id)
})
<script> //结果:
//child事件被触发,child
//parent事件被触发,parent //结论:先child,然后parent。事件的触发顺序自内向外,这就是事件冒泡。
阻止冒泡
绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。默认false,即事件冒泡。true,事件捕获;false,事件冒泡。
<script>
var d_parent = document.getElementById("parent");
var d_child= document.getElementById("child");
d_parent.addEventListener("click",function(e){
alert("parent事件被触发,"+this.id);
},true)
d_child.addEventListener("click",function(e){
alert("child事件被触发,"+this.id)
},true)
<script> //结果:
//parent事件被触发,parent
//child事件被触发,child //结论:先parent,然后child。事件触发顺序变更为自外向内,这就是事件捕获。
事件捕获
当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。
事件冒泡
当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。
event.stopPropagation(); -- 阻止元素冒泡事件
也可以用开关实现,
js事件冒泡于事件捕获的更多相关文章
- JS事件(事件冒泡和事件捕获)
事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...
- js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...
- JS事件冒泡与事件捕获怎么理解?
在js中存在事件冒泡与事件捕获两种概念,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. 事件冒泡(dubbed bubbling) 事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定 ...
- JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- js 事件冒泡和事件捕获
事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西 事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的 例如: <!DOCTY ...
- 彻底弄懂JS的事件冒泡和事件捕获
先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ; 另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡: return false; ...
- js高级:event,事件冒泡,事件捕获
1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...
- JS高级:事件冒泡和事件捕获;
1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发 当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做 ...
- 彻底弄懂JS的事件冒泡和事件捕获(不推荐阅读)
由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...
- JS事件冒泡和事件捕获的详解
在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出 ...
随机推荐
- O - 推箱子 HDU - 1254(bfs_box + bfs_man)
O - 推箱子 HDU - 1254 推箱子是一个很经典的游戏.今天我们来玩一个简单版本.在一个M*N的房间里有一个箱子和一个搬运工,搬运工的工作就是把箱子推到指定的位置,注意,搬运工只能推箱子而不能 ...
- BFS、DFS ——J - Nightmare
J - Nightmare Ignatius had a nightmare last night. He found himself in a labyrinth with a time bomb ...
- nexus Maven私服的相关配置
Maven私服中如需本地上传Maven私服内容则需在 setting.xml中配置如下: <server> <id>nexus-releases</id> < ...
- PTA数据结构与算法题目集(中文) 7-31
PTA数据结构与算法题目集(中文) 7-31 7-31 笛卡尔树 (25 分) 笛卡尔树是一种特殊的二叉树,其结点包含两个关键字K1和K2.首先笛卡尔树是关于K1的二叉搜索树,即结点左子树的所有 ...
- Java学习笔记--Comparable & Comparator
一. Comparable<T>: Comparable是类内部的比较器,用于创建类的时候实现此接口,同时实现比较方法:对于不能修改源码的类则无法应用此方式进行比较排序等. 源码为: ...
- 鬼吹灯之龙岭迷窟百度云迅雷BT在线观看免费全集
看视频搜索微信公众号:qyw1091 还记得去年5月11日在高家堡举行的<鬼吹灯之龙岭迷窟>开机仪式吗?时隔数月,这部网剧于4月1日将在腾讯视频全网独播了! . <鬼吹灯之龙岭迷窟& ...
- java web数据库的增删改查详细
本次课上实验是完成数据库的增删改查. 包括增加用户信息.删除用户信息.多条件查找用户信息.修改用户信息(主要是复选框单选框等的相关操作.) 下面下看一下各个界面的样子. 总页面:显示全部页面:增加页面 ...
- Adb adb push (remote write failed: No space left on device)
修改完成程序后, mm 后, 准备要push 进到公司测试手机里面的.之前还真的没有遇到过这个问题,查了一下, 应该是手机没空间了的 sudo adb root sudo adb remount su ...
- linux升级python2.7到3.7.0
1.下载python3.7.0压缩包在 wget https://www.python.org/ftp/python/3.7.0/Python-3.7.0.tgz 2.解压缩 tar -zxvf Py ...
- JavaScript 入门 (一)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...