JavaScript中的addEventListener自定义事件
在js事件中，我们首先想到的是click、dblclick、mouseover、mouseout、mouseenter、mouseleave、mousedown、mouseup、mousemove、wheel、contextmenu（点击鼠标右键时）这些常用的事件，在给第三方提供sdk使用时，这些预定义的事件有时无法满足我们的需求。
由于第三方sdk运行环境未知，而且可能会导致事件冲突的问题，这时候就需要我们自定义事件避免问题的发生。
document.createEvent用于创建事件，DOM Level 3增加很多事件类型，个人觉得其中最有用的是CustomEvent自定义事件。
为DOM元素创建自定义事件的步骤：
1、创建事件：var ev = document.createEvent('CustomEvent');
2、初始化事件：ev.initCustomEvent('自定义事件名称', false(是否允许冒泡), false(是否允许中断),args)
3、为DOM添加事件监听：element.addEventListener('自定义事件名称',fn,false)
4、分发(触发)自定义事件：element.dispatchEvent(ev)
说明1: createEvent（eventType）
参数：eventType 共5种类型：
Events ：包括所有的事件.
HTMLEvents：包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select',
'submit', 'unload'. 事件
UIEvents ：包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.
间接包含 MouseEvents.
MouseEvents：包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'.
MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved',
'DOMCharacterDataModified', 'DOMNodeInsertedIntoDocument',
'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.
说明2: 在createEvent后必须初始化，常用5种对应的初始化方法
HTMLEvents 和 通用 Events：
initEvent( 'type', bubbles, cancelable )
UIEvents ：
initUIEvent( 'type', bubbles, cancelable, windowObject, detail )
MouseEvents：
initMouseEvent( 'type', bubbles, cancelable, windowObject, detail, screenX, screenY,
clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget )
MutationEvents ：
initMutationEvent( 'type', bubbles, cancelable, relatedNode, prevValue, newValue,
attrName, attrChange ) 说明3: 初始化完成后就可以触发需要的事件，targetObj.dispatchEvent(event)
使targetObj对象的event事件触发
需要注意的是在IE 5.5+版本上请用fireEvent方法，还是浏览兼容的考虑
自定义事件代码示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST</title>
<style>
.send{
margin: 10px 0;
height: 50px;
background: #6a61ff;
color: #fff;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="send" onclick="handleSend('1')">点击触发自定义事件，传递参数1</div>
<div class="send" onclick="handleSend('2')">点击触发自定义事件，传递参数2</div>
<div>
<p>接收自定义事件数据</p>
<p id="receive"></p>
</div>
<script>
var event = document.createEvent('HTMLEvents');
// 初始化testEvent事件
event.initEvent('testEvent', false, true);
function handleSend(data){
event.data = {
data
};
// 触发自定义事件
window.dispatchEvent(event);
console.log('1234')
}
window.addEventListener('testEvent', function(obj){
console.log('receive',obj.data);
document.getElementById('receive').innerHTML = JSON.stringify(obj.data)
});
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。