<!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>
网友评论