vue绑定事件

一、事件绑定基础语法有两种写法：

1、直接写函数名,@click="handleClick";

2、加$event,@click="handleClicks($event,参数)"参数可选,

$event是内置事件对象 ;

好处:不但可以传事件对象,还可以传其他的参数

Button

eventButton

特殊按钮3

二、事件修饰符：

1、@click.prevent：阻止事件的默认行为（在后面依然看可以写click要触发的函数：@click.prevent="handle"）

2、@click.stop：阻止事件向外冒泡

3、@click.self：只有在点击所在的当前这一级标签的时候才会触发事件，点击它里面的子元素标签不会触发事件。【只有在e.target = e.currentTarget的时候才执行，也就是触发事件的元素和绑定事件的元素相等的时候才会执行。】

【e.target.value：e.target表示触发事件的该DOM元素节点，e.target.value表示获取该结点的值】

4、@click.once：绑定的事件只会执行一次，执行后这个事件会解绑，不会再被执行

5、@click.capture：把冒泡机制改成捕获，冒泡是从内到外，捕获是从外到内。

三、按键修饰符【控制按下哪个按键时，相对应的事件才会被执行】：

1、@keydown：按键按下时就会执行绑定的函数

2、@keydown.enter：只有enter键触发keydown事件才会执行绑定的函数

3、@keydown.tab：只有tab键触发keydown事件才会执行绑定的函数

四、系统修饰符：

ctrl、alt、shift、meta

要触发绑定的函数，不仅要按下按键，同时还需要按下相应的系统修饰符按键。例如：@keydown.ctrl="handle"，必须同时按下ctrl键和其他的按键才能执行handle函数。

五、鼠标修饰符：

1、@click.right：只有点击鼠标右键才会执行。

2、@click.left：只有点击鼠标左键才会执行。

3、@click.middle：只有点击鼠标中键才会执行。

click

原文链接：https://blog.csdn.net/weixin_54362381/article/details/119849055