8、Vue3事件绑定

• 1、事件修饰符

  • .stop 组织冒泡
  • .prevent 组织事件默认行为
  • .self 仅当 event.target 是元素本身时才会触发事件处理器，事件处理器不来自子元素
  • .capture 添加事件监听器时，使用 capture 捕获模式，指向内部元素的事件，在被内部元素处理前，先被外部处理
  • .once 点击事件最多被触发一次
  • .passive 滚动事件的默认行为 (scrolling) 将立即发生而非等待 onScroll 完成

• 2、按键修饰符

  • .enter 回车
  • .tab tab
  • .delete (捕获“Delete”和“Backspace”两个按键)
  • .esc esc
  • .space 空格
  • .up 上
  • .down 下
  • .left 左
  • .right 右
  • .ctrl ctral键
  • .alt alt键
  • .shift shift键
  • .meta meta 键是 Windows 键 (⊞)，meta 是钻石键 (◆)
  • .exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。

• 3、鼠标按键修饰符

  • .left 左键
  • .right 右键
  • .middle 滚轮

案例

<template>
  <div @click="parentclick">
    <div @click.stop="subclick">子元素点击</div>
  </div>
   <div @click.once="subclick2">子元素点击2</div>
   <br>
   <input type="text" @keyup.enter="enterfun">
</template>

<script>
export default {
    setup(){
        let parentclick = ()=>{
            alert(2)
        }
        let subclick = ()=>{
            alert(1);
        }
        let subclick2 = ()=>{
            alert(3);
        }
        let enterfun = ()=>{
            alert('回车')
        }
        let onClick = ()=>{
            alert('任意键');
        }
        return {
            onClick,
            enterfun,
            parentclick,
            subclick,
            subclick2
        }
    }
}
</script>