vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件

  1. v-on:click/mouseover......
  2.  
  3. 简写的:
  4. @click="" 推荐
  5.  
  6. 事件对象:
  7. @click="show($event)"
  8. 事件冒泡:
  9. 阻止冒泡:
  10. a). ev.cancelBubble=true;
  11. b). @click.stop 推荐
  12. 默认行为(默认事件):
  13. 阻止默认行为:
  14. a). ev.preventDefault();
  15. b). @contextmenu.prevent 推荐
  16. 键盘:
  17. @keydown $event ev.keyCode
  18. @keyup
  19.  
  20. 常用键:
  21. 回车
  22. a). @keyup.13
  23. b). @keyup.enter
  24. 上、下、左、右
  25. @keyup/keydown.left
  26. @keyup/keydown.right
  27. @keyup/keydown.up
  28. @keyup/keydown.down
  29. .....
  1. 简写的: @click="" 推荐
  1. <input type="button" value="按钮" v-on:click="show()">
  2. <input type="button" value="按钮" @click="show()">
  1. 事件对象:@click="show($event)"
  1. window.onload=function(){
  2. new Vue({
  3. el:'#box',
  4. data:{
  5.  
  6. },
  7. methods:{
  8. show:function(ev,b){
  9. alert(ev.clientX);
  10. alert(b);
  11. }
  12. }
  13. });
  14. };
  15.  
  16. <div id="box">
  17. <input type="button" value="按钮" @click="show($event,112)">
  18. </div>

事件冒泡,
阻止冒泡:
a). ev.cancelBubble=true;

  1. window.onload=function(){
  2. new Vue({
  3. el:'#box',
  4. data:{
  5.  
  6. },
  7. methods:{
  8. show:function(ev){
  9. alert(1);
  10. ev.cancelBubble=true;
  11. },
  12. show2:function(){
  13. alert(2);
  14. }
  15. }
  16. });
  17. };
  18.  
  19. <div id="box">
  20. <div @click="show2()">
  21. <input type="button" value="按钮" @click="show($event)">
  22. </div>
  23. </div>

b). @click.stop 推荐

  1. <div id="box">
  2. <div @click="show2()">
  3. <input type="button" value="按钮" @click.stop="show()">
  4. </div>
  5. </div>

默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();

  1. window.onload=function(){
  2. new Vue({
  3. el:'#box',
  4. data:{
  5.  
  6. },
  7. methods:{
  8. show:function(ev){
  9. alert(1);
  10. ev.preventDefault();//这里阻止了右击显示菜单的事件
  11. }
  12. }
  13. });
  14. };
  15.  
  16. <div id="box">
  17. <input type="button" value="按钮" @contextmenu="show($event)">
  18. </div>

b). @contextmenu.prevent 推荐

  1. <div id="box">
  2. <input type="button" value="按钮" @contextmenu.prevent="show()">
  3. </div>

键盘事件:
@keydown $event  ev.keyCode

  1. window.onload=function(){
  2. new Vue({
  3. el:'#box',
  4. data:{
  5.  
  6. },
  7. methods:{
  8. show:function(ev){
  9. alert(ev.keyCode);
  10. }
  11. }
  12. });
  13. };
  14.  
  15. <div id="box">
  16. <input type="text" @keydown="show($event)">
  17. </div>

@keyup

  1. window.onload=function(){
  2. new Vue({
  3. el:'#box',
  4. data:{
  5.  
  6. },
  7. methods:{
  8. show:function(ev){
  9. alert(ev.keyCode);
  10. }
  11. }
  12. });
  13. };
  1. <div id="box">
  2. <input type="text" @keyup="show($event)">
  3. </div>

常用键:
1、回车
a). @keyup.13
b). @keyup.enter

  1. window.onload=function(){
  2. new Vue({
  3. el:'#box',
  4. data:{
  5.  
  6. },
  7. methods:{
  8. show:function(){
  9. alert('您按回车了');
  10. }
  11. }
  12. });
  13. };
  1. <div id="box">
    <!--<input type="text" @keyup.13="show()">-->
    <input type="text" @keyup.enter="show()">
    </div>
  1.  

2、上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down

  1. window.onload=function(){
  2. new Vue({
  3. el:'#box',
  4. data:{
  5.  
  6. },
  7. methods:{
  8. show:function(){
  9. alert("你按了左箭头←");
  10. }
  11. }
  12. });
  13. };
  14. <div id="box">
  15. <input type="text" @keyup.left="show()">
  16. </div>
  1.  

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. Java 208 道面试题:Java 基础模块答案

    目前市面上的面试题存在两大问题:第一,题目太旧好久没有更新了,还都停留在 2010 年之前的状态:第二,近几年 JDK 更新和发布都很快,Java 的用法也变了不少,加上 Java 技术栈也加入了很多 ...

  2. 用 ASP.NET MVC 实现基于 XMLHttpRequest long polling(长轮询) 的 Comet(转)

    轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 优点:后端程序编写比较容易. 缺点:请求中有大半是无用,浪费带宽和服务器资源. 实例:适于小型应用. 长轮询:客 ...

  3. (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 ...

  4. D. Three Pieces(dp,array用法,棋盘模型)

    https://codeforces.com/contest/1065/problem/D 题意 给你一个方阵,里面的数字从1~nn,你需要从标号为1的格子依次走到标号为nn,在每一个格子你有两个决策 ...

  5. lnmp源码编译安装zabbix

    软件安装 Mysql 安装 tar xf mysql-5.7.13-1.el6.x86_64.rpm-bundle.tar -C mysql rpm -e --nodeps  mysql-libs-5 ...

  6. Arria10中的OCT功能

    OCT是什么? 串行(RS)和并行(RT) OCT 提供了 I/O 阻抗匹配和匹配性能.OCT 维持信号质量,节省电路板空 间,并降低外部组件成本. Arria 10 器件支持所有 FPGA 和 HP ...

  7. ROM的一种写法

    module mr_rom_pll_valuemask_8bpc #( , , , , // 6*7 // alt_clogb2(42) ) ( input wire clock, :] addr_p ...

  8. Nginx使用(配置开机启动)

    环境: 系统:CentOS 6.5 Final 安装目录:/usr/local/nginx Nginx开机自启: ①编写shell实现控制 vi /etc/init.d/nginx 添加内容: #!/ ...

  9. 严格别名规则“-fstrict-aliasing”和“-fno-strict-aliasing”及类型双关

    “-fstrict-aliasing”表示启用严格别名规则,“-fno-strict-aliasing”表示禁用严格别名规则,当gcc的编译优化参数为“-O2”.“-O3”和“-Os”时,默认会打开“ ...

  10. 20169207《Linux内核原理与分析》第五周作业

    这周的任务主要分为两个方面,第一方面,学习MOOC网上视频第三讲并完成配套的实验.第二方面,学习课本的第四章和第六章. 首先从实验开始讲起,前期我们对Linux内核的源码做了一个简单的了解.包括Mai ...