不要被标题蒙蔽了,今天的重点不是论述事件触发器,而是说一下dispatchEvent这个东西。好了,先简单做个铺垫,dispatchEvent是作为高级浏览器(如chrome、Firfox等)的事件触发器来使用的,那么什么是事件触发器?就是触发事件的东西。可能有人觉得有点莫名其妙,触发事件不是在交互中被触发的吗?的确,通常情况下,事件的触发都是由用户的行为如点击、刷新等操作实现,但是,其实有的情况下,事件的触发必须又程序来实现,比如ajax框架的一些自定义事件。正如事件的绑定一样,对于浏览器而言,绑定事件分为高级浏览器和IE浏览器两派,事件触发器也是分为高级浏览器和IE两派,而dispatchEvent正是用于高级浏览器的事件触发。下面看我整理的一个触发事件的例子:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> </body>
<script type="text/javascript">
//document上绑定自定义事件oneating
document.addEventListener('oneating', function (event) {
alert(event.mingzi+','+event.message);
}, false); //创建event的对象实例。
var event = document.createEvent('HTMLEvents');
// 3个参数:事件类型,是否冒泡,是否阻止浏览器的默认行为
event.initEvent("oneating", true, true);
/*属性,随便自己定义*/
event.mingzi = 'hello,我是李小贱';
event.message = '我今天24岁'; //触发自定义事件oneating
document.dispatchEvent(event);
</script>
</html>

dispatchEvent大概就是这三步,上面的例子结果是:在页面载入的时候,会弹出提示框,也就是触发了oneating这个自定义事件。下面看看据说来自司徒正美的一段代码:

var fireEvent = function(element,event){
if (document.createEventObject){
// IE浏览器支持fireEvent方法
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else{
// 其他标准浏览器使用dispatchEvent方法
var evt = document.createEvent( 'HTMLEvents' );
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
}
};

document.creatEventObject()是IE创建event对象实例的方法,和document.creatEvent('HTMLEvents')在非IE主流浏览器下的作用相同,fireEvent是IE下的事件触发器,与dispatchEvent在非IE主流浏览器下作用相同。

事件触发器-----dispatchEvent的更多相关文章

  1. js事件触发器 dispatchEvent()

    [其实就是自动触发事件,而非手动(交互)触发事件] dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触发器来使用的,那么什么是事件触发器?就是触发事件的东西.可能有人 ...

  2. js事件触发器fireEvent和dispatchEvent

    转自:https://www.cnblogs.com/tiger95/p/6962059.html 事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome, ...

  3. javascript事件触发器fireEvent和dispatchEvent

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

  4. MySQL mysqldump 导入/导出 结构&数据&存储过程&函数&事件&触发器

    ———————————————-库操作———————————————-1.①导出一个库结构 mysqldump -d dbname -u root -p > xxx.sql ②导出多个库结构 m ...

  5. 【PostgreSQL-9.6.3】事件触发器

    当预定的事件发生时,事件触发器就会被触发.由于事件触发器设计的权限比较大,所以只有超级用户才能创建和修改触发器. 1. 事件触发器支持的事件分三类:ddl_command_start, ddl_com ...

  6. WPF 精修篇 事件触发器

    原文:WPF 精修篇 事件触发器 事件触发器 一般使用的就是动画 <Grid> <TextBlock Text="事件触发器" Opacity="0.2 ...

  7. Javascript事件派发-dispatchEvent

    事件派发的作用: 1.派发数据,将一个封闭模块中的数据传递给另一个封闭模块.2.事件完成了较为复杂的解耦. 事件和回调函数不同在于: 1.事件可以在任意地方去获取,而回调函数只能在一个地方存在,如果需 ...

  8. plsql 数据库事件触发器

    --4.数据库事件触发器 需要超管的权限 /* 数据库事件触发器有数据库级和模式级两种. 前者定义在整个数据库上,触发事件是数据库事件,如数据库的启动.关闭,对数据库的登录或退出. 后者定义在模式上, ...

  9. Node.js精进(4)——事件触发器

    Events 是 Node.js 中最重要的核心模块之一,很多模块都是依赖其创建的,例如上一节分析的流,文件.网络等模块. 比较知名的 Express.KOA 等框架在其内部也使用了 Events 模 ...

随机推荐

  1. Facebook人工智能实验室的前世今生

    Facebook人工智能实验室的前世今生 是时候停止把Facebook当作纯粹的社交媒体公司来看了.它用无人机提供互联网服务,为了发展虚拟现实而收购Oculus,不懈追求人工智能,Facebook已经 ...

  2. Nodejs stream模块-翻译

    花了两天时间尝试按照自己的话翻译了一下stream模块,以下内容皆翻译于:https://nodejs.org/api/stream.html. 目录 1  Stream(流)     1.1     ...

  3. Java SSM框架之MyBatis3(四)MyBatis之一对一、一对多、多对多

    项目搭建Springboot 1.5  pom.xml <?xml version="1.0" encoding="UTF-8"?> <pro ...

  4. BAT及各大互联网公司2014前端笔试面试题--JavaScript篇(昨天某个群友表示写的简单了点,然后我无情的把他的抄了一遍)

    (某个群友)http://www.cnblogs.com/coco1s/ 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大 ...

  5. 洛谷 P1006 传纸条 多维DP

    传纸条详解: 蒟蒻最近接到了练习DP的通知,于是跑来试炼场看看:发现有点难(毕竟是蒟蒻吗)便去翻了翻题解,可怎么都看不懂.为什么呢?蒟蒻发现题解里都非常详细的讲了转移方程,讲了降维优化,但这题新颖之处 ...

  6. pip2和pip3冲突问题解决方法

    python使用pip安装模块时报错:unable to create process using ' '的解决方法: 参考:http://qoogle.cn/?id=39 1.删除C:\Python ...

  7. Palindrome Partitioning I & II

    Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...

  8. SOAP简单示例

    看了网上的几个文章,SOAP的示例布局都不清晰,不能马上入手,特意写个例子与大家分享,同时记录备用. 当前环境:VS2013 + WPF private void Button_Click(objec ...

  9. Project Euler Problem3

    Largest prime factor Problem 3 The prime factors of 13195 are 5, 7, 13 and 29. What is the largest p ...

  10. 解决华为手机无法输出Debug级别log的问题

    近期购入了新款的华为手机荣耀8,手感.性能.颜值都非常好.作为android开发工程师,自然会用到真机进行日常的调试.然而,这部手机并没有这么“听话“!反复尝试开启开发者选项中的设置项,依旧无法输出L ...