1. 首頁 > 生活百科 > >

9_Vue事件修飾符( 二 )

生活百科9_Vue事件修飾符


9_Vue事件修飾符

文章插圖
測試結果
9_Vue事件修飾符

文章插圖
不常用的事件修飾符案例4_使用事件的捕獲模式補充知識在使用捕獲模式之前我們需要先簡單的了解下
關于js事件流 ， 事件處理的 捕獲階段和 事件 冒泡階段
參考博文
準備工作我這里有個嵌套的div盒子，二者都設計了一個點擊事件，并且都傳遞了參數
<!-- 4、使用事件捕獲階段 --><div class="box1" @click="toMsg(1)">box1<div class="box2" @click="toMsg(2)">box2</div></div>事件設計
9_Vue事件修飾符

文章插圖
簡單設計下樣式
.box1{height: 100px;background-color: #ff6700;padding: 5px;}.box2{height: 50px;background-color: #fff;}測試階段
9_Vue事件修飾符

文章插圖
需求
  • 根據 js事件流，我們可以必然的退出，當前這個情況就和案例2一樣
  • 先 觸發 box2的事件，然后冒泡到box1的事件
  • 需求很簡單，先讓box1觸發，然后box2再觸發
事件修飾符 == .capture注意：該修飾符的作用是，讓事件所處的DOM元素 ， 在事件捕獲階段觸發
也就是：誰要在事件捕獲階段觸發 ， 那么就安在誰身上
9_Vue事件修飾符

文章插圖
測試
9_Vue事件修飾符

文章插圖
案例5_event.target是當前元素才能觸發準備工作準備一個div盒子和按鈕，二者共用一個點擊事件
9_Vue事件修飾符

文章插圖
該點擊事件描述 當前觸發 事件 的DOM元素是誰
9_Vue事件修飾符

文章插圖
測試
9_Vue事件修飾符

文章插圖
需求
  • 雖然事件是冒泡上去的，但是觸發了外層盒子事件的DOM元素是button
  • 我們這里就不說那么多，說這個修飾符的作用是什么
事件修飾符 == .self
  • 這個修飾符的作用是 ：只有event.target ， 指向的DOM元素是該元素本身，那么才會觸發這個事件
  • 怎么說？

    • 9_Vue事件修飾符

      文章插圖
    • 對box的click事件進行修飾
    • 只有event.target 的 值 為 這個box的div時
    • box的click事件才會被觸發
  • 說白了也可以阻止事件冒泡
測試
9_Vue事件修飾符

文章插圖
案例6_passive事件的默認行為立即執行，無需等待 事件的回調執行完畢
  • 這個好理解 ， 用案例一舉例子
  • 先跳到網頁去 ， 再出現提示框，應該是這個意思
  • 我測試了一下，好像不行，不是我理解那樣
  • 先當下鴿子，后面在處理
【9_Vue事件修飾符】

推薦閱讀