js 之二 事件对象

事件对象

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

// 当鼠标在areaDiv中移动时，在showMsg中显示坐标-->
<!--	var areaDiv =document.getElementById("areaDiv");-->
<!--	var showMsg =document.getElementById("showMsg");-->
<!--	// onmousemove事件在鼠标在元素中移动时触发-->
<!--	// 事件对象：当事件的响应函数被触发时浏览器每次会将一个事件对象作为实参传递进响应函数-->
<!--	// 在事件对象中封装了当前事件相关的一切信息，比如，鼠标坐标，键盘哪个键按下......详见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()给元素绑定响应函数
<script type="text/javascript">
	var btn01 =document.getElementById("btn01");
	var btn02 =document.getElementById("btn02");
	// 使用对象.事件 = 函数的形式只能绑定一个响应函数
	btn01.onclick = function(){
		alert("1");
	}
	// 为btn01绑定第二个响应函数会覆盖掉前一个
	btn01.onclick = function(){
		alert("2");
	}
	// addEventListener(时间的字符串不要on,回调函数,是否在捕获阶段触发事件一般都传false)也可以绑定响应函数
	// addEventListener()可同时绑定多个响应函数，事件触发时会根据函数绑定顺序执行
	btn02.addEventListener("click",function(){
		alert("1");
	},false)
	btn02.addEventListener("click",function(){
		alert("2");
	},false)
</script>




#### 事件的传播
<script type="text/javascript">
	var box1 =document.getElementById("box1");
	var box2 =document.getElementById("box2");
	var box3 =document.getElementById("box3");
	// 事件的传播：1.捕获阶段：从祖先元素向目标元素进行事件的捕获，但是默认此时不会触发事件 2.目标阶段：事件捕获到目标元素，捕获结束在目标元素上触发事件 3.冒泡阶段：事件从目标元素向祖先元素传递，依次触发祖先元素上的事件
	// 如果希望在捕获阶段就触发事件，可以将addEventListener第三个参数改成true,一般情况下不会希望在捕获阶段执行事件
	box1.addEventListener("click",function(){
		alert("box1")
	},false)
	box2.addEventListener("click",function(){
		alert("box2")
	},true)
	box3.addEventListener("click",function(){
		alert("box3")
	},false)
</script>

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