JS基础-事件对象&&事件的冒泡&&事件的绑定以及事件的传播

快来打我* 2022-03-21 20:10 308阅读 0赞

1.鼠标移动的事件对象

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>练习</title>
    <style type="text/css">
    #areadiv{
    	width:300px;
    	height:100px;
    	border:1px solid #333;
    }
    #showdiv{
    	width:300px;
    	height:50px;
    	border:1px solid #333;
    	margin-top:10px;
    }
    </style>
    <script type="text/javascript">
    window.function()
    {
    	//要实现的功能是当鼠标在areadiv中移动时，会在showdiv中显示鼠标的坐标
    	//第一步，首先获取两个div
    	var bigdiv=document.getElementById("areadiv");
    	var smalldiv=document.getElementById("showdiv");
    	//绑定鼠标移动事件
    	bigdiv.onmousemove=function(event)
    	{
    		
    		//事件对象，当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如，鼠标的坐标，键盘哪个键被按下，鼠标滚轮滚动的方向
    		//在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件作为window对象的属性保存的
    		//clientX可以获取鼠标指针的水平坐标，clientY可以获取鼠标指针的垂直坐标
    		event=event||window.event;//为了解决事件对象的兼容性
    		var x=event.clientX;
    		var y=event.clientY;
    		//在showdiv中显示坐标
    		smalldiv.innerHTML="x="+x+","+"y="+y;
    	};
    };
    </script>
    </head>
    <body>
    <div id="areadiv"></div>
    <div id="showdiv"></div>
    </body>
    </html>

**效果图如下：**  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]  
2.div跟随鼠标移动的练习

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>练习</title>
    <style type="text/css">
    #box1{
    	width:100px;
    	height:100px;
    	background-color:#F00;
    	position:absolute;/*非常重要，一定要开启绝对定位*/
    }
    
    </style>
    <script type="text/javascript">
    window.function()
    {
    	//要实现的功能是div跟随着鼠标移动
    	//第一步，首先获取box1
    	var box=document.getElementById("box1");
    	
    	//绑定鼠标移动事件(给文档绑定)
         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;
    		//获取鼠标的坐标
    		//clientX/clientY用于获取鼠标在当前可见窗口的坐标
    		//div的偏移量是相对于整个页面的
    		//pageX/pageY可以获取鼠标相对于整个页面的坐标，但IE8不支持这两个属性
    		var x=event.clientX;
    		var y=event.clientY;
    		//设置div的偏移量
    		box.style.left=x+sl+"px";
    		box.style.top=y+st+"px";	
    	};
    };
    </script>
    </head>
    <body style="height:1000px;width:1000px">
    <div id="box1"></div>
    </body>
    </html>

3.事件的冒泡：所谓冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分冒泡都是有用的，如果不希望事件发生冒泡可以通过事件对象来取消冒泡（取消冒泡,可以将事件对象的cancelBubble设置为true，即可取消冒泡）。下面是冒泡的应用即事件的委派（1.事件的委派：指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。2.事件的委派利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能）

在这里插入代码片<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>事件的委派练习</title>
    <script type="text/javascript">
    //为每一个超链接绑定一个单击响应事件(我们希望只绑定一次，即可应用到多个元素上即使元素是后添加的)
    window.function()
    {
    	//获取button事件
    	var btn=document.getElementById("btn1");
    	//获取ul事件
    	var u1=document.getElementById("ul1");
    	//绑定单击响应事件
    	btn.onclick=function()
    	{
    		//创建li
    		var li=document.createElement("li");
    		//向li中添加内容
    		li.innerHTML="<a href='javascript:;' class='link'>新链接</a>";
    		//将li添加到ul中
    		u1.appendChild(li);
    	};
    	
    	//为ul绑定一个单击响应事件
    	u1.onclick=function(event)
    	{
    		event=event||window.event;
    		//target表示触发事件的对象，如果触发事件的对象使我们期望的元素就执行，否则不执行
    		if(event.target.className=="link")
    		{
    			alert("我是ul的单击响应函数");
    		}
    	};		
    };
    </script>
    </head>
    
    <body>
    <button id="btn1">添加新链接</button>
    <ul id="ul1" style="background-color:#0F0">
    <li><a href="javascript:;" class="link">超链接一</a></li>
    <li><a href="javascript:;" class="link">超链接二</a></li>
    <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
    </body>
    </html>

