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

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. python网络爬虫学习笔记(一)Request库

    一.Requests库的基本说明 引入Rquests库的代码如下 import requests 库中支持REQUEST, GET, HEAD, POST, PUT, PATCH, DELETE共7个 ...

  2. 一、CSS介绍

    CSS介绍 1.css概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 selector{ property:value } 注:property(属性)大于1之后,property之间用 ...

  3. 保持ssh连接长时间不断开的技巧

    我经常用ssh连接服务器,过段时间不用, 需要恢复一下断开的连接, 原因是NAT防火墙喜欢对空闲的会话进行超时处理,以确保它们状态表的干净和内存的低占用率,因为 长时间保持连接, 会长期占用部分系统资 ...

  4. mazing ASP.NET Core 2.0【转】

    前言 ASP.NET Core 的变化和发展速度是飞快的,当你发现你还没有掌握 ASP.NET Core 1.0 的时候, 2.0 已经快要发布了,目前 2.0 处于 Preview 1 版本,意味着 ...

  5. 微软microsoft word的api文档地址

    https://docs.microsoft.com/en-us/previous-versions/office/developer/office-2003/aa172758(v%3doffice. ...

  6. ABAP 省市县级联搜索帮助

    在展示ABAP代码之前,先建立自建表ZCHENH006,表中包含两个关键字段 BELNR(地区编码),SDESC(地区描述). 编码规则参考:身份证前六位地区编码规则,可参考我另外一篇Blog导入系统 ...

  7. Java JDK 在Windows 10中配置环境变量

    首先,去Oracle官方网站下载Java JDK https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213 ...

  8. python--第十天总结(Select/Poll/Epoll使用 )

    首先列一下,sellect.poll.epoll三者的区别 select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当select ...

  9. 服务器&linux

    linux vsftp查看端口占用:netstat -natp |grep 21如果有占用21端口进程,kill它 ,或者remove它.安装:yum -y install vsftpduseradd ...

  10. linux用户和组管理,/etc/passwd 、/etc/shadow和/etc/group --学习

    一./etc/passwd 和/etc/shadow解释 与用户相关的系统配置文件主要有/etc/passwd 和/etc/shadow,其中/etc/shadow是用户资讯的加密文件,比如用户的密码 ...