20 六种事件修饰符：stop、prevent、capture、self、once和passive解决冒泡事件

绑定事件中的修饰符有很多种，这些修饰符各有各的用处。 本节课将讲解6种Vue中的事件修饰符，分别是； stop、prevent、capture、self、once和passive。

通过修饰符解决冒泡事件

在JavaScript中冒泡事件是最长处理的事件，先写一段代码，手动创造一个冒泡事件。 新建一个文件Demo20.html

• 修改模板 template 部分，在最外层增加一个
  并添加 click 事件。
• 修改方法 methods 部分，删除无用方法，保留两个方法，增加 alter 提示。
• 形成冒泡效果，就是有嵌套的DOM元素时，两个都有绑定事件，JS会自动向上传递事件。

stop修饰符

在Vue中要停止冒泡是非常简单的，只要加加一个事件修饰符stop就可以了。

增加一位小伙伴

self修饰符

除了使用.stop修饰符，还有一种修饰符self，意思是只有点击自己的时候才会被执行。 只不过加的位置要加在外层DOM元素的事件上。

template:`
        

            
目前已点报名的小伙伴数量{{count}}.
            增加一位小伙伴
       
        `

这时候你会发现点击那里，都没办法触发 hanldeBtnClick1 方法了，这是因为目前最外层div下都是独立的DOM元素，就是都有成对标签出现，都不属于最外自己，都是他们的子元素。

可以编写一段专属最外层DIV的文字。

template:`
        

            我是最外层的DIV文字
            
目前已点报名的小伙伴数量{{count}}.
            增加一位小伙伴
       
        `

这样当点击我是最外层的DIV文字时，就会触犯 handleBtnClick1 方法了。

    
    
    Demo19
    


    


const app=Vue.createApp({ 
    data(){
        return{
            count:0
        }
    },
    methods:{
        addCountClick(){
            this.count++
        },
        handleBtnClick1(){
            alert(1)
        },
    },
    template:`
        

            我是最外层的DIV文字
            
目前已点报名的小伙伴数量{{count}}.
            增加一位小伙伴
       
        `
}) 
const vm=app.mount("#app")

其它常用修饰符

prevent修饰符：

阻止默然行为的修饰符，这个以前讲过，例如阻止form表单的默认提交行为。（不在重复介绍，如果你还没有掌握，可以复习以前课程）

capture修饰符：

改成捕获模式，默认的模式都是冒泡模式，也就是从下到上，但是你用capture后，是从上到下的。

修改一下模板部分的代码，不在使用修饰符，而是让事件存在冒泡。

methods:{
    addCountClick(){
        this.count++
        alert(0)  //修改了此处
    },
    handleBtnClick1(){
        alert(1)
    },
},
template:`
    
  //修改了此处
        我是最外层的DIV文字
        
目前已点报名的小伙伴数量{{count}}.
        增加一位小伙伴
    
    `

once修饰符：

事件只执行一次

template:`
    

        我是最外层的DIV文字
        
目前已点报名的小伙伴数量{{count}}.
        增加一位小伙伴
    
    `

此时再点击按钮，事件只执行一次。这时候我们修改了两个地方，最外层的事件加了self修饰符，button上加了once修饰符。

passive修饰符： 解决滚动时性能的修饰符，不太好演示，等以后用到我们会再详细讲解。

本文就先到这里了，我们学习了6种修饰符：stop、prevent、capture、self、once、passive。下节我们讲解按键修饰符。

初始页面

DOCTYPE html>


    
    
    Demo19
    


    


    const app=Vue.createApp({ 
    data(){
        return{
            count:0
        }
    },
    methods:{
        addCountClick(){
            this.count++
        },
        handleBtnClick1(){
            alert(1)
        },
    },
    template:`
        

            
目前已点报名的小伙伴数量{{count}}.
            增加一位小伙伴
       
        ` 
    }) 
    const vm=app.mount("#app")