当前位置：尊龙游戏旗舰厅官网 > 前端技术 > vue >内容正文

vue

六十二、js中的冒泡和捕获点击事件和vue组件绑定原生事件 -尊龙游戏旗舰厅官网

发布时间：2024/10/8 vue 27 豆豆

尊龙游戏旗舰厅官网收集整理的这篇文章主要介绍了六十二、js中的冒泡和捕获点击事件和vue组件绑定原生事件小编觉得挺不错的,现在分享给大家,帮大家做个参考.

2020/10/18 、周日、今天又是奋斗的一天。

@author：runsen

@date:2020/10/18

写在前面：我是「runsen」，热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端，需要每天的日积月累，每天都要加油！！！

文章目录

js中的冒泡点击事件
禁用事件冒泡机制
js中事件捕获
vue组件绑定原生事件
- 子组件触发自定义事件$emit
- 父组件的原生事件@click.native（快速）
后言

记得刚学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");'>testli>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");'>testli>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提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

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

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

<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组件中内容，了解一下，给组件绑定原生事件是个什么样子

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

<body><div id="app"><child @click="handleclick"></child></div><script>vue.component("child",{template:"

child

"})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:"

child

",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><div id="app"><child @click.native="handleclick"></child></div><script>vue.component("child",{template:"

child

"})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组件绑定原生事件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。