一、事件级别
//dom0
element.onclick = function(){}
//dom2
element.addEventListener('click',function(){},false)
//dom3
element.addEventListener('keyup',function(){},false)
二、事件模型
捕获、冒泡
三、事件流
事件流.png
事件通过捕获到达目标元素，之后事件通过冒泡再上传到window对象。
四、DOM事件捕获的具体流程
window =>document =>html =>body =>... =>目标元素
事件捕获的具体流程.png
ps:js获取document节点document.documentElement
五、Event对象常见应用
event.preventDefault()//阻止默认行为，如a链接跳转
event.stopPropagation()//阻止冒泡
event.stopImmediatePropagation()//执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行
event.currentTarget//绑定事件的元素如：ul
event.target//触发的元素如：li
//事件委托
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
var ul1 = document.getElementById('ul1');
ul1.addEventListener('click',function (e) {
console.log(e.target) //<li>2</li>
console.log(e.currentTarget) //<ul id='ul1'></ul>
})
六、自定义事件
<button id='ev'>ev button</button>
var ev = document.getElementById("ev");
var eve = new Event('custome')
ev.addEventListener('custome', function () {
console.log('custome')
})
ev.dispatchEvent(eve);
CustomEvent 可以创建一个更高度自定义事件，还可以附带一些数据，具体用法如下：
var myEvent = new CustomEvent(eventname, options);
其中 options 可以是：
{
detail: {
...
},
bubbles: true,
cancelable: false
}
