js原生创建模拟事件和自定义事件的方法
让我万万没想到的是,原来《JavaScript高级程序设计(第3版)》里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法.
模拟鼠标事件
MDN上已经说得很清楚,尽管为了保持向后兼容MouseEvent.initMouseEvent()仍然可用,但是呢,我们应该使用MouseEvent().
我们使用如下页面做测试<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
<style>
.button {
width: 200px;
height: 200px;
background-color: antiquewhite;
margin: 20px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="button">Button</div>
<script>
"use strict";
var btn = document.querySelector('.button');
btn.addEventListener('click', function (event) {
console.log('OH~!You clicked me~!');
}, false);
var ev = new MouseEvent('click', {
cancelable: true,
bubble: true,
view: window
});
btn.dispatchEvent(ev);
</script>
</body>
</html>打开一下这个页面,并且在打开控制台的情况下,你就可以看到控制台打印了一句话,证明模拟成功了.
如下图所示:
Screenshot from 2015-05-19 12:20:40.png当然,在构建这个MouseEvent对象的时候还是有很多属性可以填写的,不过,可能就是示例的那几个比较有用,如果像查看更多的属性,请查看如下地址
(由于MouseEvent继承自UIEvent和Event,所以,他也继承了他们的属性)
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
https://developer.mozilla.org/en-US/docs/Web/API/Event
想查看MouseEvent()构造器的具体用法,请查看
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent模拟键盘事件
打开控制台,并且重新载入页面,你就可以看到控制台打印了字母'A'<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
<style>
.button {
width: 200px;
height: 200px;
background-color: antiquewhite;
margin: 20px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="button">Button</div>
<script>
"use strict";
var btn = document.querySelector('.button');
document.addEventListener('keyup', function (event) {
console.log(String.fromCharCode(event.keyCode));
}, false);
var ev = new KeyboardEvent('keyup', {
keyCode: 65
});
document.dispatchEvent(ev);
</script>
</body>
</html>如下是KeyBoardEvent的详细说明
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent自定义事件
自定义事件有两种方法,一种是使用new Event(),另一种是new customEvent()new Event()
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
<style>
.button {
width: 200px;
height: 200px;
background-color: antiquewhite;
margin: 20px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="button">Button</div>
<script>
"use strict";
var btn = document.querySelector('.button');
var ev = new Event('test', {
bubbles: 'true',
cancelable: 'true'
});
btn.addEventListener('test', function (event) {
console.log(event.bubbles);
console.log(event.cancelable);
console.log(event.detail);
}, false);
btn.dispatchEvent(ev);
</script>
</body>
</html>运行效果如下所示,请先注意,event.detail的值为undefined
Screenshot from 2015-05-19 12:37:01.pngnew customEvent()
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
<style>
.button {
width: 200px;
height: 200px;
background-color: antiquewhite;
margin: 20px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="button">Button</div> <script>
"use strict";
var btn = document.querySelector('.button'); var ev = new CustomEvent('test', {
bubbles: 'true',
cancelable: 'true',
detail: 'tcstory'
});
btn.addEventListener('test', function (event) {
console.log(event.bubbles);
console.log(event.cancelable);
console.log(event.detail);
}, false);
btn.dispatchEvent(ev);
</script>
</body>
</html>效果如下图
Screenshot from 2015-05-19 12:40:30.png可以很明显的看到,其实new customEvent()比new Event()多了可以在event.detail属性里携带自定义数据的功能(event.detail的值为tcstory),这就是差别了.
Event()的详细说明
https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
customEvent() 的详细说明
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
总结下来发现,除了模拟自定义事件比较有用的话,模拟鼠标事件和键盘事件则好像有点坑和不一致性.以模拟键盘事件来说吧.
KeyboardEvent.key在MDN上的文档被提示为推荐使用的属性,而KeyboardEvent.keyCode却被说成是不推荐使用的,应该使用key属性,然而你去看KeyboardEvent.key的文档就会发现,这个属性压根就没得到多少浏览器的支持,如果用这个属性,简直就是掉坑里了.
下图所示,一大片的红字啊
原文链接：http://www.jianshu.com/p/418e9e35d5a1
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
js原生创建模拟事件和自定义事件的方法的更多相关文章
- javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）
1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div&g ...
- jQuery-3.事件篇---自定义事件
jQuery自定义事件之trigger事件 众所周知类似于mousedown.click.keydown等等这类型的事件都是浏览器提供的,通俗叫原生事件,这类型的事件是需要有交互行为才能被触发. 在j ...
- 63.ExtJs事件（自定义事件、on、eventManager）示例
转自:https://blog.csdn.net/leadergg/article/details/5927614?utm_source=blogxgwz5 ExtJs事件(自定义事件.on.even ...
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...
- jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件
很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...
- Angular4.x Event (DOM事件和自定义事件)
Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)=&qu ...
- Spring容器事件、自定义事件
Spring容器内置事件,如容器的启动.停止.关闭.销毁等事件 <bean name="contextStartedHandler" class="com.nuts ...
- jQuery事件之自定义事件
其实事件的bind和unbind,都是为了自定义事件做准备. 语法: $(selector).trigger(type, data); 作用:在每一个匹配的元素上触发某类事件,它触发的是由bind() ...
随机推荐
- Nginx 默认配置解析
# For more information on configuration, see: # * Official English Documentation: http://nginx.org/e ...
- Bzoj1917 [Ctsc2010]星际旅行
Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 185 Solved: 118 Description 公元3000年,地球联盟已经攻占了银河系内的N ...
- unet中可视性检查的一些笔记
最近在尝试用unet做一个局域网游戏,游戏的核心概念在于玩家之间的发现和隐蔽,有个类似于战争迷雾的机制. 实现该机制最关键的是实现可视性检查.首先是unet中默认的一个可视性检查,由组件Network ...
- 下拉列表 JComboBox 的使用
下拉列表(JComboBox)通常显示一个可选条目,允许用户在一个下拉列表中选择不同条目,用户也可以在文本区内输入选择项. package first; import java.awt.FlowLay ...
- [bzoj3226][Sdoi2008]校门外的区间——线段树
题目 略 题解 直接套黄学长模板. Orz 代码 #include <bits/stdc++.h> using namespace std; #define ll long long #d ...
- react native windows 搭建（完整版）
声明:用windows 搭建的react native只能开发安卓应用 1.准备安装java jdk,以及Android SDK 传送门: java JDK Android SDK(自行寻找) ...
- PL/SQL 01 代码编写规则
1.标识符命名规则当在 PL/SQL 中使用标识符定义变量.常量时,标识符名称必须以字符开始,并且长度不能超过 30 个字符.另外,为了提高程序的可读性,Oracle 建议用户按照以下规则定义各种标识 ...
- codeforces 739D
这题码量好大…… 首先思考如何构造,不难找到一下两个条件 1. 在长度为i的环上的点一定是i的倍数个 2. 到达长度i的环的点集距离一定是连续的 第一个条件是很好搞的,关键是第二个条件. 因为存在着x ...
- 只用120行Java代码写一个自己的区块链-3挖矿算法
在本系列前两篇文章中,我们向大家展示了如何通过精炼的Java代码实现一个简单的区块链.包括生成块,验证块数据,广播通信等等,这一篇让我们聚焦在如何实现 PoW算法. 大家都无不惊呼比特币.以太坊及其他 ...
- opencv中CV_IMAGE＿ＥＬＥＭ的用法读取每个像素
可以使用OpenCV定义的宏来提取象素值假设灰度图像image,存取其i行j列的象素可以这样:CV_IMAGE_ELEM(image, uchar,y, x)如果是彩色图像就是CV_IMAGE_ELE ...