`

[转] 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);  
};  

 

分享到:
评论

相关推荐

    javascript的事件触发器介绍的实现

    JavaScript事件触发器是在编程中用于模拟用户交互的机制,它允许开发者在程序中手动触发绑定在DOM元素上的事件处理器。事件触发器在多种场景下都非常有用,比如自动化测试、框架开发、自定义事件触发等。 在...

    IE的fireEvent方法概述及应用

    事件冒泡是JavaScript事件模型的一个重要特性,它允许事件从子元素向上层元素传播,使得父元素可以捕获和处理子元素的事件。然而,`onclick()`方法不会触发这种冒泡行为,除非事件处理函数在元素本身中定义。 总结`...

    2.01 JavaScript基础事件以及Event对象(原生态).pdf

    本文将详细介绍 JavaScript 中的基础事件和 Event 对象,包括事件的定义、EventTarget 接收事件接口、addEventListener、removeEventListener、dispatchEvent 方法 serta JavaScript 中常用的事件等。 事件的定义 -...

    javascript触发模拟鼠标点击事件

    本文详细介绍了如何使用JavaScript来触发模拟的鼠标点击事件,并提供了IE浏览器和其他现代浏览器(例如Chrome、Firefox)中实现的示例代码。 首先,要理解事件触发器的概念。事件触发器是一种机制,它使得开发者...

    JavaScript之IE的fireEvent方法详细解析

    JavaScript中的`fireEvent`方法是Internet Explorer浏览器特有的一个事件触发函数,它允许开发者模拟用户对DOM元素的操作,比如点击、提交等。与标准的事件处理方式不同,`fireEvent`在某些情况下能触发事件冒泡,...

    javascript事件查询综合

    JavaScript事件查询是Web开发中的重要概念,它涉及到用户与网页交互时的各种响应处理。这篇文档“javascript事件查询综合”很可能是对JavaScript事件处理机制的详细阐述。在Web开发中,JavaScript事件模型允许开发者...

    javascript事件模型代码

    JavaScript事件模型是JavaScript编程中处理用户交互和状态变化的核心机制。事件模型允许程序在特定条件满足时执行预定的代码,比如用户点击按钮、页面加载完成或数据发生变化等。本节将详细探讨JavaScript事件处理...

    EventDispatcher,js事件派发器,javascript事件派发器

    在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中,我们可以理解这是一个JavaScript实现的事件派发器,可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统(Issue)报告任何发现的错误...

    Firefox不支持click方法的解决

    如果不支持,则使用 fireEvent 方法来触发 onclick 事件。如果都不支持,则使用 createEvent 方法来创建一个点击事件,并使用 dispatchEvent 方法来触发该事件。 需要注意的是,在 Firefox 浏览器中,对于非 input ...

    DispatchEvent

    DispatchEvent 是一个在软件开发,特别是Java编程语言中与事件处理相关的概念。它涉及到用户界面(UI)组件之间的通信,特别是在事件驱动的系统中。在这样的系统中,用户操作(如点击按钮或输入数据)会触发事件,...

    javascript事件大集合

    本文将深入探讨JavaScript事件的各个方面,帮助开发者更好地理解和应用这些关键概念。 一、事件概述 事件是用户或浏览器执行的特定动作,如点击按钮、滚动页面、提交表单等。在JavaScript中,我们可以通过监听这些...

    javascript之自定义事件

    在JavaScript中,自定义事件的核心是事件对象和事件监听器。首先,我们需要创建一个表示事件的类,这个类通常包含事件类型、数据和其他相关信息。例如,在`BaseEvent.js`中,可能会有一个构造函数来初始化事件类型和...

    实验8 JavaScript事件处理(4学时).zip

    JavaScript事件处理是Web开发中的核心概念,它使得用户与网页之间的交互变得更加动态和响应性。在本实验“实验8 JavaScript事件处理(4学时)”中,我们将深入探讨这一主题,学习如何通过JavaScript来响应用户的操作...

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

    在文章中提到的两种传统方法分别是dispatchEvent和fireEvent。dispatchEvent是符合W3C标准的方法,主要适用于现代浏览器,它通过document.createEvent('Event')创建一个新的事件对象,并通过initEvent方法初始化事件...

    JavaScript的事件操作

    JavaScript是Web开发中不可或缺的一部分,尤其在用户...同时,随着Web技术的发展,新的事件和API不断涌现,如Pointer Events、Intersection Observer等,持续学习和适应这些新特性是保持前端技能与时俱进的重要途径。

    javascript 操作xml的所有属性事件方法和实例

    本文将深入探讨JavaScript如何操作XML的所有属性、事件和方法,并通过实例来阐述其用法。 一、JavaScript与XML的交互 1. 创建XML对象:在JavaScript中,可以使用`ActiveXObject`(仅限IE)或`DOMParser`(跨浏览器...

    在Internet Explorer 11、10、9中手动触发JavaScript事件

    通过理解并运用上述知识,开发者能够在Internet Explorer 11、10、9以及支持W3C标准的浏览器中有效地手动触发JavaScript事件,从而创建更加灵活和交互性强的Web应用。同时,对事件处理的深入理解也有助于优化代码...

Global site tag (gtag.js) - Google Analytics