**效果图如下**  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]  
3.事件的绑定  
**绑定单击响应事件的两种方法**  
第一种方法：使用对象.事件=函数的形式，只能同时为一个元素的一个事件绑定一个响应函数不能绑定多个，若绑定多个则后面的会覆盖前面的  
第二种方法，使用addEventListener()，通过这个方法也可以为元素绑定响应函数，参数有三个，第一个参数为，事件的字符串（不要on，如click），第二个参数为，回调函数，当事件被触发时该函数会被调用，第三个参数，是否在捕获阶段触发事件，需要一个布尔值，一般都传false  
说明：使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行，但是此方法不支持IE8及以下浏览器，所有IE8及以下浏览器需要使用attachEvent()方法，这个方法有二个参数，第一个参数，事件的字符串（需要on，如"onclick"），第二个参数，回调函数，这个方法也可以同时为一个元素的相同事件绑定多个响应函数，不同的是它是先绑定后执行，执行顺序和addEventListener()相反

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>事件的绑定练习</title>
    <script type="text/javascript">
    //点击按钮以后，弹出一个内容
    window.function()
    {
    	//获取按钮
    	var btn=document.getElementById("btn1");
    	band(btn,"click",function(){alert(1);});
    	band(btn,"click",function(){alert(2);});
    	band(btn,"click",function(){alert(3);});
    	
    };
    //定义一个函数，用来为指定函数绑定响应函数。addEventListener()中的this是绑定事件的对象，attachEvent()中的this是window.参数，obj，要绑定事件的对象，eventstr,事件的字符串,callback,回调函数
    function band(obj,eventstr,callback)
    {
    	if(obj.addEventListener)
    	{
    		obj.addEventListener(eventstr,callback,false);
    	}
    	else
    	{
    		//IE8及以下
    		//this是由调用方式决定的(解决this不一致)
    	  obj.attachEvent("on"+eventstr,function()
    	  {
    		  //在匿名函数中调用回调函数
    		  callback.call(obj);}
    	  );
    	}
    }
    </script>
    </head>
    <body>
    <button id="btn1">点击一下</button>
    </body>
    </html>

4.事件的传播  
关于事件的传播网景公司和微软公司有不同的理解，微软公司认为事件应该是由内向外传播，也就是当事件被触发时，应该先触发当前元素的事件，然后再向当前元素的祖先元素传播，也就是说事件应该在冒泡阶段执行；网景公司认为事件应该由外向内传播，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素，然后再向内传播给后代元素。W3C综合了两个公司的方案，将事件的传播分为了三个阶段，第一阶段为捕获阶段，在捕获阶段时从最外层的祖先元素向目标元素进行事件的捕获，但是默认不会触发事件。第二阶段为目标阶段，事件捕获到目标元素，捕获结束开始在目标元素上触发事件。第三阶段为冒泡阶段，事件从目标元素向祖先元素传递，依次触发祖先元素上的事件。如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，但是一般情况下我们不会希望在捕获阶段就触发事件，所有一般情况下addEventListener()的第三个参数为false。IE8以下的浏览器中没有捕获阶段。图解如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 2]

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>事件的传播练习</title>
    <style type="text/css">
    #box1
    {
    	width:300px;
    	height:300px;
    	background-color:#0F0;
    	margin:100px 200px;
    }
    #box2
    {
    	width:200px;
    	height:200px;
    	background-color:#FF0;
    }
    #box3
    {
    	width:150px;
    	height:150px;
    	background-color:#3CF;
    }
    </style>
    
    <script type="text/javascript">
    //为每一个div绑定一个单击响应函数
    window.function()
    {
    //获取三个div
    var b1=document.getElementById("box1");
    var b2=document.getElementById("box2");
    var b3=document.getElementById("box3");
    band(b1,"click",function(){alert("我是box1的响应函数");});
    band(b2,"click",function(){alert("我是box2的响应函数");});
    band(b3,"click",function(){alert("我是box3的响应函数");});
    	
    };
    function band(obj,eventstr,callback)
    {
    	if(obj.addEventListener)
    	{
    		obj.addEventListener(eventstr,callback,false);
    	}
    else
    {
    	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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]: /images/20220322/ce0cade6cf2f45a5aca8c521f890699a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]: /images/20220322/0cccd1102baa4cc68ae683f44c929aca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 2]: /images/20220322/63b06dcfb71841b7837508825ef130dd.png