DOM事件

事件流

事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）
事件捕获：不太具体的节点应该更早接收到事件而最具体的节点最后接收到事件
IE——事件冒泡流

事件对象：在触发DOM上的事件时都会产生一个对象

DOM中的事件对象

1. type属性 用于获取事件类型
2. target属性 用于获取事件目标
3. stopPropagation 阻止事件冒泡
4. preventDefault() 阻止事件的默认行为

IE中的事件对象

1. type属性 用于获取事件类型
2. srcElement属性 用于获取事件的目标
3. cancelBubble属性 用于阻止事件冒泡 设置为true表示阻止冒泡 设置为false表示不阻止冒泡
4. returnValue属性 用于阻止事件的默认行为 设置为false表示阻止事件的默认行为

事件处理程序

html事件处理程序

html事件缺点：html和js紧密耦合在一起

<input type="button" value="按钮1" id="btn1" onclick="alert('hello')">
<input type="button" value="按钮2" id="btn2" onclick="showMes()">

DOM0级事件处理程序

较传统的方式：把一个函数赋值给一个事件的处理程序的属性
用的比较多的方法 简单 跨浏览器的优势

btn3.onclick = function() {
     alert('这是通过DOM0级添加的事件');
}
btn3.onclick = null;

DOM2级事件处理程序

DOM2级定义了两个方法：用于处理指定和删除事件处理程序的操作
addEventListener()和removeEventListener()
接收三个参数：要处理的事件名、作为事件处理程序的函数、布尔值

var btn4 = document.getElementById('btn4');
    btn4.addEventListener('click',showMes,false);   
    // false冒泡
    btn4.addEventListener('click',function(){
    	alert(this.value);
    },false);
    删除事件
    btn4.removeEventListener('click',showMes,false);

IE事件处理程序

attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数：事件处理程序的名称和事件处理程序的函数
不使用第三个参数的原因：IE8及更早的浏览器版本只支持事件冒泡

var btn5 = document.getElementById('btn5');
    btn5.attachEvent('onclick',showMes);
    btn5.detachEvent('onclick',showMes);

跨浏览器的事件处理程序

var eventUtil = {
        // 添加句柄
        addHandler: function(element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false)
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, handler);
            } else {
                element['on' + type] = handler;
            }
        },
        // 删除句柄
        removeHandler: function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false)
            } else if (element.detachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        getEvent: function(event) {
            // event = event || window.event;
            return event ? event : window.event;
        },
        getType:function(event){
             return event.type;
        },
        getElement:function(event){
             return event.target||event.srcElement;
        },
        preventDefault:function(event){
             if(event.preventDefault){
                  event.preventDefault();
             }else{
                  event.returnValue=false;
             }
        },
        stopPropagation:function(event){
             if (event.stopPropagation) {
                  event.stopPropagation();
             }else{
                  event.cancelBubble=true;
             }
        }

    }
eventUtil.addHandler(btn5, 'click', showMes);
    eventUtil.addHandler(box, 'click', function(){
    	alert('父盒子');
    });
    eventUtil.addHandler(go, 'click', function(e){
    	e=eventUtil.getEvent(e);
    	alert(eventUtil.getElement(e));
    	eventUtil.stopPropagation(e);
    	eventUtil.preventDefault(e);
    });