JavaScript笔记 06：事件对象

1. 事件对象

当事件的响应函数触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

在下面的div中展示鼠标在上面div中的位置

<div id="areaDiv"></div>
<div id="showMsg"></div>

div {
   
	border: 2px solid black;
	width: 500px;
}
#areaDiv {
   
	height: 100px;
	margin-bottom: 10px;
}
#showMsg {
   
	height: 30px;
	line-height: 30px;
}

window.onload = function () {
   
	var area = document.getElementById("areaDiv");
	var msg = document.getElementById("showMsg");
	// 当鼠标在元素内移动时被触发
	area.onmousemove = function (event) {
   
		/*
			在IE8中，当事件的响应函数触发时，浏览器没有传递事件对象
			在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
			此时通过window.event来使用事件对象
		*/
		// 兼容IE8和火狐
		event = event || window.event;
		var x = event.clientX;
		var y = event.clientY;
		msg.innerHTML = "x = " + x + ", y = " + y;
	};
};

实现div跟随鼠标移动的效果

<div id="box1"></div>

body {
   
  height: 1000px;
  width: 2000px;
}
#box1 {
   
  width: 100px;
  height: 100px;
  background-color: coral;
  position: absolute;
}

window.onload = function () {
   
  var box1 = document.getElementById("box1");
  // chrome认为滚动条属于body，但是IE和火狐等浏览器认为浏览器的滚动条是html的
  document.onmousemove = function (event) {
   
  	event = event || window.event;
    // clientX获取的是鼠标在当前的可见窗口的坐标，如果滚动条发生滚动，此时鼠标位置会有问题
    var top = event.clientY;
    var left = event.clientX;
    // pageX获取的是鼠标相对于当前页面的坐标，可以解决上面的问题，但是IE8不支持（IE8不支持）
    top = event.pageY;
    left = event.pageX;
    // 兼容解决
    top = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
    left = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
    // 设置div的位置等于鼠标所在点的坐标位置
    box1.style.left = left + "px";
    box1.style.top = top + "px";
  };
};

2. 事件的冒泡

所谓的冒泡就是指事件的向上传导，当后代元素中的事件被触发时，其祖先元素的相同事件也会被触发

<div id="box1">
	我是box1
	<span id="s1">我是span</span>、
</div>

#box1 {
   
  width: 200px;
  height: 200px;
  background-color: coral;
}
#s1 {
   
  background-color: rosybrown;
}

window.onload = function ()