9_Vue事件修飾符
概述
首先需要理解下什麼是事件修飾符
常用事件修飾符
案例1_阻止默認行為發生
- 我這裡有一個a標籤
- 這個標籤呢我會給它配置一個點擊事件
- 點擊事件輸出一句話，那麼效果是這樣的
程式碼
<body>
<!-- 定義一個容器 -->
<div class="app">
<!-- 默認事件發生（常用） -->
<a href="//www.baidu.com" @click="toBaidu"></a>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
name: 'wavesbright'
},
methods: {
// 默認事件行為
toBaidu(){
alert("即將前往百度.......");
}
},
});
</script>
測試
分析/需求
- 分析
- 在案例當中我們看到，頁面是先出現了 提示框
- 然後跳轉到了 百度 的頁面
- 跳轉到百度頁面，這是a標籤的默認行為，也就是 默認觸發的事件
- 需求
- 我只想讓他出現提示框，但是不跳轉
- 需求很簡單，我換個標籤不就行了，誒，我偏不，我就要讓a標籤來完成這個事情
- 那怎麼辦？
- 解決也很簡單，讓a標籤不跳轉就行了，怎麼個不跳轉法？
- 使用 herf =「javascript:iod(0)」這種 偽協議
- 使用#代替
- 在onclick當中返回false
- 我們要做的，就是 阻止這個默認行為的發生
- 那麼就需要使用到事件修飾符
解決方法
在原生JS中，利用事件源對象的 prevenDefault();來阻止
我們來測試下
在vue當中我們可以使用如下的語法來代表 阻斷默認事件發生
事件修飾符 == .prevent
測試效果
我使用了 .prevent來修飾這個事件，那麼造成的結果就是，這個事件的默認行為被我阻斷了
案例2_阻止冒泡
準備工作
簡單設計一個 div 加一個 button按鈕，為這倆設置與案例1相同的點擊事件
<!-- 2、事件冒泡 -->
<div class="box" @click="toBaidu">
<button @click="toBaidu">事件冒泡</button>
</div>
簡單樣式設計
<style>
.app{
height: 100vh;
width: 100%;
}
/* 給這個盒子設置一個寬高 */
.box{
margin-top: 20px;
height: 100px;
border: 1px solid black;
display: flex;
align-items: center;
}
</style>
冒泡測試
- 可以看到，我們在點擊這個按鈕的時候，div的事件也被調用了
- 這就是一個典型的事件冒泡，那麼我們應該如何解決？
需求分析
點擊button按鈕的時候不要觸發div的點擊事件
解決方式
通過事件源對象的.stopPropagation()可以阻止
測試結果
注意：如果子元素和父元素使用的是不同的事件，那麼在子元素的事件當中添加即可
事件修飾符 == .stop
測試結果
案例3_只觸發一次的事件
準備工作
這有個按鈕，簡單設計下樣式，事件還是剛剛的點擊事件
測試結果
需求
我只想讓他觸發一次，點了以後可以繼續點，但是事件不會繼續觸發了
事件修飾符 == .once
測試結果
不常用的事件修飾符
案例4_使用事件的捕獲模式
補充知識
在使用捕獲模式之前我們需要先簡單的了解下
關於js事件流，事件處理的 捕獲階段和 事件 冒泡階段
準備工作
我這裡有個嵌套的div盒子，二者都設計了一個點擊事件，並且都傳遞了參數
<!-- 4、使用事件捕獲階段 -->
<div class="box1" @click="toMsg(1)">
box1
<div class="box2" @click="toMsg(2)">box2</div>
</div>
事件設計
簡單設計下樣式
.box1{
height: 100px;
background-color: #ff6700;
padding: 5px;
}
.box2{
height: 50px;
background-color: #fff;
}
測試階段
需求
- 根據 js事件流，我們可以必然的退出，當前這個情況就和案例2一樣
- 先 觸發 box2的事件，然後冒泡到box1的事件
- 需求很簡單，先讓box1觸發，然後box2再觸發
事件修飾符 == .capture
注意：該修飾符的作用是，讓事件所處的DOM元素，在事件捕獲階段觸發
也就是：誰要在事件捕獲階段觸發，那麼就安在誰身上
測試
案例5_event.target是當前元素才能觸發
準備工作
準備一個div盒子和按鈕，二者共用一個點擊事件
該點擊事件描述 當前觸發 事件 的DOM元素是誰
測試
需求
- 雖然事件是冒泡上去的，但是觸發了外層盒子事件的DOM元素是button
- 我們這裡就不說那麼多，說這個修飾符的作用是什麼
事件修飾符 == .self
- 這個修飾符的作用是 ：只有event.target，指向的DOM元素是該元素本身，那麼才會觸發這個事件
- 怎麼說？
- 對box的click事件進行修飾
- 只有event.target 的 值 為 這個box的div時
- box的click事件才會被觸發
- 說白了也可以阻止事件冒泡
測試
案例6_passive
事件的默認行為立即執行，無需等待 事件的回調執行完畢
- 這個好理解，用案例一舉例子
- 先跳到網頁去，再出現提示框，應該是這個意思
- 我測試了一下，好像不行，不是我理解那樣
- 先當下鴿子，後面在處理
