自定义事件的触发
又是不可避免的,由于浏览器兼容性问题,我们要分开说了,针对标准浏览器和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. 【Linux开发】linux设备驱动归纳总结(十三):1.触摸屏与ADC时钟

    linux设备驱动归纳总结(十三):1.触摸屏与ADC时钟 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  2. mint ui解决Navbar和Infinite scroll共存时的bug

    Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载. 只需要判断一下就可以了,代码: html: <mt-navbar v-model="s ...

  3. 关于.Net Core+Angular+Ueditor富文本编辑器的使用方式

    博客:https://www.cnblogs.com/24klr/ 资料:https://www.jianshu.com/p/0b21a1324d47 GitHub:https://github.co ...

  4. [转帖]Linux学习笔记之rpm包管理功能全解

    Linux学习笔记之rpm包管理功能全解 https://www.cnblogs.com/JetpropelledSnake/p/11177277.html rpm 的管理命令 之前学习过 yum 的 ...

  5. Centos 7 下Gitlab 自启动设置

    禁止 Gitlab 开机自启动: systemctl disable gitlab-runsvdir.service 启用 Gitlab 开机自启动: systemctl enable gitlab- ...

  6. Linx

    1. 2. 2. 3. 5. Vi 猜数字 第二十个裴伯拉数字 1 1 2 3 5 8 2 3 求小于3000的裴伯拉数列 4 5 递归方式1到100 和 6 7 100 以内奇数.偶数和 8 Sss ...

  7. 【DP 好题】Kick Start 2019 Round C Catch Some

    题目链接 题目大意 在一条数轴上住着 $N$ 条狗和一个动物研究者 Bundle.Bundle 的坐标是 0,狗的坐标都是正整数,可能有多条狗住在同一个位置.每条狗都有一个颜色.Bundle 需要观测 ...

  8. Spring基于SchedulingConfigurer实现定时任务

    Spring 基于 SchedulingConfigurer 实现定时任务,代码如下: import org.springframework.scheduling.annotation.Schedul ...

  9. IDEA 修改JavaWeb的访问路径

    问题描述        对于我这个刚刚使用IDEA不久的新手来说,能够正常运行就不错了,不过到了后面,可能会觉得IDEA给你分配的默认访问路径很不顺手,比如访问的时候需要通过: http://loca ...

  10. Django之ORM操作.md

    1.ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人 ...