javascript事件触发器
- 概述
事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。
一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。
- 差异
事件在在不同浏览器的差异:
IE:
绑定事件 attachEvent
触发事件 fireEvent
注销事件 detachEvent
高级浏览器(chrome,firefox等):
绑定事件 addEventListener
触发事件 dispatchEvent
注销事件 removeEventListener
- Example
例如在ie下看看这个例子:view sourceprint?01 //document上绑定自定义事件ondataavailable 02 document.attachEvent('ondataavailable', function (event) { 03 alert(event.eventType); 04 }); 05 var obj=document.getElementById("obj"); 06 //obj元素上绑定click事件 07 obj.attachEvent('onclick', function (event) { 08 alert(event.eventType); 09 }); 10 //调用document对象的createEventObject方法得到一个event的对象实例。 11 var event = document.createEventObject(); 12 event.eventType = 'message'; 13 //触发document上绑定的自定义事件ondataavailable 14 document.fireEvent('ondataavailable', event); 15 //触发obj元素上绑定click事件 16 document.getElementById("test").onclick = function () { 17 obj.fireEvent('onclick', event); 18 };
再看看高级浏览器(chrome,firefox等)的例子:view sourceprint?01 //document上绑定自定义事件ondataavailable 02 document.addEventListener('ondataavailable', function (event) { 03 alert(event.eventType); 04 }, false); 05 var obj = document.getElementById("obj"); 06 //obj元素上绑定click事件 07 obj.addEventListener('click', function (event) { 08 alert(event.eventType); 09 }, false); 10 //调用document对象的 createEvent 方法得到一个event的对象实例。 11 var event = document.createEvent('HTMLEvents'); 12 // initEvent接受3个参数: 13 // 事件类型,是否冒泡,是否阻止浏览器的默认行为 14 event.initEvent("ondataavailable", true, true); 15 event.eventType = 'message'; 16 //触发document上绑定的自定义事件ondataavailable 17 document.dispatchEvent(event); 18 19 var event1 = document.createEvent('HTMLEvents'); 20 event1.initEvent("click", true, true); 21 event1.eventType = 'message'; 22 //触发obj元素上绑定click事件 23 document.getElementById("test").onclick = function () { 24 obj.dispatchEvent(event1); 25 };
javascript事件触发器相关推荐
- 二十五、Node中的Buffer缓冲器和EventEmitter事件触发器
@Author:Runsen @Date:2020/6/5 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
- javascript事件列表解说
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- javascript --- 事件托付
javascript 之 事件托付 长处:1.提高性能(仅仅须要对父级进行操作,子节点相同会拥有其相关属性和方法) 2.对于新加入的事件.也让其拥有父级事件的属性 <!doctype html& ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- js事件触发器fireEvent和dispatchEvent
转自:https://www.cnblogs.com/tiger95/p/6962059.html 事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome, ...
- javaScript事件(二)事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
- onpaste事件不生效_从实际开发中来看JavaScript事件循环的使用场景
前言: 本文是介绍结合DOM事件流和JavaScript事件循环解决一个工作中的实际问题的过程,很多东西不只是面试的时候才会用得到 文中涉及到的代码demo地址:drag-and-eventloop ...
- javascript 事件对象
btn.onclick = function (event) {// event 就是事件对象var e = event || window.event; // window.event是兼容低版本I ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
最新文章
- c语言中getc与gets,getc()和gets()的用法
- python 下载文件 限速-Python网络爬虫---scrapy通用爬虫及反爬技巧
- Windows Mobile系列手机操作系统
- dj电商-模型类设计-商品模块数据表
- 两个电脑如何切换以方便使用文件
- C++之指针探究(十六):typedef结合函数指针
- np.memmap读取大文件
- 在线播放器 在网页中插入MediaPlayer 兼容IE和FF的代码调试
- 操作系统概念学习笔记 4 操作系统结构和操作简述
- Direcshow相关资料
- html字体溢出问题,CSS教程:关于文字溢出问题的研究
- 基于单片机的电集中抄表设计
- Threejs实现天空盒,全景场景,地面草地
- Linux brctl 命令,虚拟网络设备 LinuxBridge 管理工具
- scratch 大家来找茬
- 谈谈银联 js 支付
- 手绘板的制作——重置与橡皮擦(2)
- P2P技术(NAT基础)
- 机器学习知识总结及代码实现
- Neo4j导入本地CSV文件三元组关系生成图谱