自定义事件的触发
又是不可避免的,由于浏览器兼容性问题,我们要分开说了,针对标准浏览器和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浏览器下事件触发实现的完整机制,应该说讲得还是蛮细的。

自定义事件的删除
与触发事件不同,事件删除,各个浏览器都提供了对于的时间删除方法,如removeEventListenerdetachEvent。不过呢,对于IE浏览器,还要多删除一个事件,就是为了实现触发功能额外增加的onpropertychange事件:

 dom.detachEvent("onpropertychange", evt);

dispatchEvent 自定义触发事件,常用于自定义鼠标事件或点击事件的更多相关文章

  1. echarts 取消图例上的点击事件和图表上鼠标滑过点击事件

    备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消 鼠标滑过的提示框 tooltip : {         trigger: 'item',      show:false,      ...

  2. 我们常用的在a标签中有点击事件

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...

  3. js 循环生成元素,并为元素添加click事件,结果只执行最后一个点击事件

    问题描述:有一个参数集合data,for循环为每一个参数生成一个dom元素,并附加onclick事件.生成之后发现点击事件里的参数全是data集合里的最后一个. 代码如下: var dom=$('#d ...

  4. Jquery为DIV添加点击事件,Jquery为a标签超链接添加点击事件

    <div>1</div> <div>2</div> <div>3</div> <div>4</div> ...

  5. jquery嵌套后会触发2次点击事件, jquery的unbind就是卸载这个点击事件的.

    $("#diva").click(function(){ $("#divb").unbind("click").click(function ...

  6. Javascript和jquery事件--点击事件和触发超链接

    前面的不过是一些基础的知识,真正的一些事件还是有点不同.还有一些命名空间的问题.不过现在ie也开始接受W3C标准,而且平时开发也很少考虑ie了,一些事件就不考虑ie了. 点击事件--click 大部分 ...

  7. html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

    如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...

  8. JavaFX如何制作鼠标多击事件?

    JavaFX制作鼠标双击或者多击事件需要用到getClickCount()方法,这个方法需要添加addEventHandler()方法,addEventHandler()是事件方法. 1 scene. ...

  9. C#实现模拟鼠标点击事件(点击桌面的其他程序 )

    注释感觉已经很清楚了,有不懂的欢迎评论 1 using System; using System.Collections.Generic; using System.ComponentModel; u ...

  10. 点击DIV触发其他元素的点击事件(案例:点击type="radio" 的input 标签外层DIV,触发内部单选点击选中事件)

    方法一: 直接用找到对应dom元素调用.click()方法 $('.user_content').click(function(){ $(this).children()[0].click(); // ...

随机推荐

  1. flask的方法视图

    from flask import Flask,views,render_template,request app = Flask(__name__) app.debug = True class L ...

  2. php调用shell的方法

    一.配置 查看php.ini中配置是否打开安全模式,主要是以下三个地方safe_mode =  (这个如果为off下面两个就不用管了)disable_functions = safe_mode_exe ...

  3. 防火墙(入站规则)C++修改方法 以解决服务器无法连接问题

    为啥要关注防火墙 今天项目中的p2p直连遇到了问题.经过排查,发现充当服务器的一端进入listen状态后,另外的客户端一端connect失败. 错误码10060(超时). 开始时怀疑客户端connec ...

  4. spring5源码分析系列(一)——spring5框架模块

    spring总共大约20个模块,这些模块被整合在核心容器(Core Container).AOP和设备支持.数据访问及集成.Web.报文发送.Test 6个模块集合. 组成Spring框架的每个模块集 ...

  5. windows10专业版激活

    [1]右击我的电脑->属性,查看激活情况 [2]管理员身份打开CMD [2.1]如果不知道CMD是什么东西 [2.2]如果上面那个也找不到,直接按windows键(就是ctrl和alt中间那个键 ...

  6. [转帖]DotNetCore跨平台~System.DrawingCore部署Linux需要注意的

    DotNetCore跨平台~System.DrawingCore部署Linux需要注意的   https://www.bbsmax.com/A/QV5ZemYVJy/?tdsourcetag=s_pc ...

  7. celery 调用scrapy

    我的环境: celery 3.1.25 python 3.6.9 window10 celery tasks 代码如下,其中 QuotesSpider 是我的scrapy项目爬虫类名称 from ce ...

  8. 【C++ 补习】Copy Control

    C++ Primer 5th edition, chapter 13. The Rule of Three If a class needs a destructor, it almost surel ...

  9. int与Integer的一个小区别

    int不能为空,而Integer可以赋空值

  10. linux 使用tmux

    一. 什么是tmux 1.1. tmux 是两个单词的缩写,即“Terminal MultipleXer”,意思是“终端复用器“ 1.2. tmux 结构 1.2.1. tmux主要由三层: < ...