Vue关于事件处理

事件处理

关于Vue的事件处理机制，介绍一下三点，分别是：绑定监听，事件修饰符，按键修饰符。

1.绑定监听

最常见的事件绑定监听即v-on指令，写法为：v-on：xxx = ‘fun’，可简写为：@xxx = ‘fun’，其中fun中可以传递参数，写法为：@xxx = ‘fun(参数)’。对于每一个监听函数，都默认带有事件形参：event，即若定义的监听函数即使没有带参数，但是会默认有一个形参event，其隐含的属性对象为$event。具体为：

1. v-on:xxx=“fun”
2. @xxx=“fun”
3. @xxx=“fun(参数)”
4. 默认事件形参: event
5. 隐含属性对象: $event

2.事件修饰符

对于事件修饰符，Vue分别使用了.prevent和.stop来简化了对于阻止事件的默认行为和停止事件冒泡事件的编码，即：

1. .prevent : 阻止事件的默认行为 event.preventDefault()
2. .stop : 停止事件冒泡 event.stopPropagation()

3.按键修饰符

对于按键修饰符，Vue也使用了更加简洁的写法，具体为:

1. .keycode : 操作的是某个 keycode 值的键
2. .keyName : 操作的某个按键名的键(少部分)

具体见代码为例进行说明：

  <div id="app">
        <h4>绑定监听</h4>
        <button @click="test1">test1</button>
        <button @click="test2('katle')">test2</button>
        <button @click="test3">test3</button>
        <button @click="test4('hahah',$event)">test4</button>

        <!--
          .stop:停止事件冒泡event.stopPropagation()
          .prevent:阻止事件的默认行为event.preventDefault()
        -->
        <h4>事件修饰符</h4>
        <div style="width:200px;height: 200px;background-color: yellow" @click="test5">
            <div style="width:100px;height: 100px;background-color: green" @click.stop="test6"></div>
        </div>
        <a href="https://www.baidu.com/" @click.prevent="test7">百度一下</a>

        <!--
          .keyCode:操作的是某个keycode值的键
          keyName：操作的是某个按键名的键（但只有少部分按键可以使用按键名来编码）
        -->
        <h4>按键修饰符</h4>
        enter键：<input type="text" @keyup.enter="test8"> <br>
        退格键：<input type="text" @keyup.8="test8">
    </div>

<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
    var vue = new Vue({
        el:'#app',
        data:{},
        methods:{
            /*
            * 默认事件形参：event
            * 隐藏属性对象：$event
            * */
            test1(){
                alert('test1')
            },
            test2(msg){
                alert(msg + '+' + 'test2')
            },
            test3(event){
                alert(event.target.innerHTML + '--kalte')
            },
            test4(msg,event){
                alert(msg + '-' + event.target.innerHTML)
            },

            test5(){
                alert('out')
            },

            test6(event){
                //阻止事件冒泡
                //event.stopPropagation()
                alert('inner')
            } ,
            test7(event){
                //event.preventDefault()
                alert('已阻止默认行为')
            },
            
            test8(event){
                 /*if(event.keyCode === 13) {
                     alert(event.target.value + '-' + event.keyCode)
                 }*/
                alert(event.target.value + '+' + event.keyCode)
            }

        }
    })

</script>