事件处理器v-on:(event)/@(event)
<!DOCTYPE html>
<html lang="zh"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="../css/style.css" rel="stylesheet"> </head> <body>
<div id="myApp">
<h1>事件处理器</h1>
<input id="txtName" v-on:keyup="txtKeyup($event)">
<button id="btnOK" v-on:click="btnClick($event)">OK</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {},
methods: {
txtKeyup: function(event){
this.debugLog(event);
},
btnClick: function(event){
this.debugLog(event);
},
debugLog:function(event){
console.log(
event.srcElement.tagName,
event.srcElement.id,
event.srcElement.innerHTML,
event.key?event.key:""
);
},
},
});
</script>
</body> </html>
事件处理器v-on:(event)/@(event)的更多相关文章
- ASP.NET Core Web API下事件驱动型架构的实现（二）：事件处理器中对象生命周期的管理
在上文中,我介绍了事件驱动型架构的一种简单的实现,并演示了一个完整的事件派发.订阅和处理的流程.这种实现太简单了,百十行代码就展示了一个基本工作原理.然而,要将这样的解决方案运用到实际生产环境,还有很 ...
- Qt中事件处理的方法（三种处理方法，四种覆盖event函数,notify函数，event过滤，事件处理器。然后继续传递给父窗口。可观察QWidget::event的源码，它是虚拟保护函数，可改写）
一.Qt中事件处理的方式 1.事件处理模式一 首先是事件源产生事件,最后是事件处理器对这些事件进行处理.然而也许大家会问, Qt中有这么多类的事件,我们怎么样比较简便的处理每个事件呢?设想,如果是 ...
- SAP CRM和Cloud for Customer中的Event handler（事件处理器）
SAP CRM可以在开发工具中用右键直接创建一个新的事件处理器: 这些事件处理器实际上就是UI控制器(Controller)上具有特定接口类型的方法. C4C UI的event handler 在C4 ...
- Javascript 事件对象（二）event事件
Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span> ...
- 兼容firefox，ie，谷歌，阻止浏览器冒泡事件，Firefox不支持event解决方法
兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法 // 获取事件function getEvent(){ if(window.event) {return w ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单
提交表单不刷新页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jQuery之Ajax--全局Ajax事件处理器
1.这些方法用于注册事件处理器,用来处理页面上的任何 Ajax 请求,当某些事件触发后,这些事件处理器被调用.如果jQuery.ajaxSteup()中的 global 属性被设置为 true (这也 ...
随机推荐
- 【学术篇】SDOI2008 仪仗队
Part1:传送门&吐槽 水题... 然而由于线筛里面的\(j\)打成了\(i\)然后就不能1A了OvO Part2:题目分析 这个正方形是对称的... 而且很显然对角线上只有一个点会被看到. ...
- splice用法
splice()方法给数组添加内容,返回新的数组 splice()方法替换数组一项内容,返回新的数组 如果添加进数组的元素个数不等于被删除的元素个数,数组的长度会发生相应的改变. 比如:从第 2 位开 ...
- JQuery Ajax 向后台传参方式
在jquery的ajax函数中,可以传入3种类型的数据 文本:"uname=alice&mobileIpt=110&birthday=1983-05-12" jso ...
- C/C++ ShowWindow()
{ ShowWindow(HWND,0);//不显示窗口 }
- 阿里云发布新版SaaS上云工具包，全面助力SaaS上云
9月26日,在云栖大会SaaS加速器专场上,阿里云发布了新版的SaaS上云工具包(SaaS Launch Kit),发布了API网关的新功能,以及推出了全新升级的能力中心. SaaS上云工具包,顾名思 ...
- day27 模块：正则re, configparser, subprocess
Python之路,Day15 = Python基础15 re 模块补充 ret = re.findall("c.d", "abc\nd", re.S) # 后面 ...
- 0924CSP-S模拟测试赛后总结
50分-rank28 我是第二机房垫底大垃圾. 赛时T1和T2其实想到了正解??安慰自己罢了. 真正的CSP-S的赛后你还能和主办方争论说自己其实想到了正解要求人家硬给你个省一不成?? 出题人不知道到 ...
- js 异步编程思想
一.js中的异步编程有四种情况 1.定时器 2.所有的事件绑定 3.ajax异步请求 4.回调函数
- 尚学linux课程---7、linux系统管理命令
尚学linux课程---7.linux系统管理命令 一.总结 一句话总结: 查网络:netstat -ntpl 查进程:ps 1.需要下载163yum源(从外部源同步仓库)里面的所有rpm文件? re ...
- Windbg 调试CPU占用过高
1.!runaway !runaway命令显示每个线程消费的时间 Bit 0 (0x1) 让调试器显示每个线程消耗的用户模式时间(user time),默认不加就是0x1 Bit 1 (0x2) 显示 ...