【屌丝学堂】跟我学JS封装-第二课

最新推荐文章于 2024-08-12 17:51:29 发布

yuruei2011

最新推荐文章于 2024-08-12 17:51:29 发布

阅读量108

点赞数

分类专栏：屌丝学堂 js 文章标签：前端 javascript ViewUI

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

屌丝学堂

3 篇文章 0 订阅

订阅专栏

女神发了一条状态"男生最重要的三个字从来不是高帅富，是上进心。", 然后把所有转这条状态的男性好友都删了

高富帅发了一条状态"女生不能用手肘碰到自己的肚脐眼"，然后把那些回复说可以的女生都拉黑了

----------------------- 分割线 ---------------------------

好了开始【屌丝学堂】第二课：学前端学封装- 封装一个单击冒泡函数对象

<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>

是不是问题解决呢。

关注【屌丝学堂】励志帮助前端屌丝逆袭白富美，深度解剖问题，看完不点顶，菊花万人顶！

yuruei2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【屌丝学堂】跟我学JS封装-第二课

女神发了一条状态"男生最重要的三个字从来不是高帅富，是上进心。", 然后把所有转这条状态的男性好友都删了高富帅发了一条状态"女生不能用手肘碰到自己的肚脐眼"，然后把那些回复说可以的女生都拉黑了 ----------------------- 分割线 --------------------------- 好了开始【屌丝学堂】第二课：学前端学封装- 封装一...
复制链接

扫一扫

专栏目录