Vue事件处理+ Vue事件修饰符(阻止默认行为等)+Vue中的键盘事件

前端小草籽

已于 2022-10-09 20:56:42 修改

阅读量1.3k

点赞数 3

分类专栏： Vue的学习文章标签： vue.js javascript 前端

于 2022-10-02 10:56:48 首次发布

本文链接：https://blog.csdn.net/weixin_47075145/article/details/127135366

版权

Vue的学习专栏收录该内容

17 篇文章 2 订阅

订阅专栏

1.Vue事件处理使用 v-on:xxx = ' ' 或者 @xxx = ' '，绑定事件

1.事件处理函数是写在Vue配置对象methods中的

2.调用事件处理函数时需要传参和不需要传参的写法

3.methods 中的方法也在Vue实例化对象上面，但是没有像在data中的数据一样做数据代理。

4.事件的基本使用总结

2.Vue事件修饰符:对事件进行修饰(阻止默认行为等)

5.只有event.target是当前操作的元素时才触发事件 self

6.事件的默认行为立即执行，无需等待事件回调函数执行完毕 passive

3.Vue中的键盘事件 keydown 和 keyup

1.在按下某个特定的键盘按钮时，整个键盘事件代码才完整执行写法：利用键盘按钮别名

2.特殊：换行 tab 它有一个功能：将焦点从当前元素上切走只能配合keydown

3.特殊：系统修饰键:ctrl,alt,shift,meta(win键) 。配合keyup使用时，按下修饰键的同时，再按下其它键，随后释放其它键，事件才被触发。配合keydown使用：正常触发事件。

3.Vue事件中两个技巧

1.修饰符可以连续写 eg:既阻止冒泡，又阻止默认事件写法:eg:@click.prevent.stop

2.系统修饰键:如果想要按下系统修饰键，再指定按下某一个键时，事件才生效，写法：eg:@keyup.ctrl.y

1.Vue事件处理使用 v-on:xxx = ' ' 或者 @xxx = ' '，绑定事件

1.事件处理函数是写在Vue配置对象methods中的

事件处理函数要写在 Vue配置项methods 中。

所有被Vue管理的函数最好都写成普通函数或者ES6中对象方法 写法,(methods中的方法就属于被Vue管理的函数)，不要写成箭头函数。如果写成箭头函数，则函数体里面的this指向就不是Vue实例对象了。写成普通函数或者ES6中对象方法形式的好处是其中的this指向是Vue实例化对象vm

2.调用事件处理函数时需要传参和不需要传参的写法

    <div id="app">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="userinfo1">点我有提示信息(不需要传参时)</button>
        <button v-on:click="userinfo2(66)">点我有提示信息(需要传参时)</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: '田中央1111'
            },
            methods: {
                userinfo1() {
                    console.log(event); //注意事件发生时会自动产生一个事件处理函数 event
                },
                userinfo2(num) {
                    console.log(num, event); //注意事件发生时会自动产生一个事件处理函数 event
                }
            }
        })
        console.log(vm);
    </script>

3.methods 中的方法也在Vue实例化对象上面，但是没有像在data中的数据一样做数据代理。

4.事件的基本使用总结

1.使用 v-on:xxx = ' ' 或者 @xxx = ' '，绑定事件，其中xxx是事件名

2.事件的回调(事件处理函数)需要配置在 methods 对象中，最终会在 vm上

3.methods 中配置的函数，不要用箭头函数！！，否则this指向就不是vm

4.methods 中配置的函数，都是被Vue所管理的函数，this指向是 vm 或者组件实例对象

2.Vue事件修饰符:对事件进行修饰(阻止默认行为等)

Vue中的事件修饰符

1.prevent :阻止默认事件(常用)

2.stop :阻止事件冒泡(常用)

3.once :事件只触发一次(常用)

4.capture :使事件在捕获阶段执行

5.self :只有event.target 是当前操作的元素时才触发事件

