[js高手之路] vue系列教程

本文主要讲解事件冒泡，事件绑定的简写，事件默认行为，按键码等一系列与事件相关的知识.

一、事件绑定的简写，@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用的是v-on绑定

    window.onload = function(){
        var c = new Vue({
            el : 'body',
            methods : {
                say : function(){
                    alert( '你好' );
                }
            }
        });
    }

<input type="button" value="点我" @click="say();"/>

二、传递事件对象

    window.onload = function(){
        var c = new Vue({
            el : 'body',
            methods : {
                say : function(e){
                    alert( e.clientX );
                }
            }
        });
    }

<input type="button" value="点我" @click="say($event);"/>

三、事件冒泡

    window.onload = function(){
        var c = new Vue({
            el : 'body',
            methods : {
                say : function(){
                   alert('你好');
                },
                say2 : function(){
                    alert( '你好啊' );
                }
            }
        });
    }

    <div id="box">
        <div @click="say2();">
            <input type="button" value="点我" @click="say();"/>
        </div>
    </div>

四、阻止事件冒泡：有两种方式，一种是原生方式，一种是vue提供的stop

        var c = new Vue({
                el: 'body',
                methods: {
                    say: function (ev) {
                        alert('你好');
                        ev.cancelBubble = true;
                    },
                    say2: function () {
                        alert('你好啊');
                    }
                }
            });

<div id="box">
    <div @click="say2();">
        <input type="button" value="点我" @click="say($event);"/>
    </div>
</div>

 window.onload = function () {
            var c = new Vue({
                el: 'body',
                methods: {
                    say: function (ev) {
                        alert('你好');
                    },
                    say2: function () {
                        alert('你好啊');
                    }
                }
            });
        }

<div id="box">
    <div @click="say2();">
        <input type="button" value="点我" @click.stop="say();"/>
    </div>
</div>

五、右键菜单的默认行为: 弹出右键菜单

        window.onload = function () {
            var c = new Vue({
                el: 'body',
                methods: {
                    say: function () {
                        alert('你好');  //执行完之后 会弹出右键菜单
                    }
                }
            });
        }

<input type="button" value="点我" @contextmenu="say();"/>

2种方式阻止右键菜单的默认行为：

原生方式：

        window.onload = function () {
            var c = new Vue({
                el: 'body',
                methods: {
                    say: function (ev) {
                        alert('你好');  //执行完之后 会弹出右键菜单
                        ev.preventDefault();
                    }
                }
            });
        }

<div id="box">
    <input type="button" value="点我" @contextmenu="say($event);"/>
</div>

vue提供的prevent方式

        window.onload = function () {
            var c = new Vue({
                el: 'body',
                methods: {
                    say: function () {
                        alert('你好');
                    }
                }
            });
        }

        <div id="box">
            <input type="button" value="点我" @contextmenu.prevent="say();"/>
        </div>

keydown事件绑定:

        window.onload = function () {
            var c = new Vue({
                el: 'body',
                methods: {
                    say: function () {
                        alert('你好');
                    }
                }
            });
        }

        <div id="box">
            <input type="text" @keydown="say();"/>
        </div>

按键码keycode:

        window.onload = function () {
            var c = new Vue({
                el: 'body',
                methods: {
                    say: function (ev) {
                        alert( ev.keyCode );
                    }
                }
            });
        }

        <div id="box">
            <input type="text" @keydown="say($event);"/>
        </div>

按键的判断方式： 按键码与英文方法

1，根据回车键的按键码keycode等于13判断

        window.onload = function () {
            var c = new Vue({
                el: 'body',
                methods: {
                    say: function (ev) {
                        if( ev.keyCode == 13 ){
                           alert( '你按下去的是回车键' );
                        }
                    }
                }
            });
        }

        <div id="box">
            <input type="text" @keyup="say($event);"/>
        </div>

简写方式：

        methods: {
                    say: function () {
                       alert( '你按下去的是回车键' );
                    }
                }

//html代码
<input type="text" @keyup.13="say();"/>

enter判断:

        methods: {
                    say: function () {
                       alert( '你按下去的是回车键' );
                    }
                }
//html代码
<input type="text" @keyup.enter="say();"/>

方向键判断：

        window.onload = function () {
            var c = new Vue({
                el: 'body',
                methods: {
                    say: function () {
                        alert('左方向键');
                    },
                    say2: function () {
                        alert('右方向键');
                    },
                    say3: function () {
                        alert('上方向键');
                    },
                    say4: function () {
                        alert('下方向键');
                    },
                }
            });
        }

<div id="box">
    <input type="text" @keyup.left="say();"/>
    <input type="text" @keyup.right="say2();"/>
    <input type="text" @keyup.up="say3();"/>
    <input type="text" @keyup.down="say4();"/>
    <br/>
    <input type="text" @keyup.37="say();"/>
    <input type="text" @keyup.39="say2();"/>
    <input type="text" @keyup.38="say3();"/>
    <input type="text" @keyup.40="say4();"/>
</div>