事件处理

1.事件的基本使用

使用v-on:click="xxx" 或@click="xxx"绑定事件，xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不要用箭头函数，this的作用域会被改变
methods中配置的函数都是是被Vue所管理的函数，this的指向是vm或组件实例对象
@click="xxx" 和 @click="xxx($event)" 的作用一样，后者可以传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>你好，{{name}}</h2>
<!--    <button v-on:click="showInfo">点我提示信息</button>-->
    <button @click="showInfo">点我提示信息（不传参）</button>
    <button @click="showInfo1('孙笑川', $event)">点我提示信息1（传参）</button>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            name: '孙笑川'
        },
        methods: {
            showInfo() {
                alert("抽象！");
            },
            showInfo1(value, event) {
                console.log(value,event);
                alert("你好，" + value);
            }
        }
    })
</script>
</body>
</html>

2.事件修饰符

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        *{
          margin-top: 20px;
        }
        .demo{
            height: 50px;
            background-color: skyblue;
        }
        .box{
            padding: 5px;
            background-color: skyblue;
        }
        .box1{
            padding: 5px;
            background-color: lightpink;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: azure;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
<div id="root">
    <h2>你好，{{name}}</h2>
    <!-- 阻止默认事件 -->
    <a href="https://www.wangchouchou.com" @click.prevent="showInfo">点我提示信息</a>

    <!-- 阻止事件冒泡 -->
    <div class="demo" @click="showInfo">
        <button @click.prevent.stop="showInfo">点我提示信息</button>
        <!-- 先阻止默认事件，再阻止冒泡事件（修饰符可以连续写） -->
        <!---- <a @click.prevent.stop="showInfo">点我提示信息</a> -->
    </div>

    <!-- 事件只触发一次 -->
    <button @click.once="showInfo">点我提示信息</button>
    <!-- 使用事件的捕获模式 -->
    <div class="box" @click.capture="showMsg(1)">
        div1
        <div class="box1" @click="showMsg(2)">
            div2
        </div>
    </div>

    <!-- 只有event.target是当前操作的元素时才触发事件 -->
    <div class="demo" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>

    <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
    <!-- wheel 鼠标滚轮
         scroll 滚动条
     -->
    <ul class="list" @wheel.passive="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            name: '孙笑川'
        },
        methods: {
            showInfo(e) {
                //阻止事件默认行为，此处为点击后不跳转
                //e.preventDefault();
                alert("抽象！");
                console.log(e.target)
            },
            showMsg(msg) {
                console.log(msg)
            },
            demo() {
                for (let i = 0; i < 100000; i++) {
                    console.log('@')
                }
                console.log("循环执行完毕")
            }
        }
    })
</script>
</body>
</html>

3.键盘事件

常用的按键别名
- 回车 enter
- 删除 delete （捕获”删除“和”退格“按键）
- 退出 esc
- 空格 space
- 换行 tab（必须配合keydown使用）
- 上 up
- 下 down
- 左 left
- 右 right
Vue未提供别名的按键，可以使用原始的key值绑定，需转换为kebab-case（短横线命名）
系统修饰键：ctrl、alt、shift、meta
1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
2. 配合keydown使用：正常触发事件
可以使用keycode指定具体的按键
Vue.config.keyCode.自定义键名 = 键码，可以定制按键别名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>你好，{{name}}</h2>
    <!--
    keydown 按下
    keyup 按下松手
    @keyup.ctrl.y 只有ctrl + y才触发事件
    -->
    <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            name: '孙笑川'
        },
        methods: {
            showInfo(e) {
                //原始判断
                // if (e.keyCode !== 13) {
                //     return;
                // } else {
                //     console.log(e.target.value)
                // }
                console.log(e.target.value)
            }
        }
    })
</script>
</body>
</html>

评论 (0)