女神发了一条状态"男生最重要的三个字从来不是高帅富，是上进心。", 然后把所有转这条状态的男性好友都删了
高富帅发了一条状态"女生不能用手肘碰到自己的肚脐眼"，然后把那些回复说可以的女生都拉黑了
----------------------- 分割线 ---------------------------
好了开始【屌丝学堂】第二课：学前端学封装- 封装一个单击冒泡函数对象
<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>
是不是问题解决呢。
关注【屌丝学堂】 励志帮助前端屌丝逆袭白富美，深度解剖问题，看完不点顶，菊花万人顶！
..
分享到：
相关推荐
wordpress主题，基于屌丝青年网样式二次开发LIiu-One主题仿屌丝青年网模板wordpress主题LIiu-One，主题是基于屌丝青年网样式二开美化的。 支持 IE8+、Firefox Chrome等主流浏览器；最佳体验建议Chrome浏览器 自适应...
在Android应用开发中，"Retrofit+Rxjava+MVP组合屌丝APP"是一个典型的技术栈，用于构建高效、可维护的网络请求和数据管理框架。这个APP结合了多种热门技术，使得开发者能够轻松地处理网络接口调用、数据流管理和用户...
2. **源代码文件**：这些文件包含了游戏的逻辑，包括角色行为、游戏规则、关卡设计等，可能有`.cpp`, `.java`, `.py`, `.js`等不同后缀的文件。 3. **资源文件**：包括图像、音频、动画、3D模型等，可能以`.png`, `...
在IT领域，重装系统是一项常见的操作，尤其对于那些不熟悉技术的“屌丝”用户来说，可能是一项挑战。然而，随着技术的发展，现在有了许多简单易用的一键重装系统工具，使得这个过程变得相对轻松。本文将详细介绍如何...
(糗事百科、暴走漫画)屌丝程序员如何一个人打造日PV百万的网站架构
镜心小屌丝聊天机器人,是一款自足行为软件，试试还不错，你问什么他答什么，就是有时候有点让你想象不到。
【标题】"最新网址大全源码，好123屌丝版网址导航"涉及到的是一个网站源码项目，主要用于创建一个集成了多种常用网址的导航站点，类似于知名的"好123"导航站，主要服务于广大用户，方便他们快速访问互联网上的热门和...
【标题】"小游戏源码-随意门（屌丝版）.rar" 暗示了这是一个包含了小型游戏源代码的压缩文件，其中的游戏被称为"随意门"，可能是一个简单的冒险或者解谜类游戏，而"屌丝版"可能是开发者对其定位或幽默的自嘲，暗示这...
来源：漏洞银行大咖面对面一周大咖秀3 作者：屌丝绅士
《Java2048屌丝逆袭版》是一款基于Java编程语言实现的2048游戏，它在原版2048的基础上可能增加了一些趣味性或者挑战性的元素，使得玩家能够体验到更加丰富的游戏体验。2048游戏是由Gabriele Cirulli在2014年开发的一...
因此，要运行这款“屌丝版”游戏，你需要配置一个本地服务器，如使用Node.js的http-server模块，或者Apache、Nginx等传统服务器软件。 游戏源码通常包含多个文件，如HTML文件（主页面），JavaScript文件（包含游戏...
1. 教育行业的逆袭：汪建宏，29岁，成为了黄冈中学网校的校长，从一名农村出身的“屌丝”实现了事业的巨大转变，展现了教育行业中个体通过努力和创新实现逆袭的可能性。 2. 梦想的力量：汪建宏强调梦想在个人成功中...
蹭网屌丝专用WIFI三神 蹭网屌丝专用WIFI三神器
【标题】：“一个屌丝的读书漂流ppt模板.rar”是一个压缩文件，其中包含秦阳创作的关于“读书漂流”的PPT演示文稿模板。这个标题暗示了这是一份个人化且富有故事性的模板，可能适合那些希望通过分享阅读经历或者提倡...
【Android应用源码屌丝程序员表白神器】 这个压缩包中的内容显然与Android应用程序开发相关，特别是针对一个有趣的应用场景——程序员向心仪的人表白。在Android平台上开发一款表白神器，可以展现出程序员的独特...
屌丝专用华为版本查询.exe