vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件傳遞 ----冒泡和捕獲
DOM事件標準定義了兩種事件流，這兩種事件流分別是捕獲和冒泡。
和許多Web技 術一樣，在它們成為標準之前，Netscape和微軟各自不同地實現了它們。Netscape選擇實現了捕獲事件流，微軟則實現了冒泡事件流。幸運的 是，W3C決定組合使用這兩種方法,并且大多數新瀏覽器都遵循這兩種事件流方式。
默認情況下，事件使用冒泡事件流，不使用捕獲事件流。然而，在Firefox和Safari里，你可以顯式的指定使用捕獲事件流，方法是在注冊事件時傳入useCapture參數，將這個參數設為true。
?
冒泡事件流：
在冒泡過程中的任何時候都可以終止事件的冒泡，在遵從W3C標準的瀏覽器里可以通 過調用事件對象上的stopPropagation()方法，在Internet Explorer里可以通過設置事件對象的cancelBubble屬性為true。如果不停止事件的傳播，事件將一直通過DOM冒泡直至到達文檔根。即從被點擊的元素到此元素的祖先元素直至根元素，從下到上。
?
捕獲事件流：
事件的處理將從DOM層次的根開始，而不是從觸發事件的目標元素開始，事件被從目標元素的所有祖先元素依次往下傳遞。在這個過程中，事件會被從文檔 根到事件目標元素之間各個繼承派生的元素所捕獲，如果事件監聽器在被注冊時設置了useCapture屬性為true,那么它們可以被分派給這期間的任何 元素以對事件做出處理；否則，事件會被接著傳遞給派生元素路徑上的下一元素，直至目標元素。事件到達目標元素后，它會接著通過DOM節點再進行冒泡。即根元素到被點擊的元素，從上到下。
?
事件代理（委托）
說明：事件委托就是事件目標自身不處理事件，而是把處理任務委托給其父元素或者祖先元素，甚至根元素（document）。
原理：事件委托是利用事件的冒泡原理來實現的 。事件監聽器會分析從子元素冒泡上來的事件，找到是哪個子元素的事件。
使用原因：
?
如下demo 01，列表在給新增或刪除的列表項時，綁定或刪除相應事件監聽的工作枯燥并繁雜，而使用事件委托，將監聽器安裝在列表項的父元素上后，當子元素的事件冒泡到父ul元素時，只需要檢查事件對象的target屬性，捕獲真正被點擊的節點元素的引用。
<!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>測試</title> </head> <body><div><ul id="parent-list"><li id="post-1">Item 1</li><li id="post-2">Item 2</li><li id="post-3">Item 3</li><li id="post-4">Item 4</li><li id="post-5">Item 5</li><li id="post-6">Item 6</li></ul></div><script>//找到父元素，添加監聽器。。。document.getElementById('parent-list').addEventListener('click', function (e) {//e.target是被點擊的元素//如果被點擊的是li元素if(e.target && e.target.nodeName =="LI") { //注意這里的nodeName標簽名要用大寫e.target.style.color="red"; //執行操作，，，console.log('List item', e.target.id, "was clicked");}})</script></body> </html>?
demo02 當需要給所有的a標簽綁定click事件時使用事件委托，而部分a標簽又包含圖片img、span元素，用戶希望點擊span或img標簽也能觸發相應的click事件。這時就需要：從觸發click事件的元素開始，逐級向上查找，直到找到a標簽為止。代碼如下
document.addEventListener("click", function(e) {var node = e.target;while (node.parentNode.nodeName != "BODY") {if (node.nodeName == "A") {console.log("a");break;}node = node.parentNode;} }, false);?
?
?
JQuery中的事件委托
?? jQuery中的事件委托方式比較豐富，如下
1、用on方法,代碼如下：
$(function(){$("#lists").on("click","li",function(event){var target = $(event.target);target.css("background-color","red");}) })?
2.用delegate（）方法，代碼如下：
$(function(){$("#lists").delegate("li","click",function(event){var target = $(event.target);target.css("background-color","red");}) })?
on()方法和delegate（）方法對于事件委托的寫法很像。并且執行事件委托的時候只有子元素（本文中的li）會觸發事件，而代為執行的父元素（本文中為ul）不會觸發事件，所以我們不需要盤判斷觸發事件的元素節點名，這一點明顯優于原生的JavaScript。
?
3.用bind()方法，代碼如下：
$(function(){$("#lists").bind("click","li",function(event){var target = $(event.target);if(target.prop("nodeName")=="LI"){target.css("background-color","red");}}) })bind()方法同原生的JavaScript實現方法一樣，當父元素代子元素執行事件時，父元素也會觸發事件，所以我們需要判斷一下觸發事件的元素名。此外，用bind()方法給元素綁定事件的時候要注意，它只能給已經存在DOM元素添加事件，不能給未來存在DOM
元素添加添加事件。如果要頻繁地添加DOM元素，并且給新添加的DOM元素綁定事件的話，用live(),delegate(),on()等方法。鑒于jQuery從1.7之后就不推薦live（）和delegate（）方法了，所以大家還是使用on（）方法吧。
?
?
?
?
vue中使用$event：
vue中直接套用上述代碼會報錯（無法找到target），使用$event 傳入到vue組件方法中，如下
<template><div class="page"><div><ul id="parent-list" @click="checkClick($event)"><li id="post-1">Item 1</li><li id="post-2">Item 2</li></ul></div></div> </template><script>export default {name: 'Login',methods: {checkClick:function(e){if(e.target && e.target.nodeName == 'LI') {//執行操作，，，console.log('List item', e.target.id, "was clicked")}}}} </script>?
vue中使用$event 獲取當前元素、父子兄弟元素
<tempalte><button @click = “getEvent($event)”>點擊</button> </template><script>export default {methods:{getEvent(e) {console.log(e)// e.target 是你當前點擊的元素// e.currentTarget 是你綁定事件的元素#獲得點擊元素的前一個元素e.currentTarget.previousElementSibling.innerHTML#獲得點擊元素的第一個子元素e.currentTarget.firstElementChild# 獲得點擊元素的下一個元素e.currentTarget.nextElementSibling# 獲得點擊元素中id為string的元素e.currentTarget.getElementById("string")# 獲得點擊元素的string屬性e.currentTarget.getAttributeNode('string')# 獲得點擊元素的父級元素e.currentTarget.parentElement# 獲得點擊元素的前一個元素的第一個子元素的HTML值e.currentTarget.previousElementSibling.firstElementChild.innerHTML},}} </script>
?
?
vue事件處理
如果需要在內聯語句處理器中訪問原生DOM事件。可以使用特殊變量$event，把它傳入到methods中的方法中。
? ? ?在Vue中，事件修飾符處理了許多DOM事件的細節，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理。在Vue中事件修飾符主要有：
- .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
- .prevent：等同于JavaScript中的event.preventDefault()，防止執行預設的行為（比如阻止a鏈默認跳轉和form表單提交，注意：如果事件可取消，則取消該事件，而不阻止事件的進一步傳播）
- .capture：與事件冒泡的方向相反，事件捕獲由外到內
- .self：只當事件在該元素本身（而不是子元素）觸發時觸發回調
- .once：只會觸發一次
?
<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a><!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a><!-- 只有修飾符 --> <form v-on:submit.prevent></form><!-- 添加事件偵聽器時使用事件捕獲模式 --> <div v-on:click.capture="doThis">...</div><!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 --> <div v-on:click.self="doThat">...</div>?
?
.stop 阻止事件冒泡
冒泡事件：嵌套兩三層父子關系，然后所有都有點擊事件，點擊子節點，就會觸發從內至外 ?子節點-》父節點的點擊事件，如下
<div class="testPage"> <div class="outeer" @click="outer"> <div class="middle" @click="middle"> <button @click="inner">點擊我(^_^)</button></div></div> <p>{{ message }}</p> </div> <script>export default {name: 'Login',data(){return {message:'測試冒泡事件',}},methods: {inner: function () {this.message = 'inner： 這是最里面的Button';console.log(this.message);},middle: function () {this.message = 'middle: 這是中間的Div';console.log(this.message);},outer: function () {this.message = 'outer: 這是外面的Div';console.log(this.message);}}} </script>?
在點擊上加上.stop相當于調用了event.stopPropagation()，阻止了事件冒泡傳遞，點擊子節點不會捕獲到父節點的事件。代碼如下
<div class="testPage"> <div class="outeer" @click="outer"> <div class="middle" @click.stop="middle"> <button @click="inner">點擊我(^_^)</button></div></div> <p>{{ message }}</p> </div>效果如下，
?
.prevent取消默認事件
說明：該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動作（如果存在這樣的動作）。例如，如果 type 屬性是 "submit"，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止提交表單。注意，如果 Event 對象的 cancelable 屬性是 fasle，那么就沒有默認動作，或者不能阻止默認動作。無論哪種情況，調用該方法都沒有作用。
如下可以阻止a超鏈接標簽的默認跳轉
<a href="home" @click.prevent>跳轉</a>?
.native 修飾符
.native - 監聽組件根元素的原生事件。?主要是給自定義的組件添加原生事件。普通的標簽使用.native修飾事件是無效的，如下
<button @click.native="clickFn">測試native的作用</button><el-button type="primary" @click.native="clickFn">組件上使用native的作用</el-button>?
?
按鍵修飾符
在監聽鍵盤事件時，我們經常需要監測常見的鍵值。 Vue 允許為?v-on?在監聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 keyCode 是 13 時調用 vm.submit() --> <input v-on:keyup.13="submit"><input v-on:keyup.enter="submit"><!-- 縮寫語法 --> <input @keyup.enter="submit">?
全部的按鍵別名：記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：
- .enter
- .tab
- .delete?(捕獲 “刪除” 和 “退格” 鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
?
可以通過全局?config.keyCodes?對象自定義按鍵修飾符：
// 可以使用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112?
?
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： (视频+图文)机器学习入门系列-第15章
- 下一篇： 【时间序列】时间序列建模的时间戳与时序特