6.passive :事件的默认行为立即执行，无需等待事件回调执行完毕

1.阻止默认事件 prevent

    <div id="app">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 阻止默认事件  prevent-->
        <a href="https://www.baidu.com" @click.prevent='userinfo'>点我提示信息</a>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: '田中央'
            },
            methods: {
                userinfo() {
                    console.log('你好啊,同学');
                }
            }
        })
    </script>

分析：点击a标签后，页面不跳转，还是在当前页面，还是会打印 "你好啊，同学"

2.阻止冒泡 stop

    <div id="app">
        <div class="far" @click="userinfo">
            <!-- 阻止冒泡 stop -->
            <div class="son" @click.stop="userinfo"></div>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: '田中央'
            },
            methods: {
                userinfo() {
                    console.log('你好啊,同学');
                    console.log(event.target);
                }
            }
        })
    </script>

分析：点击 .son 元素，只会触发一次点击事件，也就是在 .son元素那里点击事件处理函数执行后，就不会冒泡到 .far元素那里，所以只打印一次 “你好啊，同学”

3. 事件只触发一次 once

    <div id="app">
        <button @click.once="userinfo">点击真的只触发一次欸</button>
    </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: '田中央'
            },
            methods: {
                userinfo() {
                    alert('你好啊,同学');
                    console.log(event.target);
                }
            }
        })
    </script>

分析：点击按钮，页面跳出弹窗：你好啊，同学，然后再点击按钮，就不会弹出弹窗了，也就是点击事件只触发一次。

4.使事件在捕获阶段执行 capture

    <style>
        .far {
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
        
        .son {
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>

    <div id="app">
        <div class="far" @click.capture="userinfo1(1)">
            <div class="son" @click="userinfo2(2)"></div>
        </div>
    </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: '田中央'
            },
            methods: {
                userinfo1(num1) {
                    console.log(num1);
                },
                userinfo2(num2) {
                    console.log(num2);
                }
            }
        })
    </script>

分析：不给 .far元素的点击事件设置 capture属性时，点击 .son 元素，输出打印结果 2，1. 给了 .far 元素设置 capture属性时，点击 .son 元素，输出打印结果：1，2，原因时:capture使得事件在捕获阶段就执行，而不用等到冒泡阶段

5.只有event.target是当前操作的元素时才触发事件 self

    <div id="app">
        <div class="far" @click.self="userinfo1(1)">
            <div class="son" @click="userinfo2(2)"></div>
        </div>
    </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: '田中央'
            },
            methods: {
                userinfo1() {
                    console.log(event.target, 11111);
                },
                userinfo2() {
                    console.log(event.target, 22222);
                }
            }
        })
    </script>

分析： .far 元素没有设置 self属性时，点击 .son 元素，结果为：(冒泡的原因)

.far 元素设置self属性后，点击 .son元素，结果为：

也会有冒泡，但是冒泡到 .far 元素时，因为点击的是 .son元素，event.target 是 .son元素不是 .far元素，所以 .far元素的点击事件不会执行。所以self属性作用：只有event.target是当前操作的元素时才触发事件

6.事件的默认行为立即执行，无需等待事件回调函数执行完毕 passive

这里要区分两个滚动事件：scroll 和 wheel

scroll :滚动条可以通过键盘的上下键去滚动，也可以通过鼠标的滚轮去滚动，都会触发scroll滚动事件

wheel:滚动条可以通过键盘的上下键去滚动，也可以通过鼠标的滚轮去滚动，但是只有通过滚轮滚轮的才会触发wheel滚轮数据

它们之间的区别：

区别1:

wheel滚轮事件：就算滚动条已经到底了，再次移动鼠标的滚轮，wheel滚轮事件还是会触发。但是按键盘上下键却不会触发wheel事件。

scroll滚动事件：滚动条到底了，不管移动鼠标滚轮还是键盘上下键，都不会触发scroll滚动事件

区别2(重点)：

