事件机制

DOM2事件流

事件捕获阶段 --- 处于目标阶段 --- 事件冒泡阶段

事件捕获

当触发某个元素的事件时，会从顶层对象document发出一个事件流，随着dom树向目标元素节点流去，直到找到目标节点才停止。在捕获阶段，该事件的处理函数不会执行。

处于目标阶段

当到达目标元素时，触发相应事件，执行相应处理函数。

事件冒泡

当触发某个元素的事件时，会从该元素一层层的向上传播，直到到达document元素。在此途中，如果有节点绑定了相应的事件处理函数，则都会被触发

阻止事件冒泡

firefox浏览器：e.stopPropagation()

IE浏览器：e.cancelBubble() = true

得到事件代理对象和事件源

xxx.onclick = funtion(e){
    var event = e ||window.event;
    var target = event.target || event.srcElement;
}

事件代理

利用事件冒泡机制，将事件绑定在父元素身上，当触发子元素的某事件时，会先冒泡到父元素上，然后父元素判断事件源对象是否为目标元素，再决定是否执行处理函数

<ul class="uu">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ulobj = document.querySelector('.uu');
        ulobj.onclick = function (e) {
            var event = window.event || e;
            var target = event.srcElement || event.target;
            if (target.tagName.toLowerCase() === 'li') {
                alert('点到啦')
            }
        }
    </script>

监听事件的方式

在DOM0级中，通过`on+事件名`的方式监听事件

ulobj.onclick = function (e) {}

在DOM2级中，通过addEventListener监听事件，removeEventListener移除事件

// 第一个参数：事件类型  第二个参数：事件处理函数 第三参数：是否使用事件捕获，默认为false
ulobj.addEventListener('click', func, false)

ulobj.removeEventListener('click', func, false)

而在老的IE版本中，需要处理兼容

ulobj.attachEvent('on'+type, func) // 绑定
ulobj.detachEvent('on'+type, func) // 移除