<div style="width: 150px; height: 150px; padding: 25px; border:1px solid blue; " id="divBox"> <p style="width: 100px; height: 100px; padding:25px; border:1px solid red; " id="pBox"> <span style="width: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
时间: 2024-10-05 19:37:50