事件对象+放大镜案例

一、事件对象：

1. 只要触发了某一个事件，就会产生一个相应的事件对象，这个event对象中包含着与这一事件相关的信息，所以通过事件对象就可获取任意相关事件的属性。
2. 考虑到兼容问题，通常这样写(以onclick事件为例)：

event.onclick=function(event){//当点击事件产生时，event就会被接受
	var event=event || window.event;//解决兼容问题
}

3. 常见属性：

属性	用途
clientX	光标相对于网页的水平位置
clientY	光标相对于网页的垂直位置
pageX	光标相对于网页的水平位置
pageY	光标相对于网页的垂直位置
screenX	光标相对于屏幕的水平位置
screenY	光标相对于屏幕的垂直位置
type	该事件的类型
target	该事件被传送到的对象
width	该窗口或框架的宽度
height	该窗口或框架的高度

注意：

• pageX、pageY是以当前文档为基准（若有滚动条，则会将滚动的区域算进去）。
• clientX、clientY是以当前可视区域为基准，无关乎滚动的区域。

4. JS常见事件

事件	触发
onclick	鼠标点击当前元素时就会触发
onmouseover	鼠标进入当前元素时就会触发
onmouseout	鼠标离开当前元素时就会触发
onmousemove	鼠标在当前元素中移动时就会触发
onmouseup	当鼠标弹起来是就会触发
onmousedown	当鼠标按下时就会触发

• onmouseup和onmousedown组合就成了onclick事件

二、放大镜

<script type="text/javascript">
		window.onload=function(){
			//1.获取需要的标签
			var box=document.getElementById("box");
			var small_box=box.children[0];
			var big_box=box.children[1];
			var mask=small_box.children[1];
			var big_pic=big_box.children[0];

			//2.监听鼠标进入small_box
			small_box.onmouseover=function(){
				//2.1将隐藏的mask和big_pic显示出来
				mask.style.display='block';
				big_box.style.display='block';
				//2.2监听鼠标的移动
				small_box.onmousemove=function(event){
					var event=event || window.event;//解决兼容问题
					//2.3求鼠标的位置
					var X=event.clientX-small_box.offsetParent.offsetLeft - 0.5* mask.offsetWidth;
					var Y=event.clientY-small_box.offsetParent.offsetTop - 0.5* mask.offsetHeight;
					//2.4边界的处理
					if(X<0){
						X=0;
					}else if(X>small_box.offsetWidth-mask.offsetWidth){
						X=small_box.offsetWidth-mask.offsetWidth;
					}
					if(Y<0){
						Y=0;
					}else if(Y>small_box.offsetHeight-mask.offsetHeight){
						Y=small_box.offsetHeight-mask.offsetHeight;
					}
					//2.5使mask移动起来
					mask.style.left=X+'px';
					mask.style.top=Y+'px';
					//2.6让big_pic按照比例移动移动起来
					big_pic.style.left=-X/(small_box.offsetWidth/big_box.offsetWidth)+'px';
					big_pic.style.top=-Y/(small_box.offsetHeight/big_box.offsetHeight)+'px';

				}
				//3.鼠标离开small_box
				small_box.onmouseout=function(){
					mask.style.display='none';
					big_box.style.display='none';
				}
	
			}
		}
	</script>

效果图：

注意事项：

1. offsetWidth、clientWidth返回的是数字,而style.width返回的是字符串，故此，一定要加上+'px'!

mask.style.left=X+'px';

2. 放大的是按照small_pic和big_pic的比例来放大的，即：

smallX/bigX=small_pic.width/big_pic.width;
smallY/bigY=small_pic.height/big_pic.height;

3. 一定要先进行边界处理后再写onmouseout事件，程序运行是有先后行的！
4. 鼠标向右移动，实际上是big_pic向左移动放大，要加上负号。