标签：title detach rem type属性 UNC com tar 产生 false
在触发DOM上的事件时都会产生一个对象
事件对象event
可以获取事件的类型：
代码：
function show123(event){ //alert(‘欢迎来到perfect*博客园123‘); alert(event.type); }
点击按钮3
alert(event.target);
获取目标节点的名称：
alert(event.target.nodeName);
效果：
冒泡的现象：
继上面的基础上进行代码的测试：
在代码中加入：
var box=document.getElementById(‘box‘); function showbox(){ alert("这是装按钮的容器!"); } eventUtil.addHandler(box,"click",showbox);
在该容器的的按钮中加入阻止冒泡的事件的时候：
function show123(event){ //alert(‘欢迎来到perfect*博客园123‘); alert(event.target.nodeName); event.stopPropagation() }
只会显示事件目标的节点名称。
例如：a标签的默认行为就是跳转
可以通过event.preventDefault()进行阻止事件的默认行为
2、IE中的事件对象
(1)type属性 用于获取事件类型
（2）srcElement属性 用于获取事件的目标
（3）cancelBubble属性 用于阻止事件冒泡
设置为true表示阻止冒泡 设置false表示不阻止冒泡
（4）returnValue属性 用于阻止事件的默认行为
设置为false表示阻止事件的默认行为
例如：当没有阻止默认行为以及没有阻止冒泡行为和阻止默认行为以及阻止冒泡行为的效果：
所需要的代码
even.js
1 //跨浏览器事件处理程序 2 var eventUtil={ 3 //添加句柄 4 //触发的对象,触发的事件类型,触发的操作 5 addHandler:function(element,type,handler){ 6 //Dom2级事件处理程序的判断 7 if(element.addEventListener){ 8 element.addEventListener(type,handler,false); 9 10 //IE事件处理程序的判断 11 }else if(element.attachEvent){ 12 13 element.attachEvent(‘on‘+type,handler); 14 //DOM0级事件处理程序的判断 15 }else{ 16 element[‘on‘+type]=handler; 17 } 18 19 20 }, 21 22 //删除句柄 23 //触发的对象,触发的事件类型,触发的操作 24 removeHandler:function(element,type,handler){ 25 //Dom2级事件处理程序的判断 26 if(element.removeEventListener){ 27 element.removeEventListener(type,handler,false); 28 29 //IE事件处理程序的判断 30 }else if(element.detachEvent){ 31 32 element.detachEvent(‘on‘+type,handler); 33 //DOM0级事件处理程序的判断 34 }else{ 35 element[‘on‘+type]=null; 36 } 37 38 39 }, 40 41 //获取兼容性的事件 42 getEvent:function(event){ 43 return event?event:window.event; 44 45 }, 46 getType:function(event){ 47 return event.type; 48 }, 49 getElement:function(event){ 50 return event.target||event.srcElement; 51 }, 52 preventDefault:function(event){ 53 if(event.preventDefault){ 54 event.preventDefault(); 55 }else{ 56 event.returnValue=false;//returnValue属性值设置为false时表示阻止默认行为 57 58 } 59 60 61 }, 62 63 stopPropagation:function(event){ 64 if(event.stopPropagation){ 65 event.stopPropagation(); 66 }else{ 67 event.cancelBubble=true;//cancelBubble属性值设置为true表示阻止其冒泡行为 68 69 70 } 71 } 72 }
script.js
window.onload=function(){ var go=document.getElementById("go"), box=document.getElementById("box"); eventUtil.addHandler(box,‘click‘,function(){ alert("我是整个父盒子！！！"); }); eventUtil.addHandler(go,‘click‘,function(e){ e=eventUtil.getEvent(e);//=>e=e||window.event alert(eventUtil.getElement(e)); //阻止其默认行为 eventUtil.preventDefault(e); //阻止其冒泡行为 eventUtil.stopPropagation(e); }) }
html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>事件的冒泡</title> 6 7 </head> 8 <script src="js/event.js"></script> 9 <script src="js/script.js"></script> 10 <body> 11 <div id="box"> 12 <input type="button" value="按钮" id="btn" onclick="show()"/> 13 <input type="button" value="按钮2" id="btn2" /> 14 <input type="button" value="按钮3" id="btn3" /> 15 <a href="tab.html" id="go">跳转</a> 16 </div> 17 18 </body> 19 </html>
标签：title detach rem type属性 UNC com tar 产生 false
原文地址：https://www.cnblogs.com/jiguiyan/p/11850904.html
