javascript自定义事件

Javascript中的事件包括click、mouseover、submit、change等等,它们分别在元素被点击、鼠标滑过、表单提交、域的内容改变时触发,那么自定义事件是如何定义和触发的?它有什么意义?

如何定义?

自定义事件创建分两步:创建事件模型、初始化。

document.createEvent()用于创建事件模型,它接收一个参数,表示事件模型的类型。事件模型类型一共有4类,分别是:

UIEvents(通用的UI事件),鼠标事件键盘事件都继承自UI事件

MouseEvents(通用的鼠标事件)

MutationEvents(通用的突变事件)

HTMLEvents(通用的HTML事件)

 

javascript自定义事件_第1张图片

 

什么叫突变事件?文档中的某个元素被移除了,就会触发突变事件中的DOMNodeRemovedFromDocument事件

什么叫HTML事件,就是元素上的事件。如blur、change、resize

对4种事件模型详情感兴趣可移步这里了解更多……

创建事件模型后,初始化返回的event对象。以上4种事件模型对应的初始化方法分别是initUIEvent()、initMouseEvent()、initMutationEvent()、initEvent(),它们接收3个参数:

type 事件类型,如“click”

bubble 是否冒泡

cancelable 是否可以取消事件默认行为

当然他们各自还有其它参数,这里主要介绍自定义事件,就不展开了。

 

如何触发?

自定义事件初始化以后,如何触发呢?自定义事件和浏览器的行为不相干,都是通过元素的dispatchEvent()方法主动触发的,该方法接收一个参数,表示触发的事件对象,即document.createEvent()的返回值。

综上,来一个例子:

<script> // 创建自定义事件 var e = document.createEvent("HTMLEvents"); // 初始化wangmeijian事件 e.initEvent("wangmeijian", false, true); // 监听document的wangmeijian事件 document.addEventListener("wangmeijian", function(){ alert("触发成功!") }) // 触发自定义事件 document.dispatchEvent(e); </script>
执行

 源码:

<script>  
// 创建自定义事件
var e = document.createEvent("HTMLEvents");
// 初始化wangmeijian事件
e.initEvent("wangmeijian", false, true);
// 监听document的wangmeijian事件
document.addEventListener("wangmeijian", function(){
    alert("触发成功!");
})
// 触发自定义事件
document.dispatchEvent(e);  
</script> 

 

 IE8及以下浏览器不支持createEvent方法,但是它们有onprototypechange事件,当dom元素的属性值发生变化时会触发这个事件,也就是说,可以给dom元素设置一个属性attr,监听该元素的onprototypechange事件,判断发生变化的属性(event对象下的prototypeName)是不是attr,是则执行自定义事件函数。要主动触发onprototypechange事件,只需要修改元素的attr属性值即可。

demo(仅测试了IE11下的IE7、IE8文档模式)

 源码:

<h1>
        请使用IE8或更低版本的浏览器测试
</h1>
<button id="btn" eventAttr="0">点击修改按钮的eventAttr属性值</button>
<script>  
var btn = document.getElementById("btn");

btn.attachEvent("onpropertychange", function(e){
    if(e.propertyName === "eventAttr"){
        alert("触发成功!");
    }
})
btn.attachEvent("onclick", function(){
    btn.setAttribute("eventAttr", 1);
})
</script> 

 

有什么意义?

到这里有的同学会问了,写这么一堆代码,最终是为了执行这一行代码

alert("触发成功!");

是主动执行的,并且知道要在什么时候执行,那为什么不直接写这一行就够了,自定义事件的意义在哪里?

我的理解是:为了代码解耦,你不需要关心事件什么时候发生,你只需要关心事件发生后要做什么事。在多人协作开发中,这点尤其重要!  

 

作者:古德God
出处:http://www.cnblogs.com/wangmeijian
本文版权归作者和博客园所有,欢迎转载,转载请标明出处。
如果您觉得本篇博文对您有所收获,请点击右下角的 [推荐],谢谢!

 

你可能感兴趣的:(javascript自定义事件)