vue3——事件监听：v-on应用(@的应用)

绑定事件监听指令：v-on

缩写：@(语法糖)

当用户不设置参数时，默认传递%event(即：事件对象)

按钮

函数：

 网页显示：

当点击按钮时：第一行就是事件对象，而事件对象  .target 就是返回事件对象 对应的 元素本身。

当设置多个参数时，就需要手动添加 %event 参数。

按钮

函数： 

效果也是一样的。

---

示例：

    
        按钮
    

函数： 

 网页显示：

               

当点击白色区域按钮时，三个按钮事件全部都会触发，即：外层元素也会触发事件，但触发顺序是从里往外。

当点击黑色区域，黑色区域和红色区域会触发。

当点击红色区域，只要红色区域触发。

v-on事件的修饰符号：

1.    .stop：阻止事件冒泡，即：阻止从此层开始的 外层元素事件触发

    
        按钮
    

 当点击黑色区域时，只有黑色区域事件触发，外层的红色区域的事件无法触发。

 当点击白色按钮时，黑色区域事件触发，但外层的红色区域的事件无法触发。

2.     .self：当事件处于元素本身才能触发事件

    
        按钮
    

当点击白色按钮时，黑色区域事件无法触发，因为并没有点击黑色区域本身(元素里面也不行)

当点击黑色区域，触发事件

3.  .capture：添加事件侦听器时，使用事件捕获模式，即：优先触发该事件，当有多个事件侦听器使用事件捕获模式时，优先触发最外层事件，从外向里

    
        按钮
    

当点击黑色按钮时，由于使用事件捕获模式，所以优先触发该事件。然后触发玩使用事件捕获模式的事件侦听器后，在按照从里往外顺序触发其他事件。

    
        按钮
    

当红色区域和黑色区域都使用事件捕获模式时，从外往里依次触发使用事件捕获模式的事件侦听器，在按照从里往外顺序触发其他事件。

 4.  .prevent：阻止默认事件

比如：

dddddddddddd

当点击这个a标签时，不会跳转路由，但依旧能执行我们设置的点击事件 (没加 .prevent 虽然也能执行我们设置的点击事件，但会跳转路由)

5.    .once：事件只触发一次

这个顾名思义很好理解

    
        按钮
    

当我们第一次点击白色区域时 。

当我们第二次点击白色区域时，因为黑色区域事件已经触发过一次了。

 v-on事件的修饰符号还可以混合使用

    
        按钮
    

当点击黑色按钮时，即执行了 .stop 操作又 执行了 .self 操作。

此外还有更多的事件的修饰符号，不过我还没使用过。