vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件
vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件
v-on:click/mouseover...... 简写的:
@click="" 推荐 事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐
默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
@keydown $event ev.keyCode
@keyup 常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
简写的: @click="" 推荐
<input type="button" value="按钮" v-on:click="show()">
<input type="button" value="按钮" @click="show()">
事件对象:@click="show($event)"
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev,b){
alert(ev.clientX);
alert(b);
}
}
});
}; <div id="box">
<input type="button" value="按钮" @click="show($event,112)">
</div>
事件冒泡,
阻止冒泡:
a). ev.cancelBubble=true;
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert(1);
ev.cancelBubble=true;
},
show2:function(){
alert(2);
}
}
});
}; <div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click="show($event)">
</div>
</div>
b). @click.stop 推荐
<div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click.stop="show()">
</div>
</div>
默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert(1);
ev.preventDefault();//这里阻止了右击显示菜单的事件
}
}
});
}; <div id="box">
<input type="button" value="按钮" @contextmenu="show($event)">
</div>
b). @contextmenu.prevent 推荐
<div id="box">
<input type="button" value="按钮" @contextmenu.prevent="show()">
</div>
键盘事件:
@keydown $event ev.keyCode
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert(ev.keyCode);
}
}
});
}; <div id="box">
<input type="text" @keydown="show($event)">
</div>
@keyup
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert(ev.keyCode);
}
}
});
};
<div id="box">
<input type="text" @keyup="show($event)">
</div>
常用键:
1、回车
a). @keyup.13
b). @keyup.enter
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(){
alert('您按回车了');
}
}
});
};
<div id="box">
<!--<input type="text" @keyup.13="show()">-->
<input type="text" @keyup.enter="show()">
</div>
2、上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(){
alert("你按了左箭头←");
}
}
});
};
<div id="box">
<input type="text" @keyup.left="show()">
</div>
vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件的更多相关文章
- vue 事件修饰符(阻止默认行为和事件冒泡)
1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...
- Javascript 事件对象(六)键盘事件
keyCode获取用户按下键盘的哪个按键 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conte ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- javascript 键盘事件总结
原文:http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html#2583814 在进入正题前,我们看一下浏览器对于键盘的一些默 ...
- JS模拟键盘事件 -- 原理及小例子
提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...
- HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...
- 2018.12/6 js键盘事件 DOM:0级2级
DOM0级事件元素绑定多个click最后只执行最后一个click. DOM2级事件元素绑定多个click,都要执行 注意当绑定的多个事件名,函数名,事件发生阶段三者完全一样时,才执行最后一个 div. ...
- JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;
JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...
- js进阶 12-4 jquery键盘事件如何使用
js进阶 12-4 jquery键盘事件如何使用 一.总结 一句话总结:键盘和鼠标都是外设输入设备,所以函数很像,所以使用就像鼠标事件click一样 1.jquery键盘事件有哪三个? 1(up和do ...
- JavaScript键盘事件全面控制代码
JavaScript键盘事件全面控制,它可以捕获键盘事件的输入状态,可以判断你敲打了键盘的那个键,ctrl.shift,26个字母等等,返回具体键盘值. <html> <head&g ...
随机推荐
- c#中委托与事件
参考:http://www.tracefact.net/tech/009.html 张子阳:http://www.cnblogs.com/JimmyZhang/archive/2007/09/23/9 ...
- arguments[0]()的详解
var length = 10; function fn(){ console.log(this.length); } var obj = { length:5, method:function(fn ...
- jq,ajax,post例子。
jq post 例子 <script> $(function(){ $('#button').on('click', function(){ $.ajax({ type: 'POST', ...
- Arria10 SDI II学习笔记
12G-SDI16是什么意思? 关于 int_vpid_byte1 int_vpid_byte2 int_vpid_byte3 int_vpid_byte4 这些参数是不是如果外部数据有就不需要传输, ...
- 强大的DataGrid组件[1]
说明:DataGrid组件是Silverlight数据组件中最为常用并且是功能最为强大的数据组件.因此,对开发者而言,深入了解其特性是十分有必要的.本文先介绍该组件的基本特性,接着通过几个简单实例来说 ...
- mysql高级
视图: 视图是一条select语句执行后返回的结果集 试图是对若干张基础表的引用 定义视图: 建议以v_开头 create view 试图名称 as select 语句 查看视图 show table ...
- spring-数据库操作组件的实现
Ok,今天看了下spring数据库组件实现的源码,简要的做下笔记. 首先是JdbcTemplate,其实这个技术的实现很简单,就是一个模板类,把执行sql的主干流程都写好了,比如connection的 ...
- java poi 合并单元格
java poi 合并单元格 2017年03月29日 16:39:01 翠烟你懊恼 阅读数:26561 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.n ...
- 【Android开发那点破事】打开APP加载页面实现
今天的破事呢就说说APP加载页面的实现.一般情况下,当APP打开的时候,我们需要做很多事情,比如检查网络连接啊,初始化一些配置啊等等.我们可以让这些事情在APP完全打开之前做完,然后呢在打开的过程中显 ...
- shell 命令 bc linux下的计算器
bc命令 在linux环境下的计算器.