记录学习JavaScript中遇到的知识点
1、目标实现<div id="wrapper"><input type="button" value="Click me." id="btn" /></div>中,单击div区域提示"这是div",而单击btn按钮提示"这是input"。首先通过下面代码操作,实际运行结果发现:单击div区域显示正常,单击btn按钮显示也为“这是div”。由于单击btn时,同样触发了div区域,即先显示“这是input”后,立即显示了“这是div”,视觉上并没有发现。通过alert()测试,发现单击btn时,会先弹出‘1’后弹出‘2’。即JavaScript中的冒泡事件,先触发子容器监听事件,后触发父容器监听事件。
1 wrapper.onclick=function(){ 2 infoBox.innerHTML="你点击的是:div"; 3 alert(1); 4 } 5 btn.onclick=function(e){ 6 infoBox.innerHTML="你点击的是:input"; 7 alert(2); 8 }
2、阻止冒泡事件的方法:
(1、在ie中,通过设置event事件的cancelBubble属性为true现实。
(2、在Firefox中,通过调用event对象的stopPropagation方法实现。
以函数stopPropagation(e)封装阻止冒泡事件,实现ie、chrome的兼容:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript Exercises.</title> <style> #infoBox{padding:5px;border:2px dashed #ccc;margin-bottom:10px;width:136px;height:20px;line-height:20px;text-align:center; } #wrapper{padding:20px 0;background:black;width:150px;text-align:center; } </style> </head> <body> <h1>阻止ie、chrome中的事件冒泡.</h1> <p id="infoBox"></p> <div id="wrapper"> <input type="button" value="Click me." id="btn" /> </div> </body> </html> <script tyoe="text/JavaScript"> //阻止事件冒泡 function stopPropagation(e){ e=window.event || e; if(document.all){//兼容ie e.cancelBubble=true; } else{//兼容Chrome、Firefox e.stopPropagation(); } } var infoBox=document.getElementById("infoBox"), wrapper=document.getElementById("wrapper"), btn=document.getElementById("btn"); wrapper.onclick=function(){ infoBox.innerHTML="你点击的是:div"; //alert(1); } btn.onclick=function(e){ infoBox.innerHTML="你点击的是:input"; //alert(2); stopPropagation(e); } </script>
3、按钮btn的两个onclick函数,目的是两个监听事件均能能触发,在实现过程中如果都以btn.onclick()完成,则会出现仅触发了第二个监听函数,第一个则被覆盖。同样ie使用attachEvent方法,ie9+(两种方法均支持)、Firefox、Chrome则使用addEventListener方法为btn添加触发事件,且添加的事件不会覆盖已存在的事件。
以函数on(node,eventType,handler)封装node的触发事件,实现ie、chrome的兼容:
1 <script tyoe="text/JavaScript"> 2 //为node添加触发事件 3 function on(node,eventType,handler){ 4 node=typeof node=="string" ? document.getElementById(node) : node; 5 if(document.all){ 6 node.attachEvent("on"+eventType,handler); 7 } 8 else{ 9 node.addEventListener(eventType,handler,false); 10 } 11 } 12 var btn=document.getElementById("btn"); 13 on(btn,"click",function(){ 14 alert(1); 15 }); 16 on(btn,"click",function(){ 17 alert(2); 18 }); 19 </script>
4、对一个btn同时绑定onclick、onmousedown和onmouseup,单击时发现ie仅触发mousedown与mouseup,Chrome仅触发mousedown。
<script tyoe="text/JavaScript"> //为node添加触发事件 function on(node,eventType,handler){ node=typeof node=="string" ? document.getElementById(node) : node; if(document.all){ node.attachEvent("on"+eventType,handler); } else{ node.addEventListener(eventType,handler,false); } } var btn=document.getElementById("btn"); on(btn,"click",function(){ document.getElementById("infoBox").innerHTML=Math.round(Math.random()*10); if(document.all){ alert(window.event.type);//IE下打印的事件对象名称 } else{ alert(event.type); } }); on(btn,"mousedown",function(){ alert(event.type); }); on(btn,"mouseup",function(){ alert(event.type); }); </script>
onclick由onmousedown和onmouseup两部分组成:
(1、当对btn同时绑定onclick、onmousedown时,ie与Chrome都仅触发mousedown
(2、当对btn同时绑定onclick、onmouseup时,ie仅触发mouseup,chrome触发onclick与onmouseup
响应速度:down>up>click.