本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识.

一、事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用的是v-on绑定

     window.onload = function(){
var c = new Vue({
el : 'body',
methods : {
say : function(){
alert( '你好' );
}
}
});
}
 <input type="button" value="点我" @click="say();"/>

二、传递事件对象

     window.onload = function(){
var c = new Vue({
el : 'body',
methods : {
say : function(e){
alert( e.clientX );
}
}
});
}
 <input type="button" value="点我" @click="say($event);"/>

三、事件冒泡

     window.onload = function(){
var c = new Vue({
el : 'body',
methods : {
say : function(){
alert('你好');
},
say2 : function(){
alert( '你好啊' );
}
}
});
}
     <div id="box">
<div @click="say2();">
<input type="button" value="点我" @click="say();"/>
</div>
</div>

四、阻止事件冒泡:有两种方式,一种是原生方式,一种是vue提供的stop

         var c = new Vue({
el: 'body',
methods: {
say: function (ev) {
alert('你好');
ev.cancelBubble = true;
},
say2: function () {
alert('你好啊');
}
}
});
 <div id="box">
<div @click="say2();">
<input type="button" value="点我" @click="say($event);"/>
</div>
</div>
  window.onload = function () {
var c = new Vue({
el: 'body',
methods: {
say: function (ev) {
alert('你好');
},
say2: function () {
alert('你好啊');
}
}
});
}
 <div id="box">
<div @click="say2();">
<input type="button" value="点我" @click.stop="say();"/>
</div>
</div>

五、右键菜单的默认行为: 弹出右键菜单

         window.onload = function () {
var c = new Vue({
el: 'body',
methods: {
say: function () {
alert('你好'); //执行完之后 会弹出右键菜单
}
}
});
}
 <input type="button" value="点我" @contextmenu="say();"/>

2种方式阻止右键菜单的默认行为:

原生方式:

         window.onload = function () {
var c = new Vue({
el: 'body',
methods: {
say: function (ev) {
alert('你好'); //执行完之后 会弹出右键菜单
ev.preventDefault();
}
}
});
}
 <div id="box">
<input type="button" value="点我" @contextmenu="say($event);"/>
</div>

vue提供的prevent方式

         window.onload = function () {
var c = new Vue({
el: 'body',
methods: {
say: function () {
alert('你好');
}
}
});
} <div id="box">
<input type="button" value="点我" @contextmenu.prevent="say();"/>
</div>

keydown事件绑定:

         window.onload = function () {
var c = new Vue({
el: 'body',
methods: {
say: function () {
alert('你好');
}
}
});
} <div id="box">
<input type="text" @keydown="say();"/>
</div>

按键码keycode:

         window.onload = function () {
var c = new Vue({
el: 'body',
methods: {
say: function (ev) {
alert( ev.keyCode );
}
}
});
} <div id="box">
<input type="text" @keydown="say($event);"/>
</div>

按键的判断方式: 按键码与英文方法

1,根据回车键的按键码keycode等于13判断

         window.onload = function () {
var c = new Vue({
el: 'body',
methods: {
say: function (ev) {
if( ev.keyCode == 13 ){
alert( '你按下去的是回车键' );
}
}
}
});
} <div id="box">
<input type="text" @keyup="say($event);"/>
</div>

简写方式:

         methods: {
say: function () {
alert( '你按下去的是回车键' );
}
} //html代码
<input type="text" @keyup.13="say();"/>

enter判断:

         methods: {
say: function () {
alert( '你按下去的是回车键' );
}
}
//html代码
<input type="text" @keyup.enter="say();"/>

方向键判断:

         window.onload = function () {
var c = new Vue({
el: 'body',
methods: {
say: function () {
alert('左方向键');
},
say2: function () {
alert('右方向键');
},
say3: function () {
alert('上方向键');
},
say4: function () {
alert('下方向键');
},
}
});
}
 <div id="box">
