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

最新推荐文章于 2022-08-01 23:04:16 发布

dweblover

最新推荐文章于 2022-08-01 23:04:16 发布

阅读量259

点赞数 1

分类专栏： JavaScript 文章标签： JS基础

本文链接：https://blog.csdn.net/dweblover/article/details/86681981

版权

JavaScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

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>

效果图如下：

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>

效果图如下

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以下的浏览器中没有捕获阶段。图解如下：
在这里插入图片描述

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