22.DOM事件类

一、事件级别

//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
}