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 事件 简写、事件对象、冒泡、默认行为、键盘事件的更多相关文章

  1. vue 事件修饰符(阻止默认行为和事件冒泡)

    1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...

  2. Javascript 事件对象(六)键盘事件

    keyCode获取用户按下键盘的哪个按键 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conte ...

  3. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  4. javascript 键盘事件总结

    原文:http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html#2583814 在进入正题前,我们看一下浏览器对于键盘的一些默 ...

  5. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  6. HTML5 Canvas鼠标与键盘事件

    演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...

  7. 2018.12/6 js键盘事件 DOM:0级2级

    DOM0级事件元素绑定多个click最后只执行最后一个click. DOM2级事件元素绑定多个click,都要执行 注意当绑定的多个事件名,函数名,事件发生阶段三者完全一样时,才执行最后一个 div. ...

  8. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  9. js进阶 12-4 jquery键盘事件如何使用

    js进阶 12-4 jquery键盘事件如何使用 一.总结 一句话总结:键盘和鼠标都是外设输入设备,所以函数很像,所以使用就像鼠标事件click一样 1.jquery键盘事件有哪三个? 1(up和do ...

  10. JavaScript键盘事件全面控制代码

    JavaScript键盘事件全面控制,它可以捕获键盘事件的输入状态,可以判断你敲打了键盘的那个键,ctrl.shift,26个字母等等,返回具体键盘值. <html> <head&g ...

随机推荐

  1. c#中委托与事件

    参考:http://www.tracefact.net/tech/009.html 张子阳:http://www.cnblogs.com/JimmyZhang/archive/2007/09/23/9 ...

  2. arguments[0]()的详解

    var length = 10; function fn(){ console.log(this.length); } var obj = { length:5, method:function(fn ...

  3. jq,ajax,post例子。

    jq post 例子 <script> $(function(){ $('#button').on('click', function(){ $.ajax({ type: 'POST', ...

  4. Arria10 SDI II学习笔记

    12G-SDI16是什么意思? 关于 int_vpid_byte1 int_vpid_byte2 int_vpid_byte3 int_vpid_byte4 这些参数是不是如果外部数据有就不需要传输, ...

  5. 强大的DataGrid组件[1]

    说明:DataGrid组件是Silverlight数据组件中最为常用并且是功能最为强大的数据组件.因此,对开发者而言,深入了解其特性是十分有必要的.本文先介绍该组件的基本特性,接着通过几个简单实例来说 ...

  6. mysql高级

    视图: 视图是一条select语句执行后返回的结果集 试图是对若干张基础表的引用 定义视图: 建议以v_开头 create view 试图名称 as select 语句 查看视图 show table ...

  7. spring-数据库操作组件的实现

    Ok,今天看了下spring数据库组件实现的源码,简要的做下笔记. 首先是JdbcTemplate,其实这个技术的实现很简单,就是一个模板类,把执行sql的主干流程都写好了,比如connection的 ...

  8. java poi 合并单元格

    java poi 合并单元格 2017年03月29日 16:39:01 翠烟你懊恼 阅读数:26561   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.n ...

  9. 【Android开发那点破事】打开APP加载页面实现

    今天的破事呢就说说APP加载页面的实现.一般情况下,当APP打开的时候,我们需要做很多事情,比如检查网络连接啊,初始化一些配置啊等等.我们可以让这些事情在APP完全打开之前做完,然后呢在打开的过程中显 ...

  10. shell 命令 bc linux下的计算器

    bc命令 在linux环境下的计算器.