zoukankan      html  css  js  c++  java
  • 跨浏览器事件EventUtil

    <div style=" 150px; height: 150px; padding: 25px; border:1px solid blue; " id="divBox">
    	<p style=" 100px; height: 100px; padding:25px; border:1px solid red; " id="pBox">
    		<span style="50px; height:50px; border:1px solid gray; display: block;" id="spanBox">span</span>
    	</p>
    </div>
    
    var divBox = document.getElementById('divBox');
    var pBox = document.getElementById("pBox");
    var spanBox = document.getElementById("spanBox");
    function handler(event){
    	var target = EventUtil.target(EventUtil.event(event));
    	switch(target.id){
    			case "divBox":
    				alert("this is divBox...");
    				break;
    			case "pBox":
    				alert("this is pBox");
    				break;
    			case "spanBox":
    				alert("this is spanBox...");
    				break;
    
    		}
    }
    EventUtil = {
    	addEventListener:function(ele,type,callback,capture){
    		if(window.addEventListener){
    			ele.addEventListener(type,callback,capture);
    		}else if(window.attachEvent){
    			ele.attachEvent("on"+type,callback);
    		}else{
    			ele["on"+type] = callback;
    		}
    	},
    	removeEventListener:function(){
    		if(window.removeEventListener){
    			ele.removeEventListener(type,callback,capture);
    		}else if(window.detachEvent){
    			ele.detachEvent("on"+type,callback);
    		}else{
    			ele["on"+type] = null;
    		}
    	},
    	event:function(event){
    		return event = event || window.event;
    	},
    	target:function(event){
    		var target = event.target || event.srcElement;
    		return target;
    	},
    	preventDefault:function(event){
    		if(event.preventDefault){
    			event.preventDefault();
    		}else{
    			event.returnValue = false;
    		}
    	}
    }
    
    EventUtil.addEventListener(divBox,"click",handler,false);
    

    以上是本人自己写的,不是很全面,更全面的版本参考以下网址:

    http://blog.csdn.net/guoyz_1/article/details/5521008

  • 相关阅读:
    关于在windows平台下将应用制作成windows服务及服务依赖的感想
    mysql 变量赋值的三种方法
    如何上传本地jar至远程仓库供其他项目使用
    maven的标准
    修改idea的缓存
    前端的网站
    读取简单的xml
    IDEA 自动设置compile target变成1.5
    注解导出优化版(推荐,十分强大)
    Linux命令干货!!!最常用的命令
  • 原文地址:https://www.cnblogs.com/diantao/p/5209454.html
Copyright © 2011-2022 走看看