javascript自定义事件
Javascript中的事件包括click、mouseover、submit、change等等,它们分别在元素被点击、鼠标滑过、表单提交、域的内容改变时触发,那么自定义事件是如何定义和触发的?它有什么意义?
如何定义?
自定义事件创建分两步:创建事件模型、初始化。
document.createEvent()用于创建事件模型,它接收一个参数,表示事件模型的类型。事件模型类型一共有4类,分别是:
UIEvents(通用的UI事件),鼠标事件键盘事件都继承自UI事件
MouseEvents(通用的鼠标事件)
MutationEvents(通用的突变事件)
HTMLEvents(通用的HTML事件)
什么叫突变事件?文档中的某个元素被移除了,就会触发突变事件中的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>
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
本文版权归作者和博客园所有,欢迎转载,转载请标明出处。
如果您觉得本篇博文对您有所收获,请点击右下角的 [推荐],谢谢!