wheel：滚动鼠标滚轮后，首先去触发 wheel滚动事件函数，函数执行完毕后，再去执行默认行为(滚动条移动)==>这个环节就是浪费时间了，如果wheel滚动事件函数执行时间较长，页面就会卡顿。

解决办法就是：passive 事件的默认行为立即执行，不用等待事件回调函数执行完毕。

scroll:滚动鼠标后，先去执行默认行为，再去执行执行scroll滚动事件函数。

综上：passive可以解决 wheel滚动事件中因为事件处理函数执行事件过长的滚动条卡顿

    <style>
        .list {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* 超出部分，出现滚动条 */
            overflow: auto;
        }
        
        li {
            height: 100px;
        }
    </style>

    <div id="app">
        <ul class="list" @wheel.passive="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: '田中央'
            },
            methods: {
                demo() {
                    for (let i = 0; i < 10000; i++) {
                        console.log(111111);
                    }
                    console.log('累趴了');
                }
            }
        })
    </script>

注意点：如果做的是移动端(平板和手机)的项目，这个passive用的就会多一点。

3.Vue中的键盘事件 keydown 和 keyup

keydown:按下键盘上的键不用抬起来就触发

keyup：按下键盘上的键抬起来才触发

    <div id="app">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup="userinfo">
    </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: '田中央'
            },
            methods: {
                userinfo() {
                    console.log(event.target.value); //拿到输入框中输入的值
                }
            }
        })
    </script>

分析：这段代码，不管按下键盘上面什么键，结果都会打印出input输入框中的值，我们不要这样，需要在按下某个特定的键盘按钮时，才打印此时的input输入框的value值

1.在按下某个特定的键盘按钮时，整个键盘事件代码才完整执行写法：利用键盘按钮别名

原始写法：利用键盘事件对象:event.keyCode

Vue写法：利用键盘按钮别名

总结：Vue常见的按键别名：

回车=>enter

删除=>delete

退出=>esc

空格=>space

换行=>tab 特殊，必须配合keydown

上=>up

下=>down

左=>left

右=>right

2.特殊：换行 tab 它有一个功能：将焦点从当前元素上切走只能配合keydown

当配合keyup事件时，按下tab键，不用松开焦点就从当前元素上移走了。焦点都不在该元素上了，所以按下tab键就不会执行。

所以换行tab只能配合 keydown 事件才有效果

    <div id="app">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keydown.tab="userinfo">
    </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: '田中央'
            },
            methods: {
                userinfo() {
                    console.log(event.target.value);
                }
            }
        })
    </script>

3.特殊：系统修饰键:ctrl,alt,shift,meta(win键) 。配合keyup使用时，按下修饰键的同时，再按下其它键，随后释放其它键，事件才被触发。配合keydown使用：正常触发事件。

    <div id="app">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl="userinfo">
    </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: '田中央'
            },
            methods: {
                userinfo() {
                    console.log(event.target.value);
                }
            }
        })
    </script>

分析:keyup事件时：只按下ctrl键是不能触发的，必须要按下ctrl键然后再按下松开宁外一个键，才能触发。keydown事件时：只按下ctrl就可以触发。

3.Vue事件中两个技巧

1.修饰符可以连续写 eg:既阻止冒泡，又阻止默认事件写法:eg:@click.prevent.stop

2.系统修饰键:如果想要按下系统修饰键，再指定按下某一个键时，事件才生效，写法：eg:@keyup.ctrl.y

前端小草籽

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue事件处理+ Vue事件修饰符(阻止默认行为等)+Vue中的键盘事件

1.使用 v-on:xxx = ' ' 或者 @xxx = ' '，绑定事件，其中xxx是事件名2.事件的回调(事件处理函数)需要配置在 methods 对象中，最终会在 vm上3.methods 中配置的函数，不要用箭头函数！！，否则this指向就不是vm4.methods 中配置的函数，都是被Vue所管理的函数，this指向是 vm 或者组件实例对象。
复制链接

扫一扫