JS自定义事件的定义和触发(createEvent, dispatchEvent)
来源:互联网 发布:淘宝卖家物流费用标准 编辑:程序博客网 时间:2024/06/08 03:03
【转】http://www.cnblogs.com/stephenykk/p/4861420.html
在JavaScript前端开发中,我们经常调用click、mouseup等基本事件。有的时候,为了满足特定功能的要求,我们需要自定义事件,这就要说到自定义事件的运作机制。
由于浏览器兼容性问题,针对标准浏览器和IE6/7等浏览器。
1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent()
. 使用该方法之前需要进行创建和初始化。因此,总结说来就是:
document.createEvent()event.initEvent()element.dispatchEvent()
举个板栗:
$(dom).addEvent("alert", function() { alert("ABC");});// 创建var evt = document.createEvent("HTMLEvents");// 初始化,事件类型,是否冒泡,是否阻止浏览器的默认行为evt.initEvent("alert", false, false);// 触发dom.dispatchEvent(evt);
createEvent()
方法返回新创建的Event
对象,支持一个参数,表示事件类型,具体见下表:
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);
- JS自定义事件的定义和触发(createEvent, dispatchEvent)
- JS自定义事件的定义和触发(createEvent, dispatchEvent)
- javascript自定义事件createEvent initEvent dispatchEvent
- 自定义事件fireEvent和dispatchEvent的用法
- js事件触发器fireEvent和dispatchEvent
- js的触发事件
- document.createEvent建立自定义事件
- javascript事件触发器fireEvent和dispatchEvent
- javascript事件触发器fireEvent和dispatchEvent
- javascript事件触发器fireEvent和dispatchEvent
- JS创建自定义事件及触发
- Magento事件event的dispatchEvent分发使用方法:
- js的onchange事件触发
- jQuery事件触发和js手动触发事件
- JS自定义事件绑定--通过URL触发不同的点击事件
- 事件的触发机制,定义,注册
- js触发单击事件(不是调用某组件定义的单击函数,而是触发,相当于你点击)
- flex自定义事件(包括DispatchEvent与addEventListener)传参
- Leetcode 111. Minimum Depth of Binary Tree
- 移动客户端中高效使用 SQLite
- 数据当中含有双引号,用jstl表达式为表单赋值时出错
- php通过PO连接SAP的接口
- linux获取/查看本机出口ip
- JS自定义事件的定义和触发(createEvent, dispatchEvent)
- Centos - 重装git
- 图像在MindManager中能起到什么作用
- AR 移动端手指缩放
- Makefile 中:= ?= += =的区别
- UWP页面缓存
- OkHttpUtils: javax.net.ssl.SSLProtocolException: SSL handshake aborted: ssl=0xb8f02e68: Failure in S
- oracle--plsql1---基础概念
- 欢迎使用CSDN-markdown编辑器