IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

javascript事件触发器fireEvent和dispatchEvent

WEB前端开发 2013-01-08 13:00:53 累计浏览 5,774 次
本机暂存

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

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

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

01//document上绑定自定义事件ondataavailable
02document.attachEvent('ondataavailable', function (event) {
03alert(event.eventType);
04});
05var obj=document.getElementById("obj");
06//obj元素上绑定click事件
07obj.attachEvent('onclick', function (event) {
08alert(event.eventType);
09});
10//调用document对象的createEventObject方法得到一个event的对象实例。
11var event = document.createEventObject();
12event.eventType = 'message';
13//触发document上绑定的自定义事件ondataavailable
14document.fireEvent('ondataavailable', event);
15//触发obj元素上绑定click事件
16document.getElementById("test").onclick = function () {
17obj.fireEvent('onclick', event);
18};

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等)的例子:

01//document上绑定自定义事件ondataavailable
02document.addEventListener('ondataavailable', function (event) {
03alert(event.eventType);
04}, false);
05var obj = document.getElementById("obj");
06//obj元素上绑定click事件
07obj.addEventListener('click', function (event) {
08alert(event.eventType);
09}, false);
10//调用document对象的 createEvent 方法得到一个event的对象实例。
11var event = document.createEvent('HTMLEvents');
12// initEvent接受3个参数:
13// 事件类型,是否冒泡,是否阻止浏览器的默认行为
14event.initEvent("ondataavailable", true, true);
15event.eventType = 'message';
16//触发document上绑定的自定义事件ondataavailable
17document.dispatchEvent(event);

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,347)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,401)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,932)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,846)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,761)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,222)
  8. 什么是全栈工程师? (累计阅读 14,035)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,734)
  10. 7 天打造前端性能监控系统 (累计阅读 11,187)