六十二、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><!-- 這里點擊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』
參考文章
- 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组件绑定原生事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 那份让我想死的化工原理补考试卷
- 下一篇： 电脑优盘直接拔掉会怎么样 直接拔掉电脑优