转自:https://www.cnblogs.com/tiger95/p/6962059.html
事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。
一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。
例如在ie下看看这个例子:
01 |
//document上绑定自定义事件ondataavailable |
02 |
document.attachEvent( 'ondataavailable' , function (event) { |
03 |
alert(event.eventType); |
05 |
var obj=document.getElementById( "obj" ); |
07 |
obj.attachEvent( 'onclick' , function (event) { |
08 |
alert(event.eventType); |
10 |
//调用document对象的createEventObject方法得到一个event的对象实例。 |
11 |
var event = document.createEventObject(); |
12 |
event.eventType = 'message' ; |
13 |
//触发document上绑定的自定义事件ondataavailable |
14 |
document.fireEvent( 'ondataavailable' , event); |
16 |
document.getElementById( "test" ).onclick = function () { |
17 |
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等)的例子:
01 |
//document上绑定自定义事件ondataavailable |
02 |
document.addEventListener( 'ondataavailable' , function (event) { |
03 |
alert(event.eventType); |
05 |
var obj = document.getElementById( "obj" ); |
07 |
obj.addEventListener( 'click' , function (event) { |
08 |
alert(event.eventType); |
10 |
//调用document对象的 createEvent 方法得到一个event的对象实例。 |
11 |
var event = document.createEvent( 'HTMLEvents' ); |
13 |
// 事件类型,是否冒泡,是否阻止浏览器的默认行为 |
14 |
event.initEvent( "ondataavailable" , true , true ); |
15 |
event.eventType = 'message' ; |
16 |
//触发document上绑定的自定义事件ondataavailable |
17 |
document.dispatchEvent(event); |
19 |
var event1 = document.createEvent( 'HTMLEvents' ); |
20 |
event1.initEvent( "click" , true , true ); |
21 |
event1.eventType = 'message' ; |
23 |
document.getElementById( "test" ).onclick = function () { |
24 |
obj.dispatchEvent(event1); |
在实际封装中没这么简单,看了一下jQuery.event.trigger的源码(http://www.css88.com/tool/jQuerySourceViewer/#v=1.7.2&fn=jQuery.event.trigger),是通过模拟来实现了,给某元素绑定一个事件处理函数,如果有触发事件的实际操作就会执行相应的事件处理函数,所以要达到事件触发器的功能只要获取到相应的事件处理函数然后执行。
- javascript事件触发器fireEvent和dispatchEvent
javascript事件触发器fireEvent和dispatchEvent 事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等) ...
- js事件触发器 dispatchEvent()
[其实就是自动触发事件,而非手动(交互)触发事件] dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触发器来使用的,那么什么是事件触发器?就是触发事件的东西.可能有人 ...
- js 事件之 createEvent、dispatchEvent
//document上绑定自定义事件ondataavailable document.addEventListener('customevent', function(event) { alert(e ...
- 事件触发器-----dispatchEvent
不要被标题蒙蔽了,今天的重点不是论述事件触发器,而是说一下dispatchEvent这个东西.好了,先简单做个铺垫,dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触 ...
- Node.js精进(4)——事件触发器
Events 是 Node.js 中最重要的核心模块之一,很多模块都是依赖其创建的,例如上一节分析的流,文件.网络等模块. 比较知名的 Express.KOA 等框架在其内部也使用了 Events 模 ...
- js事件相关面试题
说是面试题,其实也相当于是对js事件部分知识点的一个总结.简单内容一笔带过,了解详情我都给出了参考链接,都是之前写的一些相关文章.JavaScript本身没有事件模型,但是环境可以有. DOM:add ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- JS事件监听器
JS事件监听器 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Javasc ...
- Js 事件基础
一:js中常见得事件 (1) : 鼠标事件 click :点击事件 dblclick :双击事件 contextmenu : 右键单击事件 ...
随机推荐
- UVA 11578 - Situp Benches(dp)
题目链接:11578 - Situp Benches 题意:健♂身♂房有两个仰卧起坐坐垫,每次调整角度要花费10元/10度,每次使用要花费15,如今给定n个人的时间顺序,和所希望的角度,求最少花费 思 ...
- WeX5开发指南
WeX5入门.UI2开发.App开发.服务端开发.扩展资料学习. 1 新手入门 1.1 运行WeX5的demo(视频) 1.2 App开发.调试.打包部署完整过程(视频) 1.3 创建第一个应用(视频 ...
- 笔记03 MVVM 开发的几种模式(WPF)
转自http://www.cnblogs.com/buptzym/p/3220910.html 在WPF系(包括SL,WP或者Win8)应用开发中,MVVM是个老生常谈的问题.初学者可能不会有感觉,但 ...
- 英特尔和Red Hat合作实现Gnome桌面的Wayland支持
在发布支持XMir的Linux图形驱动程序xf86-video-intel 2.99.901后数天,英特尔宣布撤回对XMir的支持,XMir补丁不会合并到上游项目.XMir是Mir显示服务器的X11兼 ...
- HDU 2102 A计划 (BFS)
A计划 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- 运维基础-Linux发展史、安装、基本操作
Linux是目前互联网运维.大数据.云计算方向首选操作系统平台,能够在物理服务器Dell.hp.等server,以及当前主流的云平台,阿里云,腾讯云上面部署 发展史 . . .略过..... 物理服务 ...
- iOS 7 中 StoryBoard 总体缩放
iOS 7 中 StoryBoard 总体缩放 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用 ...
- 在zend framework框架中try{}catch(Exception e){}的跳转问题
请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 首先我先说明我遇到的问题 try{ //导入学生信息 $ModelStudent->insert($dat ...
- WPF触发器(Trigger、DataTrigger、EventTrigger)
WPF中有种叫做触发器的东西(记住不是数据库的trigger哦).它的主要作用是根据trigger的不同条件来自动更改外观属性,或者执行动画等操作. WPFtrigger的主要类型有:Trigger. ...
- 【iOS开发】---- UIView动画
iOS 动画UIView动画 原文:http://www.cocoachina.com/bbs/read.php?tid=110168 1.概述 UIKit直接将动画集成到UIView类中,实现简 ...