<input type="text" @keyup.left="say();"/>
<input type="text" @keyup.right="say2();"/>
<input type="text" @keyup.up="say3();"/>
<input type="text" @keyup.down="say4();"/>
<br/>
<input type="text" @keyup.37="say();"/>
<input type="text" @keyup.39="say2();"/>
<input type="text" @keyup.38="say3();"/>
<input type="text" @keyup.40="say4();"/>
</div>

[js高手之路] vue系列教程 - 事件专题(4)的更多相关文章

  1. [js高手之路] vue系列教程 - vue的事件绑定与方法(2)

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...

  2. [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)

    本系列课程选用vue的版本为1.0.21, 什么是vue? vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变, ...

  3. [js高手之路] vue系列教程 - 实现留言板todolist(3)

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...

  4. [js高手之路] vue系列教程 - 组件定义与使用上部(7)

    组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...

  5. [js高手之路] vue系列教程 - 绑定class与行间样式style(6)

    一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { bac ...

  6. [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)

    一.设置属性的值: {{data中的数据}} window.onload = function () { var c = new Vue({ el : '#box', data : { url : ' ...

  7. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  8. [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

    接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...

  9. [js高手之路] es6系列教程 - 迭代器与生成器详解

    什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...

随机推荐

  1. C++几个技巧:智能指针在消息传递中的使用,元组,及lambda删除器

    1.SendMessage/PostMessage中传递对象参数 (1)方法1:使用shared_ptr 发送端: PostMessage(MyhWnd, CWM_SOME_ERROR, 0, rei ...

  2. LeetCode :My solution N-Queens

    N-Queens Total Accepted: 15603 Total Submissions: 60198My Submissions The n-queens puzzle is the pro ...

  3. jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法

    原始form表单值获取方式(手动): $.ajax({ type: "POST", url: "ajax.php", data: "Name=摘取天上 ...

  4. Tomcat下载,新建自己的项目,模拟server

    一.tomcat下载 下载地址http://tomcat.apache.org/ 打开网页能够看到例如以下内容 在网页左边有Download以下就是能够下载的版本号.如6.0,7.0,8.0: 选择一 ...

  5. Shuttle ESB(一)——入门实例

    下载Shuttle ESB 从GitHub项目公布页,下载最新的公布版本号. Shuttle-ESB源代码包列表:http://www.nuget.org/packages?q=shuttle-esb ...

  6. iOS 开发人员不可缺少的75个工具

    原文出处: Ben Scheirman 译文出处: Njuxjy 假设你去到一位熟练的木匠的工作室,你总是能发现他/她有一堆工具来完毕不同的任务. 软件开发相同如此. 你能够从软件开发人员怎样使用工具 ...

  7. 《Android源代码设计模式解析与实战》读书笔记(十四)

    第十四章.迭代器模式 迭代器模式,又叫做游标模式.是行为型设计模式之中的一个.我们知道对容器对象的訪问必定会涉及遍历算法.我们能够将遍历的方法封装在容器中,或者不提供遍历方法,让使用容器的人自己去实现 ...

  8. Docker for Windows 使用入门

    欢迎来到Docker for Windows! Docker是用于创建Docker应用程序的完整开发平台,Docker for Windows是在Windows系统上开始使用Docker的最佳方式. ...

  9. spring的bean是在什么时候实例化的

    如果没有特殊配置,当bean的scope为原型,也就是singleton的时候,在启动spring容器的时候完成实例化.且需要注意的是,当实例化一个bean的时候,先执行其构造函数代码,然后再执行se ...

  10. 数据的随机抽取 及 jQuery补充效果(菜单、移动)

    一.数据的随机抽取 都见过那种考试题从很多题中随机抽取几道的试卷吧,现在就要做这样的一个例子:从数据库中随机抽取几条数据出来显示(例如:一百中随机挑选50条) 随机挑选是要有提交数据的,所以肯定是要有 ...