JS日常随笔:DOM事件

DOM事件级别

DOM 事件级别	例子
DOM 0	element.onclick = function(){}
DOM 2	element.addEventListener(‘click’,function(){},false}
DOM 3	element.addEventListener(‘keyup’,function(){},false}

因为DOM 1一般只有设计规范没有具体实现,所以一般跳过. 其中 IE 浏览器的 addEventListener函数对就是 attachEvent函数.

DOM事件模型

1. 事件捕获
2. 事件冒泡

DOM事件流

事件流的过程
1. 事件通过捕获到达目标元素
2. 目标阶段
3. 目标元素再上传到window对象

事件捕获的具体过程:
window对象接收事件->document->html->body->…..一直传递直到目标元素

事件冒泡的具体过程:
目标元素-> … -> body -> html -> document -> window

EVENT对象

函数	功能
preventDefault	阻止默认行为
stopPropagation	停止事件传递
stopImmediatePropagation	阻止其它绑定事件执行
currentTarget	当前发生事件的元素
target	触发事件的节点

自定义事件

var eve = new Event('eveName') // 注册事件

ev.addEventListener('eveName',function(){},false) // 把事件绑定到节点上

ev.dispatchEvent(eve)   // 触发事件

var eve = new CustomEvent("eveName", {
    detail: {},        // 自定义参数值 
    bubbles: true,     // 是否可以冒泡
    cancelable: false  // 是否可以取消
});

ev.addEventListener('eveName',function(){},false) // 把事件绑定到节点上

ev.dispatchEvent(eve)   // 触发事件