js event 冒泡和捕获事件详细介绍【转】
冒泡和捕获
- 冒泡: 事件从内向外,从下向上执行 (默认行为)
- 捕获: 事件从外向内,从上向下执行
vue之capture 捕获事件
capture.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>capture</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<style type="text/css">
div {
width: 400px;
} .pinkBorder {
border: 1px solid;
border-color: blue;
}
</style>
</head> <body>
<!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
但因为id1,id2配置了.capture, 所以id1,id2这两个变成了捕获事件, 优先触发,
于是先执行id1,id2捕获, 再执行id4,id3冒泡, 最终按序弹出id1,id2,id4,id3 -->
<div id="app">
<div id="id1" class='pinkBorder' v-on:click.capture="doit">
id1
<div id="id2" class='pinkBorder' v-on:click.capture="doit">
id2
<div id="id3" class='pinkBorder' v-on:click="doit">
id3
<div id="id4" class='pinkBorder' v-on:click="doit">
id4(点我最终按序弹出id1,id2,id4,id3)
</div>
</div>
</div>
</div> </div> </body>
<script> var app = new Vue({
el: "#app",
data: {
id: ''
},
methods: {
doit: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
}) // vm.greet();
</script> </html>
vue之self 自我事件
self.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>self</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<style type="text/css">
div {
width: 400px;
} .pinkBorder {
border: 1px solid;
border-color: green;
}
</style>
</head> <body> <!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
但因为id2配置了.self,检测到不是自身,所以冒泡过程会跳过id2,最终按序弹出id4,id3,id1 -->
<div id="content">
<div id="id1" class='pinkBorder' v-on:click="doit">
id1
<div id="id2" class='pinkBorder' v-on:click.self="doit">
id2
<div id="id3" class='pinkBorder' v-on:click="doit">
id3
<div id="id4" class='pinkBorder' v-on:click="doit">
id4(点我按序弹出id4,id3,id1) </div>
</div>
</div>
</div>
</div> </body>
<script> var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doit: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
}) // vm.greet();
</script> </html>
vue之stop 阻止事件
self.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>stop</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<style type="text/css">
div {
width: 400px;
} .pinkBorder {
border: 1px solid;
border-color: green;
}
</style>
</head> <body>
<!-- https://cn.vuejs.org/v2/guide/events.html#事件修饰符 -->
<!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
但因为id2配置了.stop,所以冒泡事件在id2之后终止,最终按序弹出id4,id3,id2 -->
<div id="content">
<div id="id1" class='pinkBorder' v-on:click="doit">
id1
<div id="id2" class='pinkBorder' v-on:click.stop="doit">
id2 (v-on:click.stop)
<div id="id3" class='pinkBorder' v-on:click="doit">
id3
<div id="id4" class='pinkBorder' v-on:click="doit">
id4(点我按序弹出id4,id3,id2 )
</div>
</div>
</div>
</div>
</div> </body>
<script> var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doit: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
}) // vm.greet();
</script> </html>
参考
js之事件冒泡和事件捕获详细介绍==>https://www.jb51.net/article/42492.htm
js event 冒泡和捕获事件详细介绍【转】的更多相关文章
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- js阻止冒泡和默认事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js时间冒泡，阻止事件冒泡
首先解释一下事件冒泡神什么, 在js中,假如在div中嵌套一个div 如 <style type="text/css"> #box1{width:500px;heigh ...
- js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- javaScript系列：js中获取时间new Date()详细介绍
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)m ...
- 电子表格控件Spreadsheet 对象方法事件详细介绍
1.ActiveCell:返回代表活动单元格的Range只读对象.2.ActiveSheet:返回代表活动工作表的WorkSheet只读对象.3.ActiveWindow:返回表示当前窗口的Windo ...
- js中获取时间new Date()详细介绍
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)m ...
- js 获取时间 new Date()详细介绍
javaScript系列:js中获取时间new Date()详细介绍 (2012-03-31 09:54:25) 转载▼ 标签: js时间 new date() 字符类型 转换 分类: study-j ...
随机推荐
- [2017BUAA软件工程]第0次博客作业
[2017BUAA软件工程]第0次博客作业 结缘计算机 你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢? 计算机是你喜欢的领域吗?是你擅长的领域吗? 我当时报考高考志愿的时候就已经是想好报 ...
- Hot code replace (HCR)
https://wiki.eclipse.org/FAQ_What_is_hot_code_replace%3F https://zhidao.baidu.com/question/195505558 ...
- k8s master 节点加入到可以调配node节点中的命令
kubectl taint nodes --all node-role.kubernetes.io/master- 应该就可以了 效果再观察 效果为
- [读书笔记]SQLSERVER企业级平台管理实践读书笔记01
1. SQLSERVER信息收集 SQLDIAG 使用界面 C:\Users\Administrator>sqldiag2018/01/02 08:13:26.10 SQLDIAG Collec ...
- Jquery 组 checkbox双向控制与tr变色
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- RSS & Server-Sent Events & HTML5 Notification API
RSS Rich Site Summary https://en.wikipedia.org/wiki/RSS https://www.lifewire.com/what-is-rss-2483592 ...
- SQL ROUND函数的使用
SQL ROUND函数的使用 SQL ROUND函数是对数据进行制定精度的取值. 第一个参数是取值的数据,第二个参数是精度,第三个参数是数据取值模式(四舍五入还是截断),其中第三个参数是可选参数, ...
- python系列-2 正则表达式资料
- 类加载过程&对象的创建过程
类加载过程 1.JVM发现要使用一个类,首先要到方法区中找:如果找到了,就直接使用,如果没有找到,才会去找这个类的class文件,然后加载: (在找class文件时,是根据classpath配置的地址 ...
- 今天一天课，随便写点吧/xk
知道的越多,不知道的也就越多. 最近想学很多很多东西,但是发现没有一个计划,也没有那么多时间精力,都是想到哪学到哪,有的就是学了一半就放下了,又去学新的,感觉需要规划一下学习路线,时间什么的 推荐一个 ...