Vue-3-事件

最新推荐文章于 2024-04-07 21:41:30 发布

chenxi8316

最新推荐文章于 2024-04-07 21:41:30 发布

阅读量143

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/ccdf/blog/1594317

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="box">
    <input type="button" value="按钮"  @click="myshow()">
    <input type="button" value="event按钮"  @click="myshow2(12)">
    <input type="button" value="event按钮"  @click="myshow3($event)">
</div>
<hr>
<!--事件冒泡-->
<div id="box2">
    <div  @click="myshow2()">
        <input type="button" value="事件冒泡"  @click="myshow()">
        <input type="button" value="阻值事件冒泡-方式一"  @click="myshow($event)">
        <input type="button" value="阻值事件冒泡-方式二"  @click.stop="myshow3()">
    </div>
</div>
<hr>
<!--默认行为--阻值默认行为-->
<div id="box3">
    <input type="button" value="实例"  @contextmenu="myshow2()">
    <input type="button" value="按钮1"  @contextmenu="myshow($event)">
    <input type="button" value="按钮2"  @contextmenu.prevent="myshow2()">
</div>
<hr>
<!--键盘事件-->
<div id="box4">
    <!--测试-->
    <input type="text" @keydown="myshow2()" placeholder="随便吧">
    <!--获取按的是什么键-->
    <input type="text" @keydown="myshow3($event)" placeholder="随便输入一个吧">
    <!--回车键-->
    <input type="text" @keydown.13="myshow4($event)" placeholder="按回车有反应,别的键没反应">
    <!--<input type="text" @keydown.enter="myshow4($event)">-->
    <hr>
    <!--方向键-->
    <input type="text" @keydown.up="myshow2()" placeholder="按↑">
    <input type="text" @keydown.down="myshow2()" placeholder="按↓">
    <input type="text" @keydown.left="myshow2()" placeholder="按←">
    <input type="text" @keydown.right="myshow2()" placeholder="按→">
</div>




<script>
    window.onload = function () {
        //键盘事件
        new Vue({
            el: "#box4",
            methods: {
                myshow2:function () {
                    alert(2);
                },
                myshow3:function (ev) {
                    if(ev.keyCode ==13){
                        alert("按回车了");
                    }else{
                        alert(ev.keyCode);
                    }
                },
                myshow4:function () {
                    alert("按回车了");
                }
            }
        });

        //默认行为--阻值默认行为
        new Vue({
            el: "#box3",
            methods: {
                myshow: function (ev) {
                    alert(1);
                    ev.preventDefault();
                },
                myshow2:function () {
                    alert(2);
                }
            }
        });

        //事件冒泡
        new Vue({
            el: "#box2",
            methods: {
                myshow: function (ev) {
                    alert(1);
                    ev.cancelBubble = true;
                },
                myshow2:function () {
                    alert(2);
                },
                myshow3:function () {
                    alert(1);
                }
            }
        });

        //事件对象
        new Vue({
            el: "#box",
            methods: {
                myshow: function () {
                    alert(1);
                },
                myshow2:function (num) {
                    alert(1);
                    alert(num);
                },
                myshow3:function (ev) {
                    alert(ev.clientX);
                }
            }
        });
    };
</script>

</body>
</html>

转载于:https://my.oschina.net/ccdf/blog/1594317