【丝学堂】跟我学JS封装-第二课
?
女神发了一条状态"男生最重要的三个字从来不是高帅富，是上进心。", 然后把所有转这条状态的男性好友都删了
?
高富帅发了一条状态"女生不能用手肘碰到自己的肚脐眼"，然后把那些回复说可以的女生都拉黑了
?
?
----------------------- 分割线 ---------------------------
?
?
好了开始【丝学堂】第二课：学前端学封装-?封装一个单击冒泡函数对象
?
?
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>event对象的冒泡</title></head><style>#pm{width:250px;height:50px;border:2px dashed #CCC; padding:10px;text-align:center;line-height:40px;margin:0 auto;}#box{width:250px;height:70px;background:#000;text-align:center;margin:0 auto;padding:10px;padding-top:30px;}</style><body> <p id="pm"></p> <div id="box"> <button id="btn">顶我</button> </div> <script> /** 什么是冒泡=================**/ //首先申明对象，这是丝码农应该都懂得 var _pm = document.getElementById("pm") , _box = document.getElementById("box") , _btn = document.getElementById("btn");/* 然后给对象添加事件，onclick 叫单击事件， 没有把JQUERY和JAVASCRIPT 玩转的就应该注意JQUERY里面的单击事件是 click 而javascript 是 onclick *//* DIV单击事件 */_box.onclick = function (){/* innerHTML 叫文本， 这里的 .innerHTML就是将对象的文本清空后赋值 */_pm.innerHTML = "你点击的是:DIV";}/* 按钮单击事件 */_btn.onclick = function (){_pm.innerHTML = "你点击的是：BUTTON";} </script></body></html>?
? ? 试着运行 会发现点击按钮 显示的还是 DIV， 这是神马原因， 这和说到底事件冒泡有着什么关系。
?
? ? 我们先来DEBUG 分析一下 整个事件是怎么走的?
?
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>event对象的冒泡</title></head><style>#pm2{width:250px;height:50px;border:2px dashed #CCC; padding:10px;text-align:center;line-height:40px;margin:0 auto;}#box2{width:250px;height:70px;background:#000;text-align:center;margin:0 auto;padding:10px;padding-top:30px;}</style><body><p id="pm2"></p> <div id="box2"> <button id="btn2">打我</button> </div> <script> /* 同上==============*/ var _pm2 = document.getElementById("pm2") , _box2 = document.getElementById("box2") , _btn2 = document.getElementById("btn2");_box2.onclick = function (){_pm2.innerHTML = "你点击的是:DIV";alert(1);}_btn2.onclick = function (){_pm2.innerHTML = "你点击的是：BUTTON";alert(2);}/* DEBUG后看到点击 BUTTON 先弹出的是2 显示BUTTON，之后又弹出 1 显示DIV ， 点击黑色区域弹出1 显示DIV 不在弹出其他的， 然后会有丝们问 这是为神马呢？ */ </script></body></html>??
? ? ?OK，这里只是添加了alert来观察事件， 通过debug后，我们会发现按钮单击后会首先弹出1 显示BUTTON，之后弹出2 显示 DIV，丝会说 BUTTON包裹在DIV里面 单击事件两个肯定都会产生！
?
? ?解决这个问题首先是要阻止按钮点击时的事件冒泡，通过设置event对象 cancelBubble属性为true实现(只能在IE下) 而firefox或者其他主流浏览器下则需要用到stopPropagtion方法实现
?
?
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>event对象的冒泡</title></head><style>#pm3{width:250px;height:50px;border:2px dashed #CCC; padding:10px;text-align:center;line-height:40px;margin:0 auto;}#box3{width:250px;height:70px;background:#000;text-align:center;margin:0 auto;padding:10px;padding-top:30px;}</style><body> <p id="pm3"></p> <div id="box3"> <button id="btn3">插我</button> </div> <script>/* #科普# 解决这个问题首先是要阻止按钮点击时的事件冒泡，通过设置event对象 cancelBubble属性为true实现(只能在IE下) 而firefox或者其他主流浏览器下 则需要用到stopPropagtion方法实现， 现在来试一下并进行封装 *//** 封装stopPropagation函数=========================**/function stopPropagation(e){e = window.event || e;if(document.all){ //第一课 也讲到了document.all 这个是只支持IE属性 通过判断浏览器种类e.cancelBubble = true;}else{e.stopPropagation();}} var _pm3 = document.getElementById("pm3") , _box3 = document.getElementById("box3") , _btn3 = document.getElementById("btn3");_box3.onclick = function (){_pm3.innerHTML = "你点击的是:DIV";}//将前面函数调用到btn3的事件中来，_btn3.onclick = function (e){_pm3.innerHTML = "你点击的是：BUTTON";stopPropagation(e);}/* 试试后是不是完美的解决的 元素事件冒泡的问题呢 通过努力丝也能逆袭成高帅富，那时！嘿嘿 现在女神也许你都会瞧不上了 **/</script></body></html>?
? ?是不是问题解决呢。 ?
?
?
?
?
? ?关注【丝学堂】?励志帮助前端丝逆袭白富美，深度解剖问题，看完不点顶，菊花万人顶！
?
?
?
?
?
?
? ..??
?
?
1 楼 AlvinCross 2012-09-12 女神发了一条状态"男生最重要的三个字从来不是高帅富，是上进心。", 然后把所有转这条状态的男性好友都删了高富帅发了一条状态"女生不能用手肘碰到自己的肚脐眼"，然后把那些回复说可以的女生都拉黑了