【其实就是自动触发事件,而非手动(交互)触发事件】

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

  1. <!--
  2. Author: lJian
  3. -->
  4. <!DOCTYPE html>
  5. <html>
  6. <head lang="en">
  7. <meta charset="UTF-8">
  8. <title></title>
  9. </head>
  10. <body>
  11. </body>
  12. <script type="text/javascript">
  13. //document上绑定自定义事件oneating
  14. document.addEventListener('eat', function (event) {
  15. alert(event.mingzi+','+event.message);
  16. }, false);
  17. //创建event的对象实例。
  18. var event = document.createEvent('HTMLEvents');
  19. // 3个参数:事件类型,是否冒泡,是否阻止浏览器的默认行为
  20. event.initEvent("eat", true, true);
  21. /*属性,随便自己定义*/
  22. event.mingzi = 'hello,我是李小贱';
  23. event.message = '我今天24岁';
  24. //触发自定义事件oneating
  25. document.dispatchEvent(event);
  26. </script>
  27. </html>

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

  1. var fireEvent = function(element,event){
  2. if (document.createEventObject){
  3. // IE浏览器支持fireEvent方法
  4. var evt = document.createEventObject();
  5. return element.fireEvent('on'+event,evt)
  6. }
  7. else{
  8. // 其他标准浏览器使用dispatchEvent方法
  9. var evt = document.createEvent( 'HTMLEvents' );
  10. evt.initEvent(event, true, true);
  11. return !element.dispatchEvent(evt);
  12. }
  13. };
document.creatEventObject()是IE创建event对象实例的方法,和document.creatEvent('HTMLEvents')在非IE主流浏览器下的作用相同,fireEvent是IE下的事件触发器,与dispatchEvent在非IE主流浏览器下作用相同。

js事件触发器 dispatchEvent()的更多相关文章

  1. js事件触发器fireEvent和dispatchEvent

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

  2. 事件触发器-----dispatchEvent

    不要被标题蒙蔽了,今天的重点不是论述事件触发器,而是说一下dispatchEvent这个东西.好了,先简单做个铺垫,dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触 ...

  3. javascript事件触发器fireEvent和dispatchEvent

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

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

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

  5. js事件相关面试题

    说是面试题,其实也相当于是对js事件部分知识点的一个总结.简单内容一笔带过,了解详情我都给出了参考链接,都是之前写的一些相关文章.JavaScript本身没有事件模型,但是环境可以有. DOM:add ...

  6. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  7. Javascript事件派发-dispatchEvent

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

  8. Js 事件基础

    一:js中常见得事件 (1) : 鼠标事件         click :点击事件         dblclick :双击事件         contextmenu : 右键单击事件        ...

  9. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

随机推荐

  1. centos6.5 yum安装redis

    1.yum添加epel源 yum install epel-release 2.安装yum  yum install redis 3.Redis 服务端配置——Could not connect to ...

  2. 第一章 FFmpeg简介

    1.1 FFmpeg的定义 Fast Forward Moving Picture Experts Group(动态图像专家组) 1.2 FFmpeg的历史 1.3 FFmpeg的基本组成 1 FFm ...

  3. 游戏中转盘概率的算法---python实现

    加入转盘的内容及概率如下 转盘倍数 0.5 0.6 0.7 0.8 1 1.2 1.5 1.8 2 机率 0.2 0.15 0.15 0.2 0.2 0.1 0.1 0.05 0.05 下面来实现转盘 ...

  4. C++学习基础十七-- 函数指针

    C++常用的函数指针 语法:返回值类型 (*函数名)(参数列表); 举例说明:int (*Func)(int m, int n); 用typedef简化函数指针的定义 例如: typedef int ...

  5. GIL计算python 2 和 python 3 计算密集型

    首先我画了一张图来表示GIL运行的方式: Python 3执行如下计算代码:#-*-conding:utf-8-*-import threading import timedef add(): n = ...

  6. TTS

    CLASS_SpVoice: TGUID = '{96749377-3391-11D2-9EE3-00C04F797396}'; http://blog.sina.com.cn/s/blog_4fce ...

  7. js 生成手机图片并保存到相册

    1.注意权限问题 2.调用HTML5+api 3.优化显示 4.注意兼容ios.Android

  8. source tree常用功能

    参考地址: https://blog.csdn.net/weixin_39568744/article/details/81413198

  9. ffmpeg使用经验

    1.工作要使用ffmpeg将视频转换成H264格式,网上查到的很多使用方法都是如下: ffmpeg -i input.mov -c:v libx264 -crf output.mov -i后面表示输入 ...

  10. 大数据入门到精通7--对复合value做reducebykey

    培训系列7--对复合value做reduce 1.做基础数据准备 val collegesRdd= sc.textFile("/user/hdfs/CollegeNavigator.csv& ...