前端---js（自学笔记24)（事件对象和练习、事件的冒泡、事件的委派、事件绑定、事件传播）

冷不防 2022-11-29 03:05 132阅读 0赞

### 事件对象： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#areaDiv{
    				width: 200px;
    				height: 100px;
    				border:1px solid #000000;
    			}
    			#showMsg{
    				width: 200px;
    				height:50px;
    				border:1px solid #000000;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload =function(){
    				/**
    				 * 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
    				 * 
    				 * 
    				 */
    				
    				//获取俩个div
    				var areaDiv =document.getElementById("areaDiv");
    				var showMsg =document.getElementById("showMsg");
    				/**
    				 * onmousemove
    				 * -该事件将会在鼠标在元素中移动时被触发
    				 * 事件对象
    				 * --当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递响应函数
    				 * 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘按得那个按键被按下，鼠标滚轮方向。。。。
    				 * 
    				 * **/
    				areaDiv.onmousemove =function(event){
    					//alert("jjj")
    					/**
    					 * 在IE8中，响应函数被触发时，浏览器不会对传递事件对象
    					 * 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
    					 * 
    					 * **/
    					/**
    					 * clientX可以获取鼠标指针的水平坐标
    					 * clientY可以获取鼠标指针的垂直坐标
    					 * **/
    //					if(!event){
    //						event =window.event
    //					}
    //事件对象兼容性问题
    event =event || window.event
    					var x =event.clientX;
    					var y =event.clientY;
    					
    					//alert(event)
    					//在showMsg中显示坐标
    					showMsg.innerHTML ="x="+x +"y="+y
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id="areaDiv"></div>
    		<br />
    		<br />
    		<br />
    		<div id="showMsg"></div>
    	</body>
    </html>

### 练习： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box{
    				width: 100px;
    				height: 100px;
    				background-color: orangered;
    				position: absolute;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload=function(){
    				/**
    				 * 使div跟随着鼠标移动而移动
    				 * **/
    				//获取box
    				var box =document.getElementById('box')
    				//绑定鼠标移动事件
    				document.onmousemove=function(event){
    					//解决兼容性问题
    					event =event || window.event
    					
    					//获取滚动条滚动的距离
    					/**
    					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
    					 * 火狐等浏览器认为浏览器的滚动条是html的
    					 * **/
    					var st =document.body.scrollTop || document.documentElement.scrollTop;
    					var sl =document.body.scrollLeft || document.documentElement.scrollLeft;
    					//var st =document.documentElement.scrollTop;
    					
    					
    					//获取到鼠标位置
    					/**
    					 * clientX和clientY
    					 * 用于获取鼠标在当前的可见窗口的坐标
    					 * div的偏移量，是相对于整个页面的
    					 * 
    					 * pageX和pageY可以获得鼠标相对于当前页面的坐标
    					 * 但是这个俩个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
    					 * **/
    					var left =event.pageX;
    					var top =event.pageY;
    					//var left =event.clientX;
    					//var top =event.clientY;
    					//设置div的偏移量
    					box.style.left=left+sl+"px";
    					box.style.top=top+st+"px"
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id="box"></div>
    	</body>
    </html>

![20200819104359455.gif][]

### 事件的冒泡： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box{
    				width: 200px;
    				height: 200px;
    				background-color: #3498DB;
    			}
    			#s1{
    				background-color: yellow;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload=function(){
    				
    				/**
    				 * 事件的冒泡（Bubble）
    				 * -所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
    				 * -在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡
    				 * **/
    				//为s1绑定一个单击响应函数
    				var s1 =document.getElementById('s1');
    				s1.onclick=function(){
    					alert('我是span的单击响应函数')
    					
    					//取消冒泡
    					//可以将事件对象的cancelBubble设置为true，即可取消冒泡
    					event.cancelBubble =true;
    				}
    				
    				//为box绑定一个单击响应函数
    				var box =document.getElementById('box');
    				box.onclick=function(){
    					alert('我是box的单击响应函数')
    				}
    				
    				document.body.onclick =function(){
    					alert("我是body的单击响应函数")
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id="box">
    			我是box
    			<span id="s1">我是span</span>
    		</div>
    	</body>
    </html>

![20200819151454217.gif][]

### 事件的委派： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			window.onload=function(){
    				
    					var u1 =document.getElementById("u1");
    					//点击按钮以后添加超链接
    					var btn1 = document.getElementById("btn1");
    					btn1.onclick = function(){
    						//创建一个li
    						var li =document.createElement("li");
    						li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
    						//将li添加到ul中
    						u1.appendChild(li);
    					}
    				
    //				var btn1 =document.getElementById("btn1")
    				/**
    				 * 为每一个超链接都绑定一个单击响应函数
    				 * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦
    				 * 而且这些操作只能为己有的超链接设置事件，而新添加的超链接必须重新绑定
    				 * **/
    				//获取所有的a
    //				var allA =document.getElementsByTagName("a");
    //				//遍历
    //				for(var i=0;i<allA.length;i++){
    //					allA[i].onclick =function(){
    //						alert("我是a的单击响应函数")
    //					}
    //				}
    /**
     * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
     * 我们可以尝试将其绑定给元素的共同的祖先元素
     *   事件的委派
     * -指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
     * 从而通过祖先元素的响应函数来处理事件
     * 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
     * **/
    
    		//为ul绑定一个单击响应函数
    		u1.onclick =function(){
    			
    			event =event || window.event
    			
    			/**
    			 * target
    			 * -event中的target表示的触发事件的对象
    			 * **/
    			alert(event.target);
    			//如果触发事件的对象是我们期望的元素，则执行否则不执行
    			if(event.target.className =="link"){
    				alert("我是ul的单击响应函数")
    			}
    		     //alert("我是ul的单击响应函数");
    		}
    			}
    		</script>
    	</head>
    	<body>
    		<button id="btn1">添加超链接</button>
    		<ul id="u1">
    			<li>
    				<p>我是p元素</p>
    			</li>
    			<li> <a href="javascript:;" class="link">超链接1</a></li>
    			<li> <a href="javascript:;" class="link">超链接2</a></li>
    			<li> <a href="javascript:;" class="link">超链接3</a></li>
    		</ul>
    	</body>
    </html>

![20200820121156904.gif][]

### 事件绑定 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			window.onload=function(){
    				/**
    				 * 点击按钮以后弹出一个内容
    				 * **/
    				//获取按钮对象
    				var btn1 =document.getElementById("btn1")
    				/**
    				 * 使用  对象.事件 = 函数的形式绑定响应函数
    				 * 它只能同时为一个元素的事件绑定一个响应函数
    				 * 不能绑定多个，如果绑定了多个，则后边会覆盖前边的
    				 * **/
    				//btn1绑定一个单击响应函数
    //				btn1.onclick=function(){
    //					alert("1")
    //				}
    				//btn1绑定二个单击响应函数
    //				btn1.onclick=function(){
    //					alert("2")
    //				}
    
    			/**
    			 * addEventListener()
    			 * -通过这个方法也可以为元素绑定响应函数
    			 * -参数：
    			 * 1.事件的字符串，不要on
    			 * 2.回调函数，当事件触发时该函数会被调用
    			 * 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
    			 * 
    			 * 使用addEventListener（）可以同时为一个元素的相同事件同时绑定多个响应函数，
    			 * 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
    			 * 
    			 * 但是这个方法不支持IE8及以下的浏览器
    			 * **/
    			
    //			btn1.addEventListener("click",function(){
    //				alert(1);
    //			},false);
    //			btn1.addEventListener("click",function(){
    //				alert(2);
    //			},false);
    //			btn1.addEventListener("click",function(){
    //				alert(this);
    //			},false);
    
              /**
               * attachEvent()
               * -在IE8中可以使用attachEvent（）来绑定事件
               * -参数
               * 1.事件的字符串，要on
               * 2.回调函数
               * 
               * -这个方法也可以同时为一个事件绑定多个处理函数
               * 不同的是它是后绑定先执行，执行顺序和addEventListener()相反
               * **/
    //        btn1.attachEvent("onclick",function(){
    //        	alert(1);
    //        });
    //        btn1.attachEvent("onclick",function(){
    //        	alert(2);
    //        });
    //        btn1.attachEvent("onclick",function(){
    //        	alert(this);
    //        });
    			bind(btn1,"click",function(){
    				alert(1)
    			})
    
               /**
                * 定义一个函数，用来为指定元素绑定响应函数
                * addEventListener()中的this，是绑定事件的对象
                * attachEvent()中的this，是window
                * 需要统一俩个方法this
                * 
                * 参数：
                * obj  : 要绑定事件的对象
                * eventStr 事件的字符串
                * callback 回调函数
                * **/
               function bind(obj, eventStr,callback){
               	if(obj.addEventListener){
               		//大部分浏览器兼容的方式
               		obj.addEventListener(eventStr,callback,false);
               	}else{
               		/**
               		 * this是谁由调用方式决定
               		 * callback.call(obj)
               		 * **/
               		//IE8及以下
               		obj.attachEvent("on"+eventStr,function(){
               			//在匿名函数中调用回调函数
               			callback.call(obj);
               		})
               	}
               }
    			}
    		</script>
    	</head>
    	<body>
    		<button id="btn1">点击</button>
    	</body>
    </html>

![20200821170130275.gif][]

### 事件传播： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1{
    				width: 300px;
    				height: 300px;
    				background-color: yellow;
    			}
    			#box2{
    				width: 200px;
    				height: 200px;
    				background-color: pink;
    			}
    			#box3{
    				width: 150px;
    				height: 150px;
    				background-color: cornflowerblue;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload=function(){
    				/**
    				 * 分别为3个div绑定单击响应函数
    				 * 
    				 * **/
    				var box1 =document.getElementById("box1");
    				var box1 =document.getElementById("box1");
    				var box1 =document.getElementById("box1");
    				/**
    				 * 事件的传播：
    				 * -关于事件的传播网景公司和微软公司有不同的理解
    				 * -微软公司认为事件应该是由内往外传播，也就是当事件触发时，应该先触发当前元素上的事件
    				 *   然后再向当前元素的祖先元素上传播，也就是说事件应该在冒泡阶段执行
    				 * -网景公司认为事件应该是有外向内传播，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件
    				 *   然后再向内传播给后代元素
    				 * -W3C综合了俩个公司的方案将事件传播分为三个阶段：
    				 * 1.捕获阶段：
    				 * -在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
    				 * 2.目标阶段：
    				 * -事件捕获到目标元素，捕获结束开始在目标元素上触发事件
    				 * 3.冒泡阶段：
    				 * -事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
    				 * 
    				 * -如果希望在捕获阶段就触发事件，可以将addEventListener()的第三参数设置true
    				 * 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
    				 * 
    				 * -IE8及以下浏览器没有捕获阶段
    				 * **/
    				bind(box1,"click",function(){
    					alert("我是box1的响应函数")
    				});
    				bind(box2,"click",function(){
    					alert("我是box2的响应函数")
    				});
    				bind(box3,"click",function(){
    					alert("我是box3的响应函数")
    				});
    			}
    			
    			function bind(obj,eventStr,callback){
    				if(obj.addEventListener){
    					//大部分浏览器兼容的方式
    					obj.addEventListener(eventStr,callback,false);
    				}else{
    					/**
    					 * this是由谁调用方式决定
    					 * callback.call(obj)
    					 * **/
    					//IE8及以下
    					obj.attachEvent("on"+eventStr,function(){
    						//在匿名函数中调用回调函数
    						callback.call(obj)
    					})
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id="box1">
    			<div id="box2">
    				<div id="box3"></div>
    			</div>
    		</div>
    	</body>
    </html>

![2020082421200140.gif][]

[20200819104359455.gif]: /images/20221124/e4ed31c6c9f74777835c8ea0790795a6.png
[20200819151454217.gif]: /images/20221124/f2c7c27fb6da4a65a90e82ed85f74de9.png
[20200820121156904.gif]: /images/20221124/a9d4c389d7c44eb5adae34bc1c59dce0.png
[20200821170130275.gif]: /images/20221124/e238dd299af14570ae38b51b4912e9fb.png
[2020082421200140.gif]: /images/20221124/3c7b4262d43847018e50f7cd7183b19a.png