js事件基础

1、Html标签中写事件
2、DOM 0级
document.getElementById('xx').onclick = function(){}...
document.getElementById('xx').onclick = null; //删除
3、 DOM 2级
非IE8以上(不包括IE8、谷歌、火狐等支持的)
//第三个参数false  开启冒泡效率高 ，默认为true捕获事件,效率低
//这个在事件方法名上一定没有on (onlcick,onchnage。。) 
document.getElementById('xx').addEventListener('click',demoFunction,false); 
document.getElementById('xx').removeEventListener('click',demoFunction,false);//删除,参数必须跟添加一样方法名如果是匿名函数无法删除

//事件捕获、冒泡
//冒泡：由内向外
//捕获：由外向内
document.getElementById('xx').addEventListener('click',function(){},true) //第三个参数为true，则是事件捕获，由外向内，如果多层点击内层，由外向内执行多次才会执行到，效率低
document.getElementById('xx').addEventListener('click',function(){},false) //第三个参数为false(默认false，为了兼容性建议不要省略)，则是事件冒泡，由内向外，如果多层点击内层，由内向外执行一次就会执行到，效率高


IE8以下包括IE8
//必须加on
document.getElementById('xx').attachEvent('onclick',demoFunction); 
document.getElementById('xx').detachEvent('onclick',demoFunction);  


IE 非IE兼容性

4、对象绑定事件触发事件
var eventUtil={
    addHandel:function(ele,handel,func){
        if(ele.addEventListener){
            ele.addEventListener(func,handel,false);
        }else if(ele.attachEvent){
            ele.attachEvent('on'+func,handel);
        }else{
            ele['on'+func] = handel;
        }
    },
    removeHandel:function(ele,handel,func){
        if(ele.addEventListener){
            ele.removeEventListener(func,handel);
        }else if(ele.attachEvent){
            ele.detachEvent('on'+func,handel);
        }else{
            ele['on'+func] = null;
        }
    }
}

var ele = document.getElementById('my');
eventUtil.addHandel(ele,tan,'click');
function tan(){
    alert(1);
}



5、事件对象

A、非IE下、IE8以上（不包括IE8）
function test(event){
}
常用事件对象属性:
event.type : 事件方法('click'、'change'。。。);
event.target : 该事件的目标，对象 
event.bubbles
event. canselable
常用事件对象方法:
event.stopPropagation() :阻止事件冒泡
event.preventDefault():阻止事件默认行为，例如a 默认行为就是跳转，就是默认阻止其跳转


B、IE8以下包括IE8
function test(event){
}
常用事件对象属性:
event.type : 事件方法('click'、'change'。。。);
event.srcElement: 该事件的目标，对象 
event.bubbles
event. canselable
常用事件对象方法:
event.cancelBubble() :阻止事件冒泡,设置为true阻止冒泡事件，false不阻止冒泡 event.cancelBubble = true; 执行才当方法
event.returnValue():设置为fasle阻止事件默认行为 event.returnValue = false; 执行才当方法


兼容IE、火狐、谷歌等
var event = window.event || event;  //ie8及以下window.event、w3c浏览器event
var type = event.type;
var obj = event.targer || event.srcElement;

var eventUtil = {
      addHandler:function(ele,type,handler){
        if(ele.addEventListener){
            ele.addEventListener(type,handler,false);
        }else if(ele.attachEvent){
            ele.attachEvent('on'+type,handler);
        }else{
            ele['on'+type] = handler;
        }
    },
    removeHandler:function(ele,type,handler){
        if(ele.addEventListener){
            ele.removeEventListener(type,handler);
        }else if(ele.attachEvent){
            ele.detachEvent('on'+type,handler);
        }else{
            ele['on'+type] = null;
        }
    },
    getEvent:function(event){
          return  event = window.event || event;
    },
    preventDefault:function(event){
         event = window.event || event;
        if(event.preventDefault()){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
   },
   stopPropagation:function(event){
         event = window.event || event;
        if(event.stopPropagation()){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
   },
   getType:function(event){
    event = window.event || event;
    return event.type;
   },
   getTarget:function(event){
    event = window.event || event;
    return event.target ? event.target : event.srcElement;
   }
}



6、键盘事件
keyup:键盘任意按键释放触发（用的比较多）
keydown:键盘任意按键按下触发，按住不放会重复触发
keypress:键盘字符按键按下触发，按住不放会重复触发

event.coden : 键盘按下的键码（对应建瓯按上的按键），回车是13 、空格32



7、事件委托：给table绑定事件，操作给里面的td

document.getElementsByTagname('table')[0].onclick = function(e){
    e.target.style.background = 'black';  //e.target: 具体点击的那个td格子
}