(转)js原生自定义事件的触发dispatchEvent
1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化。因此,总结说来就是:
1
2
3
|
document.createEvent() event.initEvent() element.dispatchEvent() |
举个例子:
1
2
3
4
5
6
7
8
9
10
11
12
|
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); |
createEvent()方法返回新创建的Event对象,支持一个参数,表示事件类型,具体见下表:
参数 |
事件接口 |
初始化方法 |
HTMLEvents |
HTMLEvent |
initEvent() |
MouseEvents |
MouseEvent |
initMouseEvent() |
UIEvents |
UIEvent |
initUIEvent() |
initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。
支持三个参数:initEvent(eventName, canBubble, preventDefault).
分别表示: 事件名称,是否可以冒泡,是否阻止事件的默认操作
dispatchEvent()就是触发执行了,dom.dispatchEvent(eventObject),
参数eventObject表示事件对象,是createEvent()方法返回的创建的Event对象。
与自定义事件的函数有 Event、CustomEvent 和 dispatchEvent
1
2
|
//向window派发一个resize内置事件 window.dispatchEvent( new Event( 'resize' )) |
直接自定义事件,使用 Event 构造函数:
1
2
3
4
5
6
7
8
|
var event = new Event( 'build' ); var elem = document.querySelector( '#id' ) // Listen for the event. elem.addEventListener( 'build' , function (e) { ... }, false ); // Dispatch the event. elem.dispatchEvent(event); |
CustomEvent 可以创建一个更高度自定义事件,还可以附带一些数据,具体用法如下:
1
|
var myEvent = new CustomEvent(eventname, options); |
其中 options 可以是:
1
2
3
4
5
6
7
8
|
{ detail: { ... }, bubbles: true , //是否冒泡 cancelable: false //是否取消默认事件 } |
其中 detail 可以存放一些初始化的信息,可以在触发的时候调用。其他属性就是定义该事件是否具有冒泡等等功能。
内置的事件会由浏览器根据某些操作进行触发,自定义的事件就需要人工触发。dispatchEvent 函数就是用来触发某个事件:
1
2
3
4
5
6
7
8
9
10
|
element.dispatchEvent(customEvent); 上面代码表示,在 element 上面触发 customEvent 这个事件。结合起来用就是: // add an appropriate event listener obj.addEventListener( "cat" , function (e) { process(e.detail) }); // create and dispatch the event var event = new CustomEvent( "cat" , { "detail" :{ "hazcheeseburger" : true }}); obj.dispatchEvent(event); |
使用自定义事件需要注意兼容性问题,而使用 jQuery 就简单多了:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 绑定自定义事件 $(element).on( 'myCustomEvent' , function (){}); // 触发事件 $(element).trigger( 'myCustomEvent' ); 此外,你还可以在触发自定义事件时传递更多参数信息: $( "p" ).on( "myCustomEvent" , function ( event, myName ) { $( this ).text( myName + ", hi there!" ); }); $( "button" ).click( function () { $( "p" ).trigger( "myCustomEvent" , [ "John" ] ); }); |
2. 对于IE浏览器,由于向下很多版本的浏览器都不支持document.createEvent()方法,因此我们需要另辟蹊径(据说IE有document.createEventObject()和event.fireEvent()方法,但是不支持自定义事件~~)。
IE浏览器有不少自给自足的东西,例如下面要说的这个"propertychange"事件,顾名思意,就是属性改变即触发的事件。例如文本框value值改变,或是元素id改变,或是绑定的事件改变等等。
dom.evtAlert = "2012-04-01";
1
2
3
4
5
|
<br>dom.attachEvent( "onpropertychange" , function (e) { if (e.propertyName == "evtAlert" ) { fn.call( this ); } }); |
这个,当我们需要触发自定义事件的时候,只要修改DOM上自定义的evtAlert属性的值即可:
1
|
dom.evtAlert = Math.random().toString(36).substr(2) |
此时就会触发dom
上绑定的onpropertychange
事件,又因为修改的属性名正好是"evtAlert"
, 于是自定义的fn
就会被执行。这就是IE浏览器下事件触发实现的完整机制,应该说讲得还是蛮细的。
自定义事件的删除
与触发事件不同,事件删除,各个浏览器都提供了对于的时间删除方法,如removeEventListener
和detachEvent
。不过呢,对于IE浏览器,还要多删除一个事件,就是为了实现触发功能额外增加的onpropertychange
事件:
1
|
dom.detachEvent( "onpropertychange" , evt); |
来自司司徒正美的一段代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var fireEvent = function (element,event){ if (document.createEventObject){ // IE浏览器支持fireEvent方法 var evt = document.createEventObject(); return element.fireEvent( 'on' +event,evt) } else { // 其他标准浏览器使用dispatchEvent方法 var evt = document.createEvent( 'HTMLEvents' ); evt.initEvent(event, true , true ); return !element.dispatchEvent(evt); } }; |
参考:http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/
(转)js原生自定义事件的触发dispatchEvent的更多相关文章
- 自定义事件的触发dispatchEvent
1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: documen ...
- js的自定义事件
js中的事件是js的一大技术点,说白了就是操作dom树的唯一途径. 关于事件无非两种绑定方式: document.getElementById('xxx').onclick = function(){ ...
- JS中自定义事件的使用与触发
1. 事件的创建 JS中,最简单的创建事件方法,是使用Event构造器: var myEvent = new Event('event_name'); 但是为了能够传递数据,就需要使用 CustomE ...
- js中自定义事件,使用了jQuery
$(function(){ $('#btn').bind("myClick", function(){ //自定义myClick事件 $('#test').append(" ...
- JavaScript自定义事件和触发(createEvent, dispatchEvent)
$(dom).addEvent("ft", function() { alert("走起"); }); // 创建 var evt = document.cre ...
- js简单自定义事件与主动触发事件
var events = { addHandler: function (element, eventType, handler) { if (element.addEventListener) { ...
- js(react.js) button click 事件无法触发
今天遇到一个诡异的问题.button 上的点击事件触发不了. 找个几个小时,原因是 js 报错了. <Button type="primary" htmlType=" ...
- 浅析js绑定同一个事件依次触发问题系列(一)
算了 还是上代码吧 记得写过这篇文章,但是找不到了(对,就是找不到了,算了再写一遍吧) 也是在群中有人问这个绑定不同事件 或者同一个事件的依次触发问题 个人建议如果是一个事件的话那么最好写成函数, ...
- Vue自定义事件:触发自定义事件
一 项目结构 二 子组件(Mongo.vue) <template> <button @click="eat">按钮</button> < ...
随机推荐
- Event 带参
var handler={ message:"Event handled.", handlerFun:function(){ alert(this.message) } }; // ...
- Hybird App ( 混合模式移动应用)开发初体验
最近1,2个月一直都尝试开发一款Hybird app,遇到了很多问题,谈谈自己的体会. Hybird app (混合模式移动应用),它利用例如安卓端webview组件+HTML5内嵌的方式混合的方式开 ...
- python-获取本机mac地址
#!/usr/bin/env python #-*- coding:utf-8 -*- ############################ #File Name: getmac.py #Auth ...
- codeblocks如何watch数组
codeblocks13.12+GDB 调试的时候,main传了一个int a[10]给quicksort 但是在quicksort内部,debugger把a看成一个pointer而不是array,所 ...
- 谁说selenium打开firefox不用驱动的???!!!!
selenium3下写自动化脚本,使用firefox(48) 要下载驱动了 geckodriver 就是这个,和其他驱动放一个地方~~~
- struts2的validate在使用过程中的一个问题
在项目中有一个新增客户信息的的功能: 1.在进入加入页面:add.jsp页面之前,要调用一个add_init.do来获取省份信息列表以供在add.jsp进行选择. 2.add页面填写完毕以后.提交给 ...
- 40-语言入门-40-C小加之随机数
题目地址: http://acm.nyist.net/JudgeOnline/problem.php?pid=255 15 20 32 40 67 89 300 400 代码: #includ ...
- start-stop-daemon
start-stop-daemon是OpenRC计划的一部分,这个程序最先出现在Debian系的Linux发行版中,这里有个比较古老的手册页面,更详细更直观的办法当然是通过man start-stop ...
- cpu故障定位 top strace pstack
一次服务器CPU占用率高的定位分析 推荐 背景:通过性能监控发现上线服务器cpu某核占用率已经达到了100%,而且是由我们的某个核心服务导致的.幸亏由于我们的服务进程由多个相同worker(线程) ...
- Dynamic Web Project 的学习笔记
文章框架: 1.Dynamic Web Project 概念 2.eclipse 中的动态Web 项目与 Myeclipse 中的web项目有何区别 3.动态的运行原理及目录结构---是否都涉及到由 ...