事件

事件流

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

 

DOM0级事件处理程序

先把元素取出来，然后为其属性添加一个事件的方法叫DOM0级处理程序。
它是一种较传统的方式：把一个函数赋值给一个事件处理程序的属性。
优点：简单，跨浏览器的优势

btn.onclick=function(){};
btn.onclick=null;//删除事件

 

DOM2级事件处理程序

DOM2和DOM0级共同优点：可以给一个元素上添加多个事件处理程序，事件触发的时候会按照绑定顺序执行各个函数。。
DOM2级事件处理程序，ie不支持，ie有专用的事件处理程序。

btn.addEventListener("click",func,false);//false表示冒泡，true表示捕获
btn.removeEventListener("click",func,false);

 

IE事件处理程序

IE也提供了类似DOM0级和DOM2级事件处理程序
attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数，事件处理程序的名称和事件处理程序的函数。去掉了布尔值，不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡！

btn.attachEvent('onclick',func);
btn.detachEvent('onclick',fun);

 

跨浏览器解决方案

var eventUtil = {
    //添加句柄
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addHandleListenter(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        } else {
            element['on' + type] = handler;
        }
    },
    //删除句柄
    removehandler：
    function(element, type, handler) {
        if (element.romoveEventListener) {
            element.romoveHandleListenter(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler);
        } else {
            element['on' + type] = null;
        }
    }
};

 

事件对象

什么是事件对象？在触发DOM上的事件时都会产生一个对象
DOM中的事件对象event属性

• type属性用于获取事件类型
• target属性用于获取事件目标
• stopPropagation()方法 用于阻止事件冒泡
• preventDefault() 方法 阻止事件的默认行为：href，submit等

IE事件对象

• type属性 用于获取事件类型
• srcElment属性 用户获取事件目标
• cancelBubble[=true]属性 用于阻止事件冒泡
• returnValue [=false]性 用于阻止事件的默认行为