首页 > 代码库 > dom02
dom02
事件对象：在触发DOM上的事件时dou都会产生一个对象，事件对象event
DOM中的事件对象
1）type属性 用于获取事件类型
2）target属性 用于获取事件目标
3）stopPropagation()方法 用于阻止事件冒泡
4）preventDefault()阻止默认行为
bubbles,canselable属性
<!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 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(ev){ alert(ev.target.nodeName);//目标节点名称//target获取事件目标//type获取事件类型 ev.stopPropagation();//阻止事件冒泡（最具体的元素接收）} function showBox(){ alert("这是一个box")} 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‘] } } } </script></head><body><div id="box"> <input type="button" value="http://www.mamicode.com/按钮" id="btn" onclick="showMessage()"/> <input type="button" value="http://www.mamicode.com/按钮2" id="btn2"/> <input type="button" value="http://www.mamicode.com/按钮3" id="btn3"/> <a href=""></a></div><script>var btn3=document.getElementById(‘btn3‘);var box=document.getElementById(‘box‘);eventUtil.addHandler(btn3,‘click‘,showMessage);eventUtil.addHandler(box,‘click‘,showBox);// eventUtil.removeHandler(btn3,‘click‘,showMessage);</script></body>
<!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 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(ev){ alert(ev.target.nodeName);//目标节点名称//target获取事件目标//type获取事件类型 ev.stopPropagation();//阻止事件冒泡（最具体的元素接收）} function showBox(){ alert("这是一个box")} function stopGoto(event){ event.stopPropagation(); event.preventDefault();}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‘] } } } </script></head><body><div id="box"> <input type="button" value="http://www.mamicode.com/按钮" id="btn" onclick="showMessage()"/> <input type="button" value="http://www.mamicode.com/按钮2" id="btn2"/> <input type="button" value="http://www.mamicode.com/按钮3" id="btn3"/> <a href="http://www.mamicode.com/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>
</html>
dom02
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。