js事件触发器 dispatchEvent()
【其实就是自动触发事件，而非手动(交互)触发事件】
dispatchEvent是作为高级浏览器(如chrome、Firfox等)的事件触发器来使用的，那么什么是事件触发器？就是触发事件的东西。可能有人觉得有点莫名其妙，触发事件不是在交互中被触发的吗？的确，通常情况下，事件的触发都是由用户的行为如点击、刷新等操作实现，但是，其实有的情况下，事件的触发必须由程序来实现，比如ajax框架的一些自定义事件。正如事件的绑定一样，对于浏览器而言，绑定事件分为高级浏览器和IE浏览器两派，事件触发器也是分为高级浏览器和IE两派，而dispatchEvent正是用于高级浏览器的事件触发。下面看我整理的一个触发事件的例子：
- <!--
- Author: lJian
- -->
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- </body>
- <script type="text/javascript">
- //document上绑定自定义事件oneating
- document.addEventListener('eat', function (event) {
- alert(event.mingzi+'，'+event.message);
- }, false);
- //创建event的对象实例。
- var event = document.createEvent('HTMLEvents');
- // 3个参数：事件类型，是否冒泡，是否阻止浏览器的默认行为
- event.initEvent("eat", 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);
- }
- };
js事件触发器 dispatchEvent()的更多相关文章
- js事件触发器fireEvent和dispatchEvent
转自:https://www.cnblogs.com/tiger95/p/6962059.html 事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome, ...
- 事件触发器-----dispatchEvent
不要被标题蒙蔽了,今天的重点不是论述事件触发器,而是说一下dispatchEvent这个东西.好了,先简单做个铺垫,dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触 ...
- javascript事件触发器fireEvent和dispatchEvent
javascript事件触发器fireEvent和dispatchEvent 事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等) ...
- Node.js精进（4）——事件触发器
Events 是 Node.js 中最重要的核心模块之一,很多模块都是依赖其创建的,例如上一节分析的流,文件.网络等模块. 比较知名的 Express.KOA 等框架在其内部也使用了 Events 模 ...
- js事件相关面试题
说是面试题,其实也相当于是对js事件部分知识点的一个总结.简单内容一笔带过,了解详情我都给出了参考链接,都是之前写的一些相关文章.JavaScript本身没有事件模型,但是环境可以有. DOM:add ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- Javascript事件派发-dispatchEvent
事件派发的作用: 1.派发数据,将一个封闭模块中的数据传递给另一个封闭模块.2.事件完成了较为复杂的解耦. 事件和回调函数不同在于: 1.事件可以在任意地方去获取,而回调函数只能在一个地方存在,如果需 ...
- Js 事件基础
一:js中常见得事件 (1) : 鼠标事件 click :点击事件 dblclick :双击事件 contextmenu : 右键单击事件 ...
- dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
随机推荐
- 记录 Ext 日历月份选择控件bug解决过程结果
目录 背景 代码 背景 项目使用 Ext.NET 2.2.0.40838 , 对应 Ext JS4.2 版本. 结果 2017/3/31 号的时候偶然间点日历选择控件选择2月,10月等月份突然就跳到3 ...
- Java笔记Spring（三）
spring-beans和spring-context 一.注解 1.自定义一个注解 @Target({ElementType.METHOD}) @Retention(RetentionPolicy. ...
- wordpress 解决文章内http链接问题
1. 登录Wordpress后台, 常规设置 > 里面把站点URL 修改成 https开头 2. 登录phpmyadmin , 执行替换链接的SQL 替换wordpress配置的链接地址 (可 ...
- solr字段压缩属性compressed新版本已经移除
solr字段压缩属性compressed新版本已经移除 可能是考虑到压缩意义不大还减少搜索效率,所以去掉了.而且好像没有替代属性.
- Python + Robot Framework 环境搭建
一.Python 安装 说明:由于RIDE是基于python2.x开发,后期未做python3.x兼容,所以这里安装python2.7. 链接: https://pan.baidu.com/s/1yf ...
- python实战博客
2018-10-31 更新Logging日志记录以及异常捕获 感谢廖大教程.Python实战 直接在闲置的服务器上开发.阿里云Centos 6.8 64位. 1 搭建开发环境 Python 环境是Py ...
- Spring MVC 之 请求url 带后缀的情况
RequestMappingInfoHandlerMapping 在处理http请求的时候, 如果 请求url 有后缀,如果找不到精确匹配的那个@RequestMapping方法.那么,就把后缀去掉, ...
- .NET项目中使用PostSharp
PostSharp是一种Aspect Oriented Programming 面向切面(或面向方面)的组件框架,适用在.NET开发中,本篇主要介绍Postsharp在.NET开发中的相关知识,以及一 ...
- 无法启动 nexus 服务，错误1067：进程意外终止。java环境变量设置技巧。
Nexus启动失败 wrapper.log记载: 无支持版本 51.0,版本51.0指的是Java1.7. 分析: nexus版本为2.14.8,适用JRE版本为1.7. 已配置JAVA_HOME为1 ...
- Android Studio模拟器磁盘空间不足（Not enough disk space to run AVD）
在Android Studio中运行模拟器时,提示Error: Not enough disk space to run AVD '....'. Exiting.是说安装模拟的磁盘空间不足,导致无法运 ...