Vue-3-事件

来源：互联网发布：行政级轿车知乎编辑：程序博客网时间：2024/06/05 17:13
<!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>
阅读全文
'); })();