【屌丝学堂】跟小弟我学JS封装-第二课
日期：2014-05-16 浏览次数：20439 次
【屌丝学堂】跟我学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对象的冒
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
