首先使用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的事件模拟的更多相关文章

  1. 浅谈JavaScript的事件(事件模拟)

    事件经常由操作或者通过浏览器功能触发,通过JavaScript也可以触发元素的事件.通过JavaScript触发事件,也称为事件的模拟. DOM中事件模拟 可以document的createEvent ...

  2. 深入理解DOM事件机制系列第四篇——事件模拟

    × 目录 [1]引入 [2]模拟机制 [3]自定义事件 前面的话 事件是网页中某个特别的瞬间,经常由用户操作或通过其他浏览器功能来触发.但实际上,也可以使用javascript在任意时刻来触发特定的事 ...

  3. Javascript高级编程学习笔记(71)—— 模拟事件(1)DOM事件模拟

    事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...

  4. trigger事件模拟

    事件模拟trigger 在操作DOM元素中,大多数事件都是用户必须操作才会触发事件,但有时,需要模拟用户的操作,来达到效果. 需求:页面初始化时触发搜索事件并获取input控件值,并打印输出(效果图如 ...

  5. jquery技巧之让任何组件都支持类似DOM的事件管理

    本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...

  6. 浅谈Javascript事件模拟

    事件是用来描述网页中某一特定有趣时刻的,众所周知事件通常是在由用户和浏览器进行交互时触发,其实不然,通过Javascript可以在任何时间触发特定的事件,并且这些事件与浏览器创建的事件是相同的.这就意 ...

  7. Javascript高级编程学习笔记(72)—— 模拟事件(2)IE事件模拟

    IE中的事件模拟 低版本的IE浏览器作为前端开发的一股清流,想避过都不行 虽然低版本IE正在逐步被市场淘汰,不得不承认IE8以下的浏览器依然占了不小的份额 所以这里大概介绍IE8以下的低版本IE中的事 ...

  8. JavaScript 事件——“模拟事件”的注意要点

    DOM中的事件模拟 三个步骤: 首先通过document.createEvent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串: UIEvents(DOM3中的UIEvent ...

  9. zepto | 用事件委托去解决无法给新增添的DOM添加事件的问题

    前段时间在做一个任务的时候,碰见了一个问题:zepto无法用on事件去监听新增加的dom事件.这个问题用live可解决, 但是live在ios下失效,为了解决这个问题,我采用了暴力的方法去解决,每次添 ...

随机推荐

  1. cocoapods安装及使用

    最近新换了电脑,重新安装cocoapods遇到了很多问题,在这里把问题还有解决方案记录一下 一.安装Cocoapods 在安装CocoaPods之前,首先要在本地安装好Ruby环境,一般Mac下都自带 ...

  2. 如何去掉dede列表推荐时标题被加粗

    dede在列表推荐文章默认为加粗不清楚的可以看图: 那个加黑的是默认的.如果你不想要被加黑,可以做如下改动.在include里找到文件:arc.listview.class.php查找并删除(注释掉也 ...

  3. Codeforces Round #384 (Div. 2) 734E Vladik and cards

    E. Vladik and cards time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. indexOf、instanceOf、typeOf、valueOf详解

    1.indexOf() 该方法用来返回某个指定的字符串值在字符串中首次出现的位置. 语法:indexOf(searchvalue,fromindex);两个参数,参数一表示查询的字符串值,参数二可选表 ...

  5. java 解析并生成 XML

    在 java 中使用 Dom4j 解析 XML 对 XML 文件的解析,通常使用的是 Dom4j 和 jdom 作为XML解析工具. 在此只介绍下 Dom4j 对 XML 文件的解析使用方法. 1. ...

  6. 多个table切换 getElementsByClassName

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. VS调试程序时一闪而过的问题-解决方法(网上搜集)

    在VS2012里的控制台应用程序在运行时,结果画面一闪而过,不管是用F5 还是用Ctrl + F5都是一样,导致无法看到结果. 网上有不少的办法,说是都是在程序最后加一个要程序暂停的语句或从控制台上获 ...

  8. USACO翻译:USACO 2014 DEC Silver三题

    USACO 2014 DEC SILVER 一.题目概览 中文题目名称 回程 马拉松 奶牛慢跑 英文题目名称 piggyback marathon cowjog 可执行文件名 piggyback ma ...

  9. iOS单例详解

    单例:整个程序只创建一次,全局共用. 单例的创建 // SharedPerson.h 文件中 + (instancetype)share; // SharedPerson.m 文件中 static S ...

  10. SQL——行值表达式(Row Value Expressions)

    概述 最近接触了一个新概念——行值表达式,也叫做行值构造器.这是一个很强大的SQL功能,通常我们所操作的SQL表达式都只能针对一行中的单一字段进行操作比较,而行值表达式可以针对一行中的多个字段进行操作 ...