javascript事件学习

1.dom事件流

事件流：从页面中接受事件的顺序

dom事件流有三个阶段，事件捕获，目标事件，事件冒泡

2.javascript事件兼容性写法

EventUtil={
    addHander:function(element,type,hander){//注册事件监听
        if(element.addEventListener){
            element.addEventListener(type,hander,false);//false表示事件冒泡，dom2级非IE事件
        }else if(element.attachEvent){
            element.attachEvent('on'+type,hander);//dom2级IE事件
        }else{
            element['on'+type]=hander;//dom0级事件
        }
    },
    removeHander:function(element,type,hander){//取消事件监听
        if(element.removeEventListener){
            element.removeEventListener(type,hander,false);//dom2级事件非IE取消
        }else if(element.detachEvent){
            element.detachEvent('on'+type,hander);//dom2级事件IE取消
        }else{
            element['on'+type]=null;//dom0级事件取消
        }
    },
    getEvent:function(event){//获取事件
        return event||window.event;
    },
    getTarget:function(event){//获取事件目标元素
        return event.target||event.srcElement;
    },
    preventDefault:function(event){//阻止浏览器默认行为
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    },
    stopPrepagation:function(event){//取消冒泡
        if(event.stopPrepagation){
            event.stopPrepagation();
        }else{
            event.cancleBubble=true;
        }
    }
}

3.多次注册事件效果

document.getElementById('body').addEventListener('click',function(){console.log('x1')},false);
document.getElementById('body').addEventListener('click',function(){console.log('x2')},false);
//x1,x2
document.getElementById('body').atachEvent('click',function(){console.log('x1')},false);
document.getElementById('body').atachEvent('click',function(){console.log('x2')},false);
//x2,x1
document.getElementById('body').οnclick=function(){console.log('x1')};
document.getElementById('body').οnclick=function(){console.log('x2')};
//x2,重复覆盖

4.事件移除盲点

removeEventListener中移除事件，hander必须是同一个函数，且不能是匿名函数，否则无法移除事件。

document.getElementById('body').addEventListener('click',function(){console.log('x1')},false);
document.getElementById('body').removeEventListener('click',function(){console.log('x1')},false);
//以上传递匿名函数，事件清除无效。
var handle=function(){};
document.getElementById('body').addEventListener('click',handle,false);
document.getElementById('body').removeEventListener('click',handle,false);
//清除有效

5.事件目标与this

currentTarget:注册事件的dom元素，
target:当前单击的元素；
this：事件处理程序中的this始终等于currentTarger

var btn=document.getElementById('btn');
btn.οnclick=function(event){
    console.log(this===event.currentTarget);//true,btn
    console.log(this===event.target);//true,btn
}
//以上事件注册于处理都是在btn上

var btn=document.getElementById('btn');
document.bpdy.οnclick=function(event){
    console.log(this===event.currentTarget);//true,document.body
    console.log(event.target);//btn
}
//以上采用事件委托，事件函数注册在body上

事件的其他属性
event.type:事件类型，click,mouseOver等

6.事件性能优化

每个事件监听函数都是一个对象，都会占用一定的内存，内存中的对象越多，性能就越差。

1.事件委托
    <ul id="parent">
        <li id="id1">1</li>
        <li id="id2">2</li>
        <li id="id3">3</li>
        ...
    </ul>
    document.getElementById(parent).addEventListener('click',function(event){
        var target=event.target;//此时target就是指当前单击的目标元素
        if(target.nodeName==='LI'){
            target.id,
        }
        ...
    },false);

2.清除无用的事件
    <div id="outer">
        <button id="btn" type="button">删除</botton>
    </div>
    var outer=document.getElementById('outer');
    var btn=document.getElementById('btn');
    btn.οnclick=function(){
        btn.οnclick=null;
        btn.innerHtml="删除中...";
    };
    //innerHtml，removeChild,等删除dom后，会导致事件函数在内存中无法删除

7.自定义事件与订阅者模式