JavaScript中的模拟事件和自定义事件实例分析


Posted in Python onJuly 27, 2018

本文实例讲述了JavaScript中的模拟事件和自定义事件。分享给大家供大家参考,具体如下:

前面介绍了JavaScript中为事件指定处理程序的五种方式和JavaScript的事件对象event。

下面介绍JavaScript中的模拟事件和自定义事件。

1、DOM中的事件模拟

1) DOM中的事件模拟有以下3个步骤:

步骤1:创建事件对象event

可以在document对象上使用createEvent()方法创建event对象,此方法接收一个参数,即要创建的事件类型的字符串。在DOM2级中这些字符串都使用英文复数形式,而在DOM3级中都变成了单数。这个字符串可以是以下几个字符串之一:

UIEvents:一般化的UI事件,鼠标事件和键盘事件都继承自UI事件,DOM3级中是UIEvent

MouseEvents:一般化的鼠标事件,DOM3级中是MouseEvent

MutationEvents:一般化的DOM变动事件,DOM3级中是MutationEvent

HTMLEvents:一般化的HTML事件,没有对应的DOM3级事件,被分散到 其他类别中。

步骤2:初始化事件对象

使用与事件有关的信息对其进行初始化,每种类型的event对象都有一个特殊的方法,为它传入适当的数据就可以初始化该event对象,不同类型的方法的名字也不相同,具体要取决于createEvent()中使用的参数。

步骤3:触发事件

使用dispatch()方法,此方法接收一个参数,即要触发事件的event对象。

2) 模拟鼠标事件:

使用createEvent()方法创建event对象,传入字符串"MouseEvents",返回的对象有一个名为initMouseEvent()方法,用于指定与该鼠标事件有关的信息。

模拟按钮的单击事件:

var btn = document.getElementsByTagNames("button")[0];
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, 0, null);
btn.dispatchEvent(event);

3) 模拟键盘事件:

使用createEvent()方法创建event对象,传入字符串"KeyboardEvent",返回的对象有一个名为initKeyboardEvent()方法。

DOM2级事件并没有专门规定键盘事件,后来的DOM3级事件才正式将其作为一种事件给出规定。IE9是目前唯一支持DOM3级键盘事件的浏览器,但其他浏览器也可以模拟键盘事件。

在使用createEvent()方法之前,需要先检测浏览器是否支持DOM3级事件。

模拟按住Shift的同时又按下A键:

var text = document.getElementsByTagNames("input")[0];
if (document.implementation.hasFeature("KeyboardEvents", 3.0) {
  var event = document.createEvent("KeyboardEvent");
  event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0);
}
text.dispatchEvent(event);

4) 模拟其他事件:

① 模拟变动事件:

使用createEvent()方法创建event对象,传入字符串"MutationEvents",返回的对象有一个名为initMutationEvent()的方法。

var event = document.createEvent("MutationEvents");
event.initMutationEvent("DOMNodeInserted", true, false, someNode, "", "", "", 0);
target.dispatchEvent(event);

② 模拟HTML事件:

使用createEvent()方法创建event对象,传入字符串"HTMLEvents",返回的对象有一个名为initMutationEvent()的方法。

var event = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false);
target.dispatchEvent(event);

5) 自定义DOM事件:

DOM3级还定义了自定义事件。自定义事件不是由DOM原生触发的,目的是让开发人员创建自己的事件。

创建自定义事件,可以使用createEvent("CustomEvent")方法,返回的对象有一个名为initCustomEvent()的方法,接收如下4个参数:

type(字符串):事件类型;

bubbles(布尔值):时间是否应该冒泡;

cancelable(布尔值):表示事件是否可以取消;

detail(对象):任意值,保存在event对象的detail属性中。

var div = document.getElementsByTagNames("div")[0];
EventUtil.addHandler(div, "myEvent", function(event) {
  alert("div:" + event.detail);
});
EventUtil.addHandler(document, "myEvent", function(event) {
  alert("document:" + event.detail);
});
if (document.implementation.hasFeature("CustomEvents", 3.0) {
  var event = document.createEvent("CustomEvent");
  event.initCustomEvent("myEvent", true, false, "Hello world");
}
div.dispatchEvent(event);

单击div会输出:

div:Hello world
document:Hello world

单击document会输出:

document:Hello world

2、IE中的事件模拟

IE中的事件模拟有以下3个步骤:

① 使用document.createEventObject()方法在IE中创建event对象,与DOM不同的是,此方法不接受参数,结果会返回一个通用的event对象。

② 为event对象手动添加所有必要的信息,没有方法来辅助添加。

③ 在目标上使用fireEvent()方法,此方法接收两个参数:事件处理程序的名称和event对象。在调用fireEvent()方法时,会自动为event对象添加srcElementtype属性,其他属性则必须手动添加。

在IE中,模拟任何事件都采用相同的模式。

模拟click事件:

var btn = document.getElementsByTagNames("button")[0];
var event = document.createEventObject();
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY = 0;
event.strlKey = false;
event.altKey = false;
event.shiftKey = false;
Event.button = 0;
btn.fireEvent("onclick", event);

模拟keypress事件:

var text = document.getElementsByTagNames("input")[0];
var event = document.createEventObject();
event.strlKey = false;
event.altKey = false;
event.shiftKey = false;
Event.keyCode = 65;
btn.fireEvent("onkeypress", event);

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

希望本文所述对大家JavaScript程序设计有所帮助。

Python 相关文章推荐
Python类的定义、继承及类对象使用方法简明教程
May 08 Python
Python中的异常处理相关语句基础学习笔记
Jul 11 Python
Python 装饰器深入理解
Mar 16 Python
Python Flask-web表单使用详解
Nov 18 Python
对pyqt5多线程正确的开启姿势详解
Jun 14 Python
Python 实现数据结构-循环队列的操作方法
Jul 17 Python
Python操作注册表详细步骤介绍
Feb 05 Python
python-sys.stdout作为默认函数参数的实现
Feb 21 Python
记一次django内存异常排查及解决方法
Aug 07 Python
如何利用python之wxpy模块玩转微信
Aug 17 Python
python删除文件、清空目录的实现方法
Sep 23 Python
python 读取串口数据的示例
Nov 09 Python
浅谈tensorflow中几个随机函数的用法
Jul 27 #Python
tensorflow 中对数组元素的操作方法
Jul 27 #Python
Python读取excel中的图片完美解决方法
Jul 27 #Python
tensorflow实现图像的裁剪和填充方法
Jul 27 #Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
Jul 27 #Python
对Tensorflow中的矩阵运算函数详解
Jul 27 #Python
python+influxdb+shell编写区域网络状况表
Jul 27 #Python
You might like
php简单的会话类代码
2011/08/08 PHP
PHP中的Memcache详解
2014/04/05 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
php读取本地json文件的实例
2018/03/07 PHP
JavaScript的Cookies
2008/01/16 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
Cython 三分钟入门教程
2009/09/17 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
Pytorch之contiguous的用法
2019/12/31 Python
Django更新models数据库结构步骤
2020/04/01 Python
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
司机个人年终总结
2015/03/03 职场文书
会议通知格式范文
2015/04/15 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
九年级历史教学反思
2016/02/19 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python