浅谈Dom事件

事件流

事件流所描述的就是从页面中接受事件的顺序。

DOM事件流包括三个阶段:
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段

捕获阶段：window => document => html => body => div => ... => 目标元素
冒泡阶段：目标元素 => ... => body => html => document => window

DOM级别

DOM0: element.onclick = function () {...};
DOM2: dom.addEventListener('click', function(){
        // ...
      }, false);
DOM3: 绑定方式同DOM2，增加了键盘、鼠标等事件

event对象

event.preventDefault() : 取消默认事件
event.stopPropagation() : 停止事件冒泡
event.stopImmediatePropagation() : 优先级，执行该方法，其他同类事件取消。
// 如果某个元素有多个相同类型事件的事件监听函数,则当该类型的事件触发时,
// 多个事件监听函数将按照顺序依次执行.如果某个监听函数执行了 
// event.stopImmediatePropagation()方法,则除了该事件的冒泡行为被阻止之外，
// 该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.

Event.currentTarget : 当前注册事件的对象的引用, 指向事件绑定的元素。
Event.target : 事件触发的元素。

事件代理

parent.addEventListener('click',function(event){
       console.log('这是父元素');
       console.log(event.target); 
       console.log(event.currentTarget); 
}, false);


<ul>
    <li><span>点击<span></li>
    <li>点击</li>
</ul>
var elementUl = document.querySelector('ul');
elementUl.addEventListener('click', function(event){
    var el = event.target;
    while (el.tagName !== 'LI') {
        if (el === elementUl){
            el =null;
            break;
        }
        el = el.parentNode;//返回當前元素的父节点
    }

    if (el) {
        console.log(el)
    }
}, false);

自定义事件

var eve = new Event('test');
window.addEventListener('test', function(e){
    console.log('test occured', e);
}, false);
setTimeout(() => {
    window.dispatchEvent(eve);
}, 1000);