IE中的事件对象
1）type属性 用于获取事件类型
2）srcElement属性 用于获取事件的目标
3）cancelBubble属性 用于阻止事件冒泡
设置为true表示阻止事件冒泡 设置为false表示不阻止冒泡
4）returnValue属性 用于阻止事件的默认行为
设置为false表示阻止事件的默认行为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script src="script.js"></script> <script src="event.js"></script> <script type="text/javascript"> //dom中的事件对象： //type属性获取事件类型 //target获取事件目标 //stopPropagation阻止事件冒泡（最具体的元素接收） //preventDefault()阻止事件的默认行为 // window.onload=function(){ // var btn2=document.getElementById('btn2'); // btn2.onclick=function(){ // alert('这个是dom0级添加的事件') // } // btn2.onclick=null; // var btn3=document.getElementById('btn3'); /* btn3.addEventListener('click',showMessage,false); btn3.addEventListener('click',function(){ alert(this.value) },false);*/ // btn3.removeEventListener('click',showMessage,false); // btn3.attachEvent('onclick',showMessage) // } // function showMessage(event){ // event=event || window.event; // var ele=event.target||event.srcElement; // alert(ele); // //alert(ev.target.nodeName);//目标节点名称//target获取事件目标//type获取事件类型 // ev.stopPropagation();//阻止事件冒泡（最具体的元素接收） // } // function showBox(){ // alert("这是一个box") // } // function stopGoto(event){ // event.stopPropagation(); // event.preventDefault(); // } </script> </head> <body> <div id="box"> <input type="button" value="按钮" id="btn" onclick="showMessage()"/> <input type="button" value="按钮2" id="btn2"/> <input type="button" value="按钮3" id="btn3"/> <a href="evnt.html" id="go">跳转</a> </div> <script> // var btn3=document.getElementById('btn3'); // var box=document.getElementById('box'); // eventUtil.addHandler(btn3,'click',showMessage); // eventUtil.addHandler(box,'click',showBox); // eventUtil.addHandler(go,'click',stopGoto); // eventUtil.removeHandler(btn3,'click',showMessage); </script> </body> </html>
window.onload=function(){ var go=document.getElementById('go'), box=document.getElementById('box'); eventUtil.addHandler(box,'click',function(){ alert('我是整个父盒子'); }); eventUtil.addHandler(go,'click',function(e){//接收事件event //e=e||window.event; e=eventUtil.getEvent(e);//返回event alert(eventUtil.getElement(e).nodeName); eventUtil.preventDefault(e); eventUtil.stopPropagation(e); }); }
var eventUtil={ //添加句柄 // var element,type,handler; addHandler:function(element,type,handler){ if(element.addEventListener){//dom二级 element.addEventListener(type,handler,false) }else if(element.attachEvent){//IE element.attachEvent('on'+type,handler); }else{//dom0级 element['on'+type]=handler;//element.onclick===element['onclick'] } },//对象的属性用“，”分隔 //删除句柄 removeHandler:function(element,type,handler){ if(element.removeEventListener){//dom二级 element.removeEventListener(type,handler,false) }else if(element.detachEvent){//IE element.detachEvent('on'+type,handler); }else{//dom0级 element['on'+type]=null;//element.onclick===element['onclick'] } }, getEvent:function(event){ return event?event:window.event; }, getType:function(event){ return event.type; }, getElement:function(event){ return event.target || event.srcElement; }, preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } }