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