js基础事件之event对像和事件流(冒泡事件)

86 阅读 0 评论 57 点赞

我是靠谱客的博主平淡台灯，最近开发中收集的这篇文章主要介绍js基础事件之event对像和事件流(冒泡事件)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.event对像和事件流(冒泡事件)
event：获取事件的详细信息，检测用户所触发的事件。例如鼠标单击左右键，通过键盘触发的事件。
事件冒泡：若存在div1和div2，div1为div2的父级，在触发div1的事件时，div2也会被相应的触发。点击事件传递的一个过程，只要父级存在点击事件，在子级被触发后会将触发事件传递给上一级

<script type="text/javascript">
	wind.onload=function(){
		document.onclick=function(){
			//获取鼠标点击的横纵坐标；兼容 IE
			alert(event.clientX+'，'+event.clientY);
		}
	}
<script>

实际上上述代码存在兼容性问题，在火狐和低版本谷歌浏览器下是不被执行的(js第二定律)。实际上我们可以通过事件处理函数解决这个问题

<script type="text/javascript">
	wind.onload=function(){
		//ev表示系统传过来的事件处理函数的参数；
		document.onclick=function(ev){
			//event兼容IE； ev兼容火狐、谷歌等浏览器
			var oEvent=ev||event;
			alert(oEvent.clientX+'，'+oEvent.clientY)
		}
	}
<script>

事件冒泡：触发事件向父级传递的一个过程
点击里面一层div后会弹出对应的背景颜色，执行完最里面一层后，将事件往上传递给它的父级也就是最外层的div弹出red。如果给body加上一个点击事件，则执行完最外层div后，body也会被执行如此循环往复，直到最外面的document。

<style>
	div{
		padding:100px;
	}
</style>

<div style="background-color:red;" onclick="alert(this.style.backgroundColor)">
	<div style="background-color:#ccc;" onclick="alert(this.style.backgroundColor)"></div>
</div>

例子：仿select下拉框。给个button、div做一个当我们点击按钮就显示div，点击页面其他空白部分div隐藏的这样的一个功能

<style>
	#div1{
	width:66px;
	height:166px;
	background-color:red;
	display:none;
	}
<style>

<script type="text/javascript">
	windown.onload=function(){
		var oBtn1=document.getElementById('btn1');
		var oDiv1=document.getElementById('div1');
		oBtn1.onclick=function(){
			oDiv1.style.display='block';
		}
		document.onclick=function(){
			oDiv1.style.display='none';
		}
	}
<script>

上述 js代码会出现冒泡的现象，原因是当我们点击button，的确button事件成功执行了，但是，执行完后的一瞬间，就会出现冒泡，冒到document上也就是将button事件传递到了document上，执行block

通过event对象取消冒泡

<script type="text/javascript">
	windown.onload=function(){
		var oBtn1=document.getElementById('btn1');
		var oDiv1=document.getElementById('div1');
		oBtn1.onclick=function(ev){
			//传递参数处理浏览器兼容性问题
			var oEvent=ev||event;
			
			oDiv1.style.display='block';
			
			//event属性cancelbubble：取消冒泡不再向父级传递事件
			oEvent.cancelbubble=true;
		}
		document.onclick=function(){
			oDiv1.style.display='none';
		}
	}
<script>

<input id="btn1" type="button" value="显示">
<div id="div1">

</div>

2.鼠标事件(clientX，clientY)鼠标点击的位置坐标，其中clientX，clientY都是可视区坐标。(document.onclick事件和body.onclick事件的区别)

<script type="text/javascript">
	wind.onload=function(){
		//ev表示系统传过来的事件处理函数的参数；
		document.onclick=function(ev){
			//event兼容IE； ev兼容火狐、谷歌等浏览器
			var oEvent=ev||event;
			//clientX、clientY鼠标点击的横纵坐标
			alert(oEvent.clientX+'，'+oEvent.clientY)
		}
	}
<script>

鼠标事件之onmousemove
做一个div跟着鼠标移动的程序

<style>
	#div1{
		width:200px;
		height:200px;
		backgroudColor:red;
		position:absolute;
	}
</style>

<script type="text/javascript">
	//鼠标移动时所发生的的事件
	document.onmousmove=function(ev){
		//给定参数处理兼容性问题
		var oEvent=ev||event;
		
		var oDiv1=document.getElementById('div1');
		//当鼠标移动到相应的横坐标时，div1就会移动到相应的位置
		oDiv1.style.left=oEvent.clientX+'px';
		//当鼠标移动到相应的纵坐标时，div1就会移动到相应的位置
		oDiv1.style.top=oEvent.clientY+'px';
		
	}
</script>

//给body加个height
<body style="height:2000px">
	<div id="div1"></div>
</body>

实际上上述代码存在bug。当我们给 body加个 height的时候就会发现 div1在滚动条往下滚动时并不会和鼠标一起移动。原因是 clientX，clientY均是页面可视区坐标，当滚动条往下滚动的时候，可视区和div1会出现一段距离，这个时候我们就需要用到scrollTop+clientY。一般用到 clientX，clientY最好要考虑到 scrollTop

处理上述BUG

<script type="text/javascript">
	//鼠标移动时所发生的的事件
	document.onmousmove=function(ev){
		//给定参数处理兼容性问题
		var oEvent=ev||event;
		
		
		var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
		
		var oDiv1=document.getElementById('div1');
		//当鼠标移动到相应的横坐标时，div1就会移动到相应的位置
		oDiv1.style.left=oEvent.clientX+'px';
		//当鼠标移动到相应的纵坐标时，div1就会移动到相应的位置
		oDiv1.style.top=oEvent.clientY+scrollTop+'px';
		
	}
</script>

body.onclick事件，可以通过添加样式，前提是让整个网页存在元素以及被boder撑起来再来点击才会有用。这是body的一大弊端

<script type="text/javascript">
	window.onload=function(){
		//document.body.onclick=functio(){
			//alert('a');	//不会出现任何反应，也就是说事件不被执行
		//}
		
		  //当我们去掉body点击空白页也会执行相应事件代码
		  document.onclick=functio(){
			  alert('a');	
		  }
	}
</script>

关于document
最简单的理解就是document代码整个页面，实际上document也存在子节点

<script type="text/javascript">
	windown.onload=function(){
		//childNodes[0]表示document第一个子节点；tagName表示第一个子节点的名字
		//alert(document.childNodes[0].tagName);
		alert(document.childNodes[1].tagName);	//第一个子节点输出HTML
	}
</script>

上述代码实际上输出的是一个！(感叹号) 不妨可以去看看HTML编译环境(DW，HBulider)等，最上面第一个字符就是！(感叹号)。实际上在编译环境中document是隐藏在HTML上面的，包含了整个网页