javascript自定义事件

Posted 2020-10-04 方帅

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("触发成功！");

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

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

 

转发自：http://www.mamicode.com/info-detail-1029072.html