WEB前端：vuejs全家桶（8）：事件简写、对象、冒泡、默认行为、键盘事件、事件修饰符

最新推荐文章于 2022-10-02 15:53:37 发布

hahahafree

最新推荐文章于 2022-10-02 15:53:37 发布

阅读量170

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/weixin_43731793/article/details/102943123

版权

vuejs 专栏收录该内容

40 篇文章 3 订阅

订阅专栏

1.1 事件简写




    v-on:click=""    
    简写方式 @click=""

<button v-on:click='show'>点我</button>
<button @click='show'>点我</button>

1.2 事件对象$event

    
    包含事件相关信息，如事件源、事件类型、偏移量
    target、type、offsetx

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>vue</title>
    <script>
        window.onload = function() {
            new Vue({
                el: '.itany',
                methods: {
                    show() {
                        console.log(111);
                    },
                    print(e) {
                        console.log(e.target.innerHTML); //DOM对象
                        console.log(this);
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div class="itany">
        <button v-on:click='show'>点我</button>
        <button @click='show'>点我</button>
        <hr>
        <button @click="print($event)">cllick me</button>
    </div>
</body>

</html>

1.3 事件冒泡


    阻止事件冒泡：
        a)原生js方式，依赖于事件对象
        b)vue方式，不依赖于事件对象
            @click.stop

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>vue</title>
    <script>
        window.onload = function() {
            new Vue({
                el: '.itany',
                methods: {
                    show() {
                        console.log(111);
                        // e.stopPropagation();

                    },
                    print() {
                        console.log(222);
                    },
                    write() {
                        console.log(333);
                    },
                    study() {
                        console.log(444);
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div class="itany">
        <div @click="write">
            <p @click="print">
				<!-- <button @click="show($event)">点我</button> -->
                <button @click.stop='show'>点我</button>

            </p>
        </div>
        <hr>
    </div>
</body>

</html>

1.4 事件默认行为


    阻止默认行为：
        a)原生js方式，依赖于事件对象
        b)@click.prevent

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>vue</title>
    <script>
        window.onload = function() {
            new Vue({
                el: '.itany',
                methods: {
                    show() {
                        console.log(111);
                        // e.stopPropagation();

                    },
                    print() {
                        console.log(222);
                    },
                    write() {
                        console.log(333);
                    },
                    study() {
                        console.log(444);
                        // e.preventDefault();

                    }
                }
            });
        }
    </script>
</head>

<body>
    <div class="itany">
        <div @click="write">
            <p @click="print">
                <button @click.stop='show'>点我</button>

            </p>
        </div>
        <hr>
        <!-- <a href="#" @click="study($event)">俺是链接</a> -->
        <a href="#" @click.prevent="study">你是谁？</a>
    </div>
</body>

</html>

1.5 键盘事件


    回车：@keydown.13 或@keydown.enter
    上：@keydown.38 或@keydown.up

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>vue</title>
    <script>
        window.onload = function() {
            new Vue({
                el: '.itany',
                methods: {
                    show(e) {
                        console.log(e.keyCode);
                        if (e.keyCode == 13) {
                            console.log('你按了回车！');
                        }
                    },
                    print() {
                        console.log('回车');
                    }

                }
            });
        }
    </script>
</head>

<body>
    <div class="itany">
        <!-- 用户名：<input type="text" @keydown="show($event)"> -->
        <!-- 用户名：<input type="text" @keydown.enter="print"> -->
        用户名：<input type="text" @keydown.up="print">
    </div>
</body>

</html>

可以自定义键盘事件，也称为自定义键码或自定义键位别名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>vue</title>
    <script>
        // 自定义键位
        Vue.config.keyCodes = {
            a: 65,
            f1: 112
        }
        window.onload = function() {
            new Vue({
                el: '.itany',
                methods: {
                    show(e) {
                        console.log(e.keyCode);
                        if (e.keyCode == 13) {
                            console.log('你按了回车！');
                        }
                    },
                    print() {
                        console.log('回车');
                    }

                }
            });
        }
    </script>
</head>

<body>
    <div class="itany">
        <!-- 用户名：<input type="text" @keydown="show($event)"> -->
        <!-- 用户名：<input type="text" @keydown.enter="print"> -->
        用户名：<input type="text" @keydown.f1="print">
    </div>
</body>

</html>

1.6 事件修饰符

 
    .stop - 调用 event.stopPropagation()。
    .prevent - 调用 event.preventDefault()。
    .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    .native - 监听组件根元素的原生事件。
    .once - 只触发一次回调。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>vue</title>
    <script>
        window.onload = function() {
            new Vue({
                el: '.itany',
                methods: {

                    print() {
                        console.log('触发');
                    }

                }
            });
        }
    </script>
</head>

<body>
    <div class="itany">

        <button @click.once="print">只触发一次</button>

    </div>
</body>

</html>