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"falsefalse);
 
// 触发, 即弹出文字
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浏览器下事件触发实现的完整机制,应该说讲得还是蛮细的。

自定义事件的删除
与触发事件不同,事件删除,各个浏览器都提供了对于的时间删除方法,如removeEventListenerdetachEvent。不过呢,对于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, truetrue); 
            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的更多相关文章

  1. 自定义事件的触发dispatchEvent

    1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: documen ...

  2. js的自定义事件

    js中的事件是js的一大技术点,说白了就是操作dom树的唯一途径. 关于事件无非两种绑定方式: document.getElementById('xxx').onclick = function(){ ...

  3. JS中自定义事件的使用与触发

    1. 事件的创建 JS中,最简单的创建事件方法,是使用Event构造器: var myEvent = new Event('event_name'); 但是为了能够传递数据,就需要使用 CustomE ...

  4. js中自定义事件,使用了jQuery

    $(function(){ $('#btn').bind("myClick", function(){ //自定义myClick事件 $('#test').append(" ...

  5. JavaScript自定义事件和触发(createEvent, dispatchEvent)

    $(dom).addEvent("ft", function() { alert("走起"); }); // 创建 var evt = document.cre ...

  6. js简单自定义事件与主动触发事件

    var events = { addHandler: function (element, eventType, handler) { if (element.addEventListener) { ...

  7. js(react.js) button click 事件无法触发

    今天遇到一个诡异的问题.button 上的点击事件触发不了. 找个几个小时,原因是 js 报错了. <Button type="primary" htmlType=" ...

  8. 浅析js绑定同一个事件依次触发问题系列(一)

    算了 还是上代码吧  记得写过这篇文章,但是找不到了(对,就是找不到了,算了再写一遍吧) 也是在群中有人问这个绑定不同事件 或者同一个事件的依次触发问题 个人建议如果是一个事件的话那么最好写成函数, ...

  9. Vue自定义事件:触发自定义事件

    一 项目结构 二 子组件(Mongo.vue) <template> <button @click="eat">按钮</button> < ...

随机推荐

  1. php对象序列化总出错false

    php unserialize 返回false的解决方法 php 提供serialize(序列化) 与unserialize(反序列化)方法. 使用serialize序列化后,再使用unseriali ...

  2. php私有成员private的程序题目

    class base { private $member; function __construct() { echo __METHOD__ . "(begin)\n"; $thi ...

  3. nginx 模块简介

    nginx模块一般分为5类:核心模块.标准http模块.可选http模块.邮件服务模块.第三方模块. 其中核心模块和标准http模块在快速编译之后就包含在了nginx中. 主要看一下核心模块.标准ht ...

  4. 60. Search Insert Position 【easy】

    60. Search Insert Position [easy] Given a sorted array and a target value, return the index if the t ...

  5. ThinkPHP -- 问题

    @.nginx下,找不到页面,如果然nginx支持pathinfo模式 原文:http://www.leixuesong.cn/1418 把文章的配置拷贝了下.

  6. Linux 文件管理(C语言库函数二--程序日志)

    文件删除和改名 int remove(const char *pathname); int rename(const char *oldpath,const char *newpath); remov ...

  7. Servlet 打包部署

    默认情况下,Servlet 应用程序位于路径 <Tomcat-installation-directory>/webapps/ROOT 下,且类文件放在 <Tomcat-instal ...

  8. python 面向对象三大特性(封装 多态 继承)

    今天我们来学习一种新的编程方式:面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)注:Java和C#来说只支持面向对象编程,而python比较灵活即支持面 ...

  9. RMI 连接超时时间设定

    System.setProperty("sun.rmi.transport.tcp.responseTimeout", "2000"); System.setP ...

  10. SQL金典

    ps:补充自己的基础知识,大神请无视.. ~~~~~~~~~~~~~~~~~~~~~ DataBase Management System,DBMS.... Catalog ...库 Table... ...