Notes:DOM的事件模拟
首先使用document对象的createEvent方法创建一个事件对象,然后初始化该事件对象,接着使用支持事件DOM节点的dispatchEvent方法触发事件。
DOM2级事件和DOM3级事件有些不同,如下图所示,DOM2传给createEvent方法的字符串为英文复数,而DOM3则为单数。
下面为一个模拟点击事件的代码
show.addEventListener('click',function(e){
console.log('click');
},!1);
show.addEventListener('keydown',function(e){
console.log('keydown');
},!1)
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click',!0,!0,document.defaultView);
show.dispatchEvent(event); var keyEvent = document.createEvent('KeyboardEvent');
keyEvent.initKeyboardEvent('keydown',!0,!0,document.defaultView);
show.dispatchEvent(keyEvent);
也可以使用各种事件的构造函数来做,例如使用CustomEvent构造函数自定义事件,如下所示
var customEvent = new CustomEvent('test',{detail:"hello world"});
show.dispatchEvent(customEvent);
在ie9及以上不能使用构造函数来做,但是可以通过pollfill来做,如下所示
(function(){
function CustomEvent(type,optional){
optional = optional || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(type,optional);
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
IE8及以下模拟事件
同样,首先创建一个event对象(document.createEventObject),然后初始化该对象,再触发该事件(fireEvent),下面为一个点击事件的例子
var event = document.createEventObject();
//初始化事件对象
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY = 0;
event.ctrlKey = false;
event.altKey = false;
show.fireEvent('onclick',event);
Notes:DOM的事件模拟的更多相关文章
- 浅谈JavaScript的事件(事件模拟)
事件经常由操作或者通过浏览器功能触发,通过JavaScript也可以触发元素的事件.通过JavaScript触发事件,也称为事件的模拟. DOM中事件模拟 可以document的createEvent ...
- 深入理解DOM事件机制系列第四篇——事件模拟
× 目录 [1]引入 [2]模拟机制 [3]自定义事件 前面的话 事件是网页中某个特别的瞬间,经常由用户操作或通过其他浏览器功能来触发.但实际上,也可以使用javascript在任意时刻来触发特定的事 ...
- Javascript高级编程学习笔记(71)—— 模拟事件(1)DOM事件模拟
事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...
- trigger事件模拟
事件模拟trigger 在操作DOM元素中,大多数事件都是用户必须操作才会触发事件,但有时,需要模拟用户的操作,来达到效果. 需求:页面初始化时触发搜索事件并获取input控件值,并打印输出(效果图如 ...
- jquery技巧之让任何组件都支持类似DOM的事件管理
本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...
- 浅谈Javascript事件模拟
事件是用来描述网页中某一特定有趣时刻的,众所周知事件通常是在由用户和浏览器进行交互时触发,其实不然,通过Javascript可以在任何时间触发特定的事件,并且这些事件与浏览器创建的事件是相同的.这就意 ...
- Javascript高级编程学习笔记(72)—— 模拟事件(2)IE事件模拟
IE中的事件模拟 低版本的IE浏览器作为前端开发的一股清流,想避过都不行 虽然低版本IE正在逐步被市场淘汰,不得不承认IE8以下的浏览器依然占了不小的份额 所以这里大概介绍IE8以下的低版本IE中的事 ...
- JavaScript 事件——“模拟事件”的注意要点
DOM中的事件模拟 三个步骤: 首先通过document.createEvent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串: UIEvents(DOM3中的UIEvent ...
- zepto | 用事件委托去解决无法给新增添的DOM添加事件的问题
前段时间在做一个任务的时候,碰见了一个问题:zepto无法用on事件去监听新增加的dom事件.这个问题用live可解决, 但是live在ios下失效,为了解决这个问题,我采用了暴力的方法去解决,每次添 ...
随机推荐
- 分布式系统:怎么简单地解释Paxos算法?从二段提交、三段提交讲到Paxos
原文:https://www.quora.com/Distributed-Systems/What-is-a-simple-explanation-of-the-Paxos-algorithm 作者: ...
- List<T>Find方法,FindAll方法,Contains方法,Equals方法
假如传入的T是一个类, List<MessageInfos> MessageInfos = new List<MessageInfos>(); MessageInfos= Me ...
- Flask 重新认识
总是觉的学习东西有点猴子掰玉米的感觉.今天就重新再掰一次吧. Installation: 安装之前建议先安装virtualenv,这个东东是帮助你在多个python版本之间保持同步,不至于python ...
- 深入浅出 妙用Javascript中apply、call、bind
apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...
- hexo建个人博客
已经在腾讯云获得了域名和服务器,想着既然已经这样了,就折腾折腾自己的个人博客主页吧. 考虑再三决定用github pages来实现我的博客.github Pages可以被认为是用户编写的.托管在git ...
- Eclipse更新SDK速度慢,解决办法
在SDK Manager -> tools -> options中: HTTP Proxy Server: mirrors.neusoft.edu.cn HTTP Proxy Port: ...
- Android中Intent的用法总结
Intent只在Android中特有,我把它比作一种运载工具,就像飞机一样,会把一些人带到某个地方,而且如果需要的话,还可以找到机上有哪些人员(数据),这就需要另外一些设备来支持(如:Bundle), ...
- Android 开发快速导引:Android程序框架【草】
概述 学习一项新技术之前要先了解这个技术的整体框架,这里先简单说一下 Android 的程序结构. Android App 有四个顶层的类:Activity.Service.ContentProvid ...
- SQLite 预写式日志
SQLite在3.7.0版本引入了WAL (Write-Ahead-Logging),WAL的全称是Write Ahead Logging,它是很多数据库中用于实现原子事务的一种机制,引入WAL机制之 ...
- 我的ORM汇总
MyOql是我写的ORM,目前仅支持 MSSql2005+ ,从2009年到今天,已使用过不少项目,之后会写 其它关系数据库的解析器: MySql,Sqlite,Oracle 等. 代码地址(最新版) ...