事件处理器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 (这也 ...
随机推荐
- luogu3384 /// 树链剖分+线段树模板
题目大意: https://www.luogu.org/problemnew/show/P3384 树链剖分的讲解 两个dfs() 修改 查询 很详细很好理解 https://www.cnblogs. ...
- 解决centos7没有显示ipv4的问题
很多小伙伴再安装centos7的时候,都是一直默认安装.所以导致后来没有ipv4 那么到底什么原因呢,我最近找到了原因: 就是在这里没有选择: 将这个地方打开之后,就会有了,那么问题就是那个原因.如果 ...
- Caused by: java.io.FileNotFoundException: class path resource [com/cxy/springboot/mapping/] cannot be resolved to URL because it does not exist
java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.conte ...
- pop&dismiss
//dismiss到根视图 - (void)dismissToRootViewController{ UIViewController *vc = self; while (vc.presenting ...
- 2019-8-31-C#-字典-Dictionary-的-TryGetValue-与先判断-ContainsKey-然后-Get-的性能对比
title author date CreateTime categories C# 字典 Dictionary 的 TryGetValue 与先判断 ContainsKey 然后 Get 的性能对比 ...
- exe4j 打包（多个jar打包）
一,自行下载exe4j 注册码: 用户名和公司名可随便填A-XVK258563F-1p4lv7mg7savA-XVK209982F-1y0i3h4ywx2h1A-XVK267351F-dpurrhny ...
- 2019牛客暑期多校训练营（第八场）D-Distance 定期重构
题目传送门 题意: 在一个三维空间中,给出q次操作,每次操作可以在空间中加上一个固定点,或者询问一个点,对于一个询问操作,输出距离这个点最近的固定点的曼哈顿距离. 思路: 官方题解:先假设所有询问都在 ...
- Leetcode274.H-IndexH指数
原题的中文翻译不是很好,所以给出英文版. Given an array of citations (each citation is a non-negative integer) of a rese ...
- Leetcode241.Different Ways to Add Parentheses为运算表达式设计优先级
给定一个含有数字和运算符的字符串,为表达式添加括号,改变其运算优先级以求出不同的结果.你需要给出所有可能的组合的结果.有效的运算符号包含 +, - 以及 * . 示例 1: 输入: "2-1 ...
- rancher2.0 自定义应用商店(catalog)
1.进入自定义应用商店页面 ===================================================== ================================ ...