前端应用_Vue_用示例代码 解释五大>>事件修饰符(.stop,.prevent,.capture,.self,.once)

概况如下

1. .stop 阻止冒泡
2. .prevent 阻止默认事件
3. .capture 添加事件侦听器时使用事件捕获模式
4. .self 只当事件在该元素本身触发时触发回调
5. .once 事件只能触发一次

示例代码表现如下：

当点击 save button 的时候， 会冒烟弹出三句话 ，依次为

button > small_box > big_box

显示的效果如下：

.stop 阻止冒泡

上边的示例已经表明存在 冒泡， 如果想阻止 冒泡 就需要在 button 加上.stop:

@click.stop=“button”

点点击 save button 的效果如下：

我只是一个button，请注意了

其他两个不显示出来， 但是如果点里层的，照样有冒炮 ，比如我点击里层的，外层也照样显示.

.prevent 阻止默认事件

什么是 默认事件呢 比如我写个 a 标签 他默认是跳转的， 如果加上 .prevent 就可以在跳转之前加上
自己的事件， 保证 显示咱们自己的行为.
下边我加个 a 标签 ，并绑定a 的事件 ，看看行为如何， 自己点击尝试下，

    
    
    
    



    

         
        百度一下，你就知道
    


    

行为如下：
当点击链接的是， 会执行我们的自己的link 方法，然后弹出一个框， 确定之后再 进行跳转。 这就是阻止默认行为. 如果没有 事件修饰符 ，你实现起来很麻烦 .

.capture 添加事件侦听器时使用事件捕获模式

这句话看起来比较难理解， 我举个例子就行了

比如 在点击button的时候， 默认先会执行 button 事件，然后 外层的box 事件，
如果在最外层加上了capture ，就会先执行 外层的box 事件， 再执行button 事件，

用.capture 跳过默认行为 ，优先执行。

示例代码修改的部分如下：

看看执行结果：
我是外层的
我只是一个button，请注意了
我是里层的

.self 只当事件在该元素本身触发时触发回调

.self 只要学过python 都有感觉， 这个就是它自身， 只有当点击它的时候才能显示，别想从冒泡
获取。

比如 如果在最外层 加上.self, 当点击button 的时候，最外成不会触发到，只有点击最外层才能被触发，

如果不加上.self 会被冒泡.

修改代码如下：

当点击button 的时候 最外层没有触发到.

总结： .self 和stop 有什么区别呢

1. stop 会把全部的冒泡 干掉
2. .self 只是针对自身.

.once 事件只能触发一次

这个更好理解，只能触发一次， 你再点击对我没有用。

修改如下：

就第一次的点击button 触发了， 再点击就不能生效

总结：

之所以有事件修饰符， 为了解决复杂的场景，让方法执行的顺序可控，更加灵活.