关于Vue的一些小笔记（四）事件处理器

前言：这次的笔记主要记下v-on对事件的监听、事件修饰符、按键修饰符、系统修饰符，以及了解什么是事件冒泡和事件捕获。一起来看看吧！

事件处理

一、监听事件

使用v-on指令来达到事件监听。

使用v-on的几种方法：

1. 直接用v-on监听DOM事件
2. 接收一个定义在methods里的方法来调用
3. 使用内联的js语句
4. 用特殊变量$event 把它传入方法

<div id="app">
    <!--1、这里直接使用v-on监听DOM事件-->
    <button v-on:click="counter+=1">增加1</button>
    <!--2、接收一个定义的方法来调用-->
    <button v-on:click="greet">打招呼</button>
    <!--3、使用内联的js语句-->
    <button v-on:click="say('hi')">Say hi</button>
    <!--4、使用特殊变量$event-->
    <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            counter:0 ,
            name:"小花"
        },
        //在methods中定义对象方法
        methods:{
            greeet:function(event){
                alert("hello"+this.name+"!")
                //event是原生DOM事件
                if(event){
                    alert(event.target.tagName)//弹出button
                }
            },
            
            say:function(message){
               alert(message)
           },
            
            warn: function (message, event) {
    		    // 现在我们可以访问原生事件对象
   				 if (event) {
      				event.preventDefault()
   				}
   					 alert(message)
  			}
        }
    })
</script>

二、事件冒泡和事件捕获

简单来说，事件冒泡就是一个元素向上一层一层的去寻找包括着它的标签，然后进行事件传播。（是个由内向外的过程）

事件捕获就是一个元素向下一层一层的去寻找它包含着的标签，然后进行事件传播。（是个由外向内的过程）

三、事件修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件的处理。比如：event.preventDefault() 或 event.stopPropagation()。 为了更方便的处理事件，vue为我们提供了事件修饰符。

（1）事件修饰符

• .stop — 相当于调用event.stopPropagation()
• .prevent — 相当于调用event.preventDefault()
• .capture — 使用事件捕获模式
• .self — 当前元素自身触发时调用
• .once — 只触发一次回调（就是只能点一次）
• .passive — (不能和.prevent一起使用，不然就会告诉浏览器你不想阻止事件的默认行为)
• .native — 监听组件根元素的原生事件

<!-- 阻止单击事件继续传播 ，即阻止事件捕获 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用 事件捕获 模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

（2）按键修饰符

用来监听键盘事件，就是当用户点击键盘时触发事件。使用keyup关键字

比如：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 只有在 keycode 是enter时调用 vm.submit() -->
<input v-on:keyup.enter="submit">

全部按键别名如下：

按键码	系统修饰键	组合按键	鼠标按钮修饰符
.enter	.ctrl	.exact	.left
.tab	.alt		.right
.delete(捕获“删除”和“退格”键)	.shift		.middle
.esc	.meta
.space
.up(上)
.down（下）
.left(左) .right(右)

系统修饰键：实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.exact修饰符：允许你控制由精确的系统修饰符组合触发的事件。

鼠标按钮修饰符：这些修饰符会限制处理函数仅响应特定的鼠标按钮。

四、小补充

（1）stopPropagation() 方法

不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

（2）preventDefault() 方法

取消事件的默认动作。
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。