`

[转] javascript事件触发器fireEvent和dispatchEvent

阅读更多

事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。

一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。

例如在ie下看看这个例子:

//document上绑定自定义事件ondataavailable  
document.attachEvent('ondataavailable', function (event) {  
alert(event.eventType);  
});  
var obj=document.getElementById("obj");  
//obj元素上绑定click事件  
obj.attachEvent('onclick', function (event) {  
alert(event.eventType);  
});  
//调用document对象的createEventObject方法得到一个event的对象实例。  
var event = document.createEventObject();  
event.eventType = 'message';  
//触发document上绑定的自定义事件ondataavailable  
document.fireEvent('ondataavailable', event);  
//触发obj元素上绑定click事件  
document.getElementById("test").onclick = function () {  
obj.fireEvent('onclick', event);  
};  

 fireEvent的官方文档:http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx

createEventObject的官方文档:http://msdn.microsoft.com/en-us/library/ie/ms536390(v=vs.85).aspx

再看看高级浏览器(chrome,firefox等)的例子:

//document上绑定自定义事件ondataavailable  
document.addEventListener('ondataavailable', function (event) {  
alert(event.eventType);  
}, false);  
var obj = document.getElementById("obj");  
//obj元素上绑定click事件  
obj.addEventListener('click', function (event) {  
alert(event.eventType);  
}, false);  
//调用document对象的 createEvent 方法得到一个event的对象实例。  
var event = document.createEvent('HTMLEvents');  
// initEvent接受3个参数:  
// 事件类型,是否冒泡,是否阻止浏览器的默认行为  
event.initEvent("ondataavailable", true, true);  
event.eventType = 'message';  
//触发document上绑定的自定义事件ondataavailable  
document.dispatchEvent(event);  
  
var event1 = document.createEvent('HTMLEvents');  
event1.initEvent("click", true, true);  
event1.eventType = 'message';  
//触发obj元素上绑定click事件  
document.getElementById("test").onclick = function () {  
obj.dispatchEvent(event1);  
};  

 

分享到:
评论

相关推荐

    DispatchEvent

    DispatchEvent

    javascript触发模拟鼠标点击事件

    事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。 一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者...

    event-controller:简单的 JavaScript 事件控制器实现

    概要简单的 JavaScript 事件控制器实现。 类似于 Node.js EventEmitter ,但管理单一事件类型。 用于构建有利于组合而非继承的接口。 可以将事件控制器分配给实例属性,而不是使用继承的EventEmitter 。 管理单个...

    javascript 主动派发事件总结

    2,fireEvent() 这是IE旧版本中实现的触发事件方法,它无须创建事件对象,直接使用。如下 代码如下: element.fireEvent(‘onclick’); 注意:与attachEvent一样它需要加上“on” 一个兼容性所有浏览器的版本,如下 ...

    javascript事件模型代码

    本节稍稍深入地讨论关于事件处理的话题,如果你对模式、闭包和面向对象等概念还不太理解,不妨暂且等阅读完相关... 例如下面就是一个简单的事件处理模式的应用: function dispatchEvent(owner, eventType, event

    读jQuery之十四 (触发事件核心方法)

    在 事件模块的演变 我使用了dispatchEvent(标准) 和fireEvent(IE)来主动触发事件。如下 代码如下: … dispatch = w3c ? function(el, type){ try{ var evt = document.createEvent(‘Event’); evt.initEvent(type,...

    flex dispatchEvent 实例工程

    解压后,有两个flex工程:FlexServer1.1和FlexClient1.1,其中server是java的web工程,用于tomcat部署;client是flashBuilder的工程,主要是显示页面。具体原理参考相应blog。

    详解JavaScript中的自定义事件编写

    与自定义事件的函数有 Event、CustomEvent 和 dispatchEvent。 直接自定义事件,使用 Event 构造函数: var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) {...

    eventdispatcher.js:自定义对象的 JavaScript 事件

    自定义对象的 JavaScript 事件 用法 import { EventDispatcher } from 'EventDispatcher.js' ; // Adding events to custom object class Car extends EventDispatcher { start ( ) { this . dispatchEvent ( { ...

    Unity事件框架->监听派发事件框架插件

    通过该框架可优化事件的操作控制,方便不同脚本间事件的调用,要注意监听要在派发事件之前,否则事件无响应。 监听语句:Model.eventManager.addEventListener(枚举类.ToString(), 方法名); 派发语句:Model.event...

    JavaScript权威指南

    JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...

    javascript 触发HTML元素绑定的函数

    代码如下:if (document.createEvent) { var clickEvent = document....//ff } else if (document.createEventObject) { this.fileEl.dom.fireEvent(“onclick”, document.createEventObject(e.browserEvent));

    Vue自定义事件(详解)

    前面的话 父组件使用props传递数据给子组件,子组件怎么...尽管它们的运行类似,但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的别名 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的

    仅Firefox中链接A无法实现模拟点击以触发其默认行为

    而标准的事件触发可以使用dispatchEvent方法。但现在FF5无法触发了A的默认行为了。如下 代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>Firefox5链接A无法...

    synthetic-dom-events:为内置事件类型创建DOM事件

    合成事件例子 var event = require ( 'synthetic-dom-events' ) ;// event just returns a correctly created dom event object// you are responsible for emitting itvar ev = event ( 'click' , { button : 2 } )...

    代码触发js事件(click、change)示例应用

    Chrome , Firfox 不支持fireEvent的方法可以使用dispatchEvent的方法替代,直接给一个兼容的Code,下面有个不错的示例,喜欢的朋友可以收藏下

    浅谈Vue.js 组件中的v-on绑定自定义事件理解

    尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 下面是一个文档上面的例子: 2017年4月11日...

    网页右键ie不支持event.preventDefault和event.returnValue (需要加window)

    网页右键ie不支持event.preventDefault和event.returnValue (需要加window) ,需要的朋友可以参考一下

    JS中mouseup事件丢失的原因与解决办法

    主要跟大家介绍了关于Javascript中mouseup事件丢失的原因与解决办法的相关资料,文中给出详细的示例代码供大家参考学习,需要的朋友们下面跟着小编一起来学习学习吧。

Global site tag (gtag.js) - Google Analytics