當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2024/10/8 vue 74 豆豆

生活随笔收集整理的這篇文章主要介紹了六十二、Js中的冒泡和捕获点击事件和Vue组件绑定原生事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

@Author：Runsen

@Date:2020/10/18

寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累，每天都要加油！！！

文章目錄

Js中的冒泡點擊事件
禁用事件冒泡機制
Js中事件捕獲
Vue組件綁定原生事件
- 子組件觸發自定義事件$emit
- 父組件的原生事件@click.native（快速）
后言

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><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><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组件绑定原生事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：那份让我想死的化工原理补考试卷
下一篇： html5倒计时秒杀怎么做,vue 设