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 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
随机推荐
- JAVA获取运行程序的src路径
JavaPrj使用: System.getProperty("user.dir")+"\\src"或直接"\\src"JavaWeb使用Th ...
- 关于element-ui日期选择器disabledDate使用心得
实现目的: 使用type="data"类型实现具备开始日期与结束日期组件(ps:element有自带的type="daterange"类型的组件可以实现此功能) ...
- django之Models和ORM
ORM Object Relational Mapping,简称ORM,是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 通过使用描述对象和数据库之间映射的元数据,将程序中的对象自动持久 ...
- 网络编程 tftp下载文件的编程
一.代码 操作码 功能 1 读请求,即下载 2 写请求,即上传 3 表示数据包,即DATA 4 确认码,即ACK 5 错误 from socket import * import struct s=s ...
- 【学习】基础知识：数组和矢量计量【Numpy】
Numpy是高性能科学计算和数据分析的基础包.功能如下: ndarray 一个具有矢量算法运算和复杂广播能力的快速且节省空间的多维数组 用于对整组数据进行快速运算的标准数学函数(无需编写循环) 用于读 ...
- Visual Studio资源汇总
Visual Studio 2015:http://tieba.baidu.com/p/3442930798Visual Studio 2013:http://tieba.baidu.com/p/34 ...
- python 字典中 重复值去除
tuple_r_dict = lambda _dict: dict(val[::-1] for val in _dict.items()) # Python3.x tuple_r_dict(tuple ...
- django 数据库查询的几个知识点
django查询db过程中遇到的几个问题: 1. 数据库切换,用using products = models.TProductCredit.objects.using(') 2.查询结构集是Quer ...
- Java框架spring Boot学习笔记（一）：开始第一个项目
新建一个项目,选择Spring initializr 修改group和项目名 添加依赖包Web,MongoDB 设置保存位置和工程名 新建一个test的文件 输入代码: package com.xxx ...
- Java16-java语法基础——异常
Java16-java语法基础——异常 一.异常概念 1.异常:应用程序在运行过程中出现的错误或非正常的意外情况,即虚拟机的通常操作中可能遇到的异常,是一种常见的运行错误. 2.原因:数组越界.空指针 ...