js 之二 事件对象

事件对象

/当事件的响应函数被触发时，浏览器每次都会讲一个事件对象作为实参传递响应函数; 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的，键盘的操作

// 当鼠标在areaDiv中移动时，在showMsg中显示坐标-->
<!--	var areaDiv =document.getElementById("areaDiv");-->
<!--	var showMsg =document.getElementById("showMsg");-->
<!--	// onm ousemove事件在鼠标在元素中移动时触发-->
<!--	// 事件对象：当事件的响应函数被触发时浏览器每次会将一个事件对象作为实参传递进响应函数-->
<!--	// 在事件对象中封装了当前事件相关的一切信息，比如，鼠标坐标，键盘哪个键按下......详见https://www.runoob.com/jsref/dom-obj-event.html-->
<!--	areaDiv.onmousemove = function(event){-->
<!--		// clientX获取水平座标，clientY获取垂直坐标-->
<!--		// alert(event.clientX+" "+event.clientY) -->
<!--		showMsg.innerHTML = "x = "+ event.clientX + ",y = "+ event.clientY-->
<!--	}-->

事件冒泡

//事件的冒泡（bubble）：事件的向上传导，当后代元素的事件被触发，祖先元素的相同事件也会被触发 
//在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象取消冒泡
```<script type="text/javascript">
	//事件的冒泡（bubble）：事件的向上传导，当后代元素的事件被触发，祖先元素的相同事件也会被触发 
	//在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象取消冒泡
	var s1 =document.getElementById("s1");
	s1.onclick = function(e){
		alert("s1")
		// 取消冒泡
		e.cancelBubble = true;
	}
	var box1 =document.getElementById("box1");
	box1.onclick = function(){
		alert("box1")
	}
	document.body.onclick = function(){
		alert("body")
	}
</script>


![image-20230101223812617](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230101223812617.png)
#### 事件的委派

要解决事件利用冒泡特性提成开发性能引发，点击事件不可控的问题

//当事件统一绑定元素共同祖先元素，这样当后代事件触发时，会一直冒泡到祖先元素，从通过祖先元素处理的事件，事件委派利用冒泡，通过委派可以减少事件绑定的次数，提交程序性能
event.target 获取触发的对象
this:是当前的对象 可以通过打印就出来

#### 事件的绑定

要解决一个绑定对象要触发多个事件处理函数的问题；通过 addEventistener()给元素绑定响应函数



#### 事件的传播

![image-20230102122634962](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230102122634962.png)