dispatchEvent 自定义触发事件,常用于自定义鼠标事件或点击事件
自定义事件的触发
又是不可避免的,由于浏览器兼容性问题,我们要分开说了,针对标准浏览器和IE6/7等考古浏览器。
1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent()
. 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化。因此,总结说来就是:
document.createEvent()
event.initEvent()
element.dispatchEvent()
举个例子: var dom = document.querySelector('#id')
document.addEventListener('alert', function (event) {
console.log(event)
}, false); // 创建
var evt = document.createEvent("HTMLEvents");
// 初始化
evt.initEvent("alert", false, false); // 触发, 即弹出文字
dom.dispatchEvent(evt);
例子2: let point = document.querySelector('#id'); const e = document.createEvent('MouseEvents'); // 创建 e.initEvent('click', true, true); // 初始化,阻止冒泡,阻止原生事件 e.customId = point.id; // 设置Id point.dispatchEvent(e); //触发
createEvent()
方法返回新创建的Event
对象,支持一个参数,表示事件类型,具体见下表:
参数 | 事件接口 | 初始化方法 |
---|---|---|
HTMLEvents | HTMLEvent | initEvent() |
MouseEvents | MouseEvent | initMouseEvent() |
UIEvents | UIEvent | initUIEvent() |
关于createEvent()
方法我自己了解也不是很深入,不想滥竽充数,误人子弟,所以您有疑问我可能作答不了,希望对熟知该方法的人可以做进一步的解释说明(例如事件接口与document
关系,UIEvent
是什么东西等)。
initEvent()
方法用于初始化通过DocumentEvent
接口创建的Event
的值。
支持三个参数:initEvent(eventName, canBubble, preventDefault)
. 分别表示事件名称,是否可以冒泡,是否阻止事件的默认操作。
dispatchEvent()
就是触发执行了,dom.dispatchEvent(eventObject)
, 参数eventObject
表示事件对象,是createEvent()
方法返回的创建的Event
对象。
2. 对于IE浏览器,由于向下很多版本的浏览器都不支持document.createEvent()
方法,因此我们需要另辟蹊径(据说IE有document.createEventObject()
和event.fireEvent()
方法,但是不支持自定义事件~~)。
IE浏览器有不少自给自足的东西,例如下面要说的这个"propertychange"
事件,顾名思意,就是属性改变即触发的事件。例如文本框value
值改变,或是元素id
改变,或是绑定的事件改变等等。
我们可以利用这个IE私有的东西实现自定义事件的触发,大家可以先花几分钟想想……
// zxx: 假设几分钟已经过去了……
大家现在有思路了没?其实说穿了很简单,当我们添加自定义事件的时候,顺便给元素添加一个自定义属性即可。例如,我们添加自定义名为"alert"
的自定义事件,顺便我们可以对元素做点小手脚:
dom.evtAlert = "2012-04-01";
再顺便把自定义事件fn
塞到"propertychange"
事件中:
dom.attachEvent("onpropertychange", function(e) {
if (e.propertyName == "evtAlert") {
fn.call(this);
}
});
这个,当我们需要触发自定义事件的时候,只要修改DOM上自定义的evtAlert
属性的值即可:
dom.evtAlert = Math.random(); // 值变成随机数
此时就会触发dom
上绑定的onpropertychange
事件,又因为修改的属性名正好是"evtAlert"
, 于是自定义的fn
就会被执行。这就是IE浏览器下事件触发实现的完整机制,应该说讲得还是蛮细的。
自定义事件的删除
与触发事件不同,事件删除,各个浏览器都提供了对于的时间删除方法,如removeEventListener
和detachEvent
。不过呢,对于IE浏览器,还要多删除一个事件,就是为了实现触发功能额外增加的onpropertychange
事件:
dom.detachEvent("onpropertychange", evt);
dispatchEvent 自定义触发事件,常用于自定义鼠标事件或点击事件的更多相关文章
- echarts 取消图例上的点击事件和图表上鼠标滑过点击事件
备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消 鼠标滑过的提示框 tooltip : { trigger: 'item', show:false, ...
- 我们常用的在a标签中有点击事件
我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...
- js 循环生成元素,并为元素添加click事件,结果只执行最后一个点击事件
问题描述:有一个参数集合data,for循环为每一个参数生成一个dom元素,并附加onclick事件.生成之后发现点击事件里的参数全是data集合里的最后一个. 代码如下: var dom=$('#d ...
- Jquery为DIV添加点击事件,Jquery为a标签超链接添加点击事件
<div>1</div> <div>2</div> <div>3</div> <div>4</div> ...
- jquery嵌套后会触发2次点击事件, jquery的unbind就是卸载这个点击事件的.
$("#diva").click(function(){ $("#divb").unbind("click").click(function ...
- Javascript和jquery事件--点击事件和触发超链接
前面的不过是一些基础的知识,真正的一些事件还是有点不同.还有一些命名空间的问题.不过现在ie也开始接受W3C标准,而且平时开发也很少考虑ie了,一些事件就不考虑ie了. 点击事件--click 大部分 ...
- html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...
- JavaFX如何制作鼠标多击事件?
JavaFX制作鼠标双击或者多击事件需要用到getClickCount()方法,这个方法需要添加addEventHandler()方法,addEventHandler()是事件方法. 1 scene. ...
- C#实现模拟鼠标点击事件(点击桌面的其他程序 )
注释感觉已经很清楚了,有不懂的欢迎评论 1 using System; using System.Collections.Generic; using System.ComponentModel; u ...
- 点击DIV触发其他元素的点击事件(案例:点击type="radio" 的input 标签外层DIV,触发内部单选点击选中事件)
方法一: 直接用找到对应dom元素调用.click()方法 $('.user_content').click(function(){ $(this).children()[0].click(); // ...
随机推荐
- 非常好的一个JS代码(RelativePosition.js)
var RelativePosition = function(){ function getLeft( align, rect, rel ){ var iLeft = 0; switch (alig ...
- Java内存模型 (一)什么是进程?什么是线程?进程和线程之间的区别是什么?
什么是进程?什么是线程? 进程是系统中正在运行的一个程序,程序一旦运行就是进程. 进程可以看成程序执行的一个实例.进程是系统资源分配的独立实体,每个进程都拥有独立的地址空间.一个进程无法访问另一个进程 ...
- [转帖]rpm包和deb分别是什么?
https://www.cnblogs.com/hanfanfan/p/9133789.html 需要不停的学习才可以. 一.RMP 是 LINUX 下的一种软件的可执行程序,你只要安装它就可以了.这 ...
- __metaclass__方法
metaclass这个属性叫做元类,它是用来表示这个类是由谁来帮他实例化创建的,说白了,就是相当于自己定制一个类. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- JAVA基础--JAVA API常见对象(字符串&缓冲区)
一. String 类型 1. String类引入 第二天学习过Java中的常量: 常量的分类: 数值型常量:整数,小数(浮点数) 字符型常量:使用单引号引用的数据 字符串常量:使用双引号引用 ...
- 区间最值的优秀数据结构---ST表
ST表,听起来高大上,实际上限制非常多,仅仅可以求最值问题: 为什么?先从原理看起: st表运用了倍增的思想:st[i][j] = min(st[i][j - 1],st[i + 2^(j - 1)) ...
- Jmeter 连接远程测压__(负载测试)
第一步: 双方关闭防火墙 打开jmeter server bat 路径如下 会出错
- Java服务,内存OOM问题如何快速定位? (转)
转自:公众号 架构师之路 问题:有一个Java服务出现了OOM(Out Of Memory)问题,定位了好久不得其法,请问有什么好的思路么? OOM的问题,印象中之前写过,这里再总结一些相对通用的方 ...
- 多进程-Pool进程池
from multiprocessing import Pool import os,time def Foo(i): time.sleep(2) print("in process&quo ...
- Neo4j/Cypher: All paths between two nodes with a relationship property filter
解决方案一 I am trying to perform a query to retrieve all paths between two nodes a and b in which all th ...