码迷,mamicode.com
首页 > 其他好文 > 详细

事件处理

时间:2016-06-06 20:33:46      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:

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

 

事件处理

标签:

原文地址:http://www.cnblogs.com/heiheii-blog/p/5564955.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!