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 ...
随机推荐
- Java 208 道面试题:Java 基础模块答案
目前市面上的面试题存在两大问题:第一,题目太旧好久没有更新了,还都停留在 2010 年之前的状态:第二,近几年 JDK 更新和发布都很快,Java 的用法也变了不少,加上 Java 技术栈也加入了很多 ...
- 用 ASP.NET MVC 实现基于 XMLHttpRequest long polling(长轮询) 的 Comet(转)
轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 优点:后端程序编写比较容易. 缺点:请求中有大半是无用,浪费带宽和服务器资源. 实例:适于小型应用. 长轮询:客 ...
- (18)What a planet needs to sustain life
https://www.ted.com/talks/dave_brain_what_a_planet_needs_to_sustain_life/transcript 00:12I'm really ...
- D. Three Pieces(dp,array用法,棋盘模型)
https://codeforces.com/contest/1065/problem/D 题意 给你一个方阵,里面的数字从1~nn,你需要从标号为1的格子依次走到标号为nn,在每一个格子你有两个决策 ...
- lnmp源码编译安装zabbix
软件安装 Mysql 安装 tar xf mysql-5.7.13-1.el6.x86_64.rpm-bundle.tar -C mysql rpm -e --nodeps mysql-libs-5 ...
- Arria10中的OCT功能
OCT是什么? 串行(RS)和并行(RT) OCT 提供了 I/O 阻抗匹配和匹配性能.OCT 维持信号质量,节省电路板空 间,并降低外部组件成本. Arria 10 器件支持所有 FPGA 和 HP ...
- ROM的一种写法
module mr_rom_pll_valuemask_8bpc #( , , , , // 6*7 // alt_clogb2(42) ) ( input wire clock, :] addr_p ...
- Nginx使用(配置开机启动)
环境: 系统:CentOS 6.5 Final 安装目录:/usr/local/nginx Nginx开机自启: ①编写shell实现控制 vi /etc/init.d/nginx 添加内容: #!/ ...
- 严格别名规则“-fstrict-aliasing”和“-fno-strict-aliasing”及类型双关
“-fstrict-aliasing”表示启用严格别名规则,“-fno-strict-aliasing”表示禁用严格别名规则,当gcc的编译优化参数为“-O2”.“-O3”和“-Os”时,默认会打开“ ...
- 20169207《Linux内核原理与分析》第五周作业
这周的任务主要分为两个方面,第一方面,学习MOOC网上视频第三讲并完成配套的实验.第二方面,学习课本的第四章和第六章. 首先从实验开始讲起,前期我们对Linux内核的源码做了一个简单的了解.包括Mai ...