JS事件总结--试验过的一些小经验

从IE9开始已经支持事件捕获了。
删除通过DOM0级方法指定的事件处理程序，只要将事件处理程序的属性值设置为null即可。
btn.onclick=null;

attachEvent的事件名称是onclick，而addEventListener的事件名称是click

        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert(this.id);
        }        
        btn.addEventListener('click', function (e) {
            alert("我是来测试chrome的");
        }, false);
        btn.attachEvent('onclick', function (e) {
            alert("我是来测试ie的");
        });

上述代码在ie9下居然三个alert都弹出来了，也就是说其实从ie9开始已经走的事件捕获模式了，趋向于dom标准，但是又没有完全废弃自己原先的一套规则，所以两种事件监听它都支持。

        var btn = document.getElementById("btn");     
        btn.attachEvent('onclick', function (e) {
            alert("1");
        });
        btn.attachEvent('onclick', function (e) {
            alert("2");
        });

上述代码在ie8及以下浏览器，弹出alert框的顺序为2,1,但在ie9下弹出alert框的顺序为1,2

        var btn = document.getElementById("btn"); 
        btn.addEventListener("click",function(e){
            alert(1);
        });
        btn.addEventListener("click",function(e){
            alert(2);
        });

事实上DOM2级标准就是按照添加事件的顺序注册的，也就是说在firefox、chrome等浏览器下，弹出alert框的顺序是1,2
在ie下，事件处理程序是在全局作用域下运行的，所以事件处理程序中的this其实就是window（基于上面的经验，ie9开始趋向于DOM标准，我又特意做了测试，结果alert的也是true,我有点晕）

        var btn = document.getElementById("btn"); 
        btn.attachEvent('onclick', function (e) {
            alert(this===window);   //true
        });

在chrome等浏览器下，this指向的是当前对象

        var btn = document.getElementById("btn"); 
       
        btn.addEventListener("click",function(e){
            alert(this===btn);    //true        
        });     

在dom0级别的事件绑定中，ie8及以下浏览器中e输出的为undefined,而chrome下的e输出的对象跟dom2级别中的e完全一样

        var btn = document.getElementById("btn");
        btn.onclick = function (e) {
            console.log(e);//此处在ie8及以下输出的是undefined而在ie9下输出的是object MouseEvent
        }
        btn.attachEvent('onclick', function (e) {
            console.log(e);//在ie7下输出的是object，在ie8及以下输出的是object Event，而在ie9下输出的是object MSEventObj
        });

        var btn = document.getElementById("btn");
        btn.onclick = function (e) {
            console.log(e);//在chrome下，此处的e和下面的e输出的都是MouseEvent
        }        
        btn.addEventListener("click", function (e) {
            console.log(e);
        });

看一下chome下输出的e是啥吧

说说这里面有哪些重要的属性/方法吧
bubbles-->Boolean-->事件是否冒泡

cancelable-->Boolean-->是否可以取消事件的默认行为

currentTarget-->Boolean-->事件处理程序当前正在处理事件的那个元素

defaultPrevented-->Boolean-->为true 表示已经调用了preventDefault()

detail-->Integer-->与事件相关的细节信息

eventPhase-->Integer-->调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段

preventDefault()-->Function-->取消事件的默认行为。如果cancelable是true，则可以使用这个方法

stopImmediatePropagation()-->Function-->取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用

stopPropagation()-->Function-->取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法

target-->Element-->事件的目标

type-->String-->被触发的事件的类型

其实我自己也没有搞清楚stopImmediatePropagation和stopPropagation的区别，太多方法

需要理解currentTarget和target的区别及联系，在事件处理程序内部，this始终等于currentTarget值，即currentTarget是指当前被触发或者说正在处理事件的那个元素，而target是指当前的目标元素；看看代码具体解释一下：`

    var btn = document.getElementById("btn");
    btn.onclick = function (e) {
        console.log(e.currentTarget == this); // true
        console.log(e.target == this);  // true
    }`
    

对btn按钮触发点击事件，那么e.currentTraget指向了this，e.target也指向了this
而如果是对body绑定事件处理程序，那么e.currentTarget就指向了document.body了，那么e.target 指向与 btn那个元素

document.body.onclick = function(e){
    console.log(e.currentTarget === document.body); // true
    console.log(document.body === this);  // true
    console.log(e.target === document.getElementById("btn")); //true
};

由于ie下事件处理程序的作用域是在全局使用域下，所以它的event对象也是通过window.event来
一般最简化的跨浏览器的事件通用js如下：

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) {
        return event ? event : window.event;
    },
    getTarget: 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;
        }
    },
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    },
    getWheelDelta: function(event) {
        if(event.wheelDelta) {
            return event.wheelDelta;
        }else {
            return -event.detail * 40
        }
    },
    getCharCode: function(event) {
        if(typeof event.charCode == 'number') {
            return event.charCode;
        }else {
            return event.keyCode;
        }
    }
};

哪些事件不能冒泡：在我知晓的范围内有focus、blur、unload、load、mouseEnter、mouseLeave