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格子
}