一、javascript自定义事件创建
// 接收参数是 事件类型
document.createEvent(/**事件类型**/)
事件类型一共有4类，分别是:
-
UIEvents（通用UI事件）当用户与页面上元素交互时触发;
-
MouseEvents（通用的鼠标事件）用户通过鼠标在页面操作时触发;
-
MutationEvents（通用的变动事件）监听DOM 树所做更改;
-
HTMLEvents（通用的HTML相关事件）HTML事件就是元素上的事件如blur、change、resize 创建事件后，初始化返回的event对象;
二、javascript自定义事件初始化
初始化方法分别是initUIEvent()、initMouseEvent()、initMutationEvent()、initEvent()，都是接收3个参数：
-
type 事件类型，如"click";
-
bubbles 决定该事件是否应该向上冒泡传递;
-
cancelable 决定该事件是否可以取消默认操作，如true 至少有一个事件调用了Event.preventDefault();
// 创建自定义事件
<script>
var e = document.createEvent("HTMLEvents");
// 初始化事件
e.initEvent("eventName", false, true);
// 监听document的eventName事件名
document.addEventListener("eventName", function(e){
// e.target 监听事件目标元素
console.log("执行成功...")
})
// 手动触发自定义事件
document.dispatchEvent(e);
</script>
三、针对IE8及以下浏览器不支持createEvent时使用的兼容方法
使用onprototypechange事件，当dom元素的属性值发生变化时会监听触发这个事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>
请使用IE8或更低版本的浏览器测试
</h1>
<button id='btn' eventAttr='0'>点击修改按钮的eventAttr属性值</button>
</body>
<script>
var btn = document.getElementById('btn');
btn.attachEvent('onpropertychange', function(e){
if(e.propertyName === 'eventAttr'){
console.log("执行成功...")
}
})
btn.attachEvent('onclick', function(){
btn.setAttribute('eventAttr', 1);
})
</script>
</html>
