1） html事件处理： <div onclick = zdh()></div>

2)  dom0  dom元素.onclick = function zdh(){};

3)  dom2 : 3个参数

dom元素.addEventListener(事件类型 , 回调函数, true );

dom元素.addEventListener(click, zdh ,true);// 事件类型没有on  true表示事件捕获类型 false表示事件冒泡类型 

 

移除事件：

html事件处理：代码耦合性太高

dom0：  dom元素.onclick = null;

dom2：  removeEventListener(click,zdh,true);// 把移除事件写在回调函数中，可以实现只执行一次的效果。

IE事件：

dom元素.attachEvent("onclick" , zdh );//两个参数 要用onclick 而不是 click；

dom元素. detachEvent("onclick" , zdh); 

 

冒泡：

先执行“我是按钮”，在弹出“我是容器” //false;

先执行“我是容器”，在弹出“我是按钮” // true;

 

能支持所有浏览器：== 兼容dom0，dom2，IE

var EventUtil = {

　　//添加

　addEvent : function(ele,eventType,fun){

　　if( ele.addEventListener){

　　ele.addEventListener( eventType,fun,false);

}else if( ele.attachEvent){

　　ele.attachEvent( "on"+eventType,fun);

}else{

　　ele["on"+eventType] = fun ; //  原本是ele.onclick，但是需要加“on” 所以应用ele[];

}

}　,

　　//删除

deleteEvent : function(ele,eventType,fun){
      if( ele.removeEventListener){
          ele.removeEventListener( eventType,fun,false);     }else if( ele.detachEvent()){
          ele.detachEvent( "on"+eventType,fun);     }else{
          ele["on"+eventType] = null ;     } }

};

EventUtil.addEvent(div1,"click",zdh);

EventUtil.deleteEvent(div1,"click",zdh);

function zdh(){

　　alert(11111);

}

 

点击事件 事例 点击隐藏 再点击显示；

支持事件冒泡：onmouseout,onouseover,onclick,dblclick,onmousemove,onmouseup,onmousedown

阻止事件冒泡 mouseleave ,onmouseenter