Js中的冒泡点击事件

记得刚学JS时讲的事件冒泡：“鱼在水中吐泡泡，是在鱼所在的深水区逐渐上升到水面”。就如这个例子一样，下面我总结一下我所理解的冒泡和捕获。

现在我都忘得一干二净。

<html>
<head><title>js事件冒泡测试</title>
</head>
<body onclick='alert("body")'><div id='content' onclick='alert("content")'><div id='div' onclick='alert("div");'><ul onclick='alert("ul");'><li onclick='alert("li");'>test</li></ul></div></div>
</body>
</html>

因此在事件冒泡的概念下在;li元素上发生click事件的顺序应该是li -> ul-> div -> content -> body

事件冒泡是自上而下的触发事件，也就是先执行我们触发的按钮所绑定的事件，执行完后，接着执行按钮父元素所绑定的事件。

禁用事件冒泡机制

解决方法是禁用事件冒泡机制。w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

<head><title>js事件冒泡测试</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body onclick='alert("body")'><div id='content' onclick='alert("content")'><div id='div' onclick='alert("div");'><ul onclick='alert("ul");'><li onclick='alert("li");'>test</li></ul></div></div><script>$("li").click(function (e) {// e.stopPropagation(); //ie e.cancelBubble = trueif(e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble = true;}});</script>
</body>

Js中事件捕获

Js提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

因此在事件捕获的概念下在p元素上发生click事件的顺序应该是document -> html -> body -> div -> p

后来 w3c 采用折中的方式，平息了战火，制定了统一的标准——先捕获再冒泡。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件捕获和冒泡</title><style type="text/css">#child{background: red;width:50px;height:50px;}#father{width:100px;height:100px;background:green;}#grandparent{width:150px;height:150px;background:black;margin:100px auto 0;}  </style>
</head>
<body><div id='grandparent'><div id='father'><div id='child'></div></div></div>
</body>
<script type="text/javascript">  var grandparent = document.getElementById("grandparent")var parent = document.getElementById("father")var child = document.getElementById('child')var html = document.getElementsByTagName("html")[0]var body = document.bodygrandparent.addEventListener("click",function () {console.log("I am capturing grandparent");},true);grandparent.addEventListener("click",function () {console.log("I am grandparent");},false);parent.addEventListener("click",function() {console.log("I am parent");},false);parent.addEventListener("click",function() {console.log("I am capturing parent");},true);child.addEventListener("click",function() {console.log("I am capturing child");},true);child.addEventListener("click",function() {console.log("I am child");},false);body.addEventListener("click",function() {console.log("I am body");},false);body.addEventListener("click",function() {console.log("I am capturing body");},true);html.addEventListener("click",function() {console.log("I am capturing html");},true);html.addEventListener("click",function() {console.log("I am html");},false);document.addEventListener("click",function() {console.log("I am capturing document");},true);document.addEventListener("click",function() {console.log("I am document");},false);window.addEventListener("click",function() {console.log("I am window");},false);window.addEventListener("click",function() {console.log("I am capturing window");},true);</script>
</html>

事件冒泡和事件捕获都是描述事件触发时序问题的术语，也就是事件流。（简单说就是描述在页面中点击一个按钮时，是先执行这个节点的事件还是先执行这个节点父节点的事件的顺序。）

Vue组件绑定原生事件

下面是Vue组件中内容，了解一下，给组件绑定原生事件是个什么样子

下面点击不会弹出HandleClick，具体代码如下

<body><!-- 这里点击child是不会弹出HandleClick，需要对template绑定原始事件 --><div id="app"><child @click="HandleClick"></child></div><script>Vue.component("child",{template:"<div>child</div>"})var vm = new Vue({el: "#app",methods: {HandleClick:function(){alert("HandleClick")}},})</script>
</body>

因为点击的是子组件，在子组件中没有绑定HandleClick事件。

子组件触发自定义事件$emit

对此解决的方法是自定义事件『子组件触发自定义事件$emit』，需要在template绑定点击事件

<body><div id="app"><child @click="HandleClick"></child></div><script>Vue.component("child",{// 需要在template绑定点击事件template:"<div @click='HandleChildClick'>child</div>",methods:{HandleChildClick:function(){alert('HandleChildClick')// 子组件触发自定义事件$emit  注意emit括号里是字符串this.$emit("click")}}})var vm = new Vue({el:"#app",methods: {HandleClick:function(){alert('HandleClick');}},})</script>
</body>

父组件的原生事件@click.native（快速）

但是对于上面的代码，使用子组件触发自定义事件$emit有些麻烦，因此还有一种做法就是
在原生事件『子组件的原生事件、父组件的原生事件@click.native』

<body><!-- 父组件的原生事件@click.native（快速）监听的不是自定义事件，而是原生事件 --><div id="app"><child @click.native="HandleClick"></child></div><script>Vue.component("child",{template:"<div>child</div>"})var vm = new Vue({el: "#app",methods: {HandleClick:function(){alert("HandleClick")}},})</script>
</body>

参考文章

https://mp.weixin.qq.com/s/ahPNIzPuZRAOsL6LxR6GwA
https://mp.weixin.qq.com/s/pp4OxkNRAY5PmpVJ1U-XOg
慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发

后言

据说，放张小姐姐照片可以提高阅读量，图是来源学校的2020级新生。

六十二、Js中的冒泡和捕获点击事件和Vue组件绑定原生事件相关推荐

【Microsoft Azure 的1024种玩法】六十二.利用Azure Private DNS 实现虚拟网络中域名的管理解析
[简介] Azure Private DNS是Azure为我们虚拟网络提供的安全可靠的DNS服务,我们无需自行配置DNS即可在虚拟网络中实现域名的解析及配置, 于此同时,我们在内网中也可以利用自己的自 ...
面渣逆袭：三万字，七十图，详解计算机网络六十二问（收藏版）
大家好,我是老三,开工大吉,虎年第一篇,面渣逆袭系列继续! 这次给大家带来了计算机网络六十二问,三万字,七十图详解,大概是全网最全的网络面试题. 建议大家收藏了慢慢看,新的一年一定能够跳槽加薪,虎年& ...
面渣逆袭：计算机网络六十二问，三万字图文详解！速收藏！
这次给大家带来了计算机网络六十二问,三万字,七十图详解,大概是全网最全的网络面试题. 基础 1.说下计算机网络体系结构计算机网络体系结构,一般有三种:OSI 七层模型.TCP/IP 四层模型.五层结 ...
JavaEE学习日志(六十二): jQuery遍历，jQuery事件，省市联动，左右互选
JavaEE学习日志持续更新----> 必看!JavaEE学习路线(文章总汇) JavaEE学习日志(六十二) jQuery jQuery遍历传统遍历 jQuery对象遍历 jQuery全局函 ...
linux i2c adapter 增加设备_「正点原子Linux连载」第六十二章Linux SPI驱动实验（一）...
1)实验平台:正点原子Linux开发板 2)摘自<正点原子I.MX6U嵌入式Linux驱动开发指南>关注官方微信号公众号,获取更多资料:正点原子第六十二章Linux SPI驱动实验上一 ...
JavaScript学习（六十二）—解析选项和序列化选项
JavaScript学习(六十二)-解析选项和序列化选项一.解析选项格式:JSON.parse(参数1,参数2); 参数说明参数1:表示要转换为JS对象的json字符串参数2:表示将json转 ...
信息系统项目管理师必背核心考点（六十二）项目组合治理主要过程
科科过为您带来软考信息系统项目管理师核心重点考点(六十二)项目组合治理的主要过程,内含思维导图+真题 [信息系统项目管理师核心考点]项目组合治理的主要过程 1.注定项目组合管理计划 2.定义项目组合 ...
【正点原子Linux连载】第六十二章 Linux SPI驱动实验 -摘自【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.0
1)实验平台:正点原子阿尔法Linux开发板 2)平台购买地址:https://item.taobao.com/item.htm?id=603672744434 2)全套实验源码+手册+视频下载地址: ...
第六十二章 SQL命令 OPEN
文章目录第六十二章 SQL命令 OPEN 大纲参数描述示例第六十二章 SQL命令 OPEN 打开游标. 大纲 OPEN cursor-name 参数 cursor-name - 游标的名称, ...

六十二、Js中的冒泡和捕获点击事件和Vue组件绑定原生事件

文章目录