当前位置： 移动技术网 > IT编程>网页制作>CSS > JS事件对象之事件对象作用及兼容实例解析

JS事件对象之事件对象作用及兼容实例解析

2018年10月07日  | 移动技术网IT编程  | 我要评论

js事件对象--1(事件对象作用及兼容)

一.事件对象的作用
1.可以获得和哪个按键结合
2.可以获得点击所在的位置
3.可以获得点击所对应的标签：
二.兼容：形参对象是针对于现代浏览器，ie浏览器不能通过形参无法通过形参获得对象，通过window.event来获得,即console.log(window.event)。
1.兼容操作方法：var ev=e || window.event; --此处为：或语法，返回为真的值。
–下为实例讲解：

<script type="text/javascript">
	var wrap=document.getelementbyid('wrap')；
	wrap.onclick=function(e)
	{
		var ev=e || window.event;  //或语法，返回为真的值
		console.log(ev);
		// 2.事件对象点击所在的位置
         //clientx和clienty,针对于浏览器视窗而言
		console.log("clientx:"+ev.clientx+" "+"clienty:"+ev.clienty);
		//offsetx和offsety相对于自身而言
		console.log("offsetx:"+ev.offsetx+" "+"offsety"+ev.offsety);
		//screenx和screeny相对于显示屏
		console.log("screenx:"+ev.screenx+" "+"screeny:"+ev.screeny);
		//3.点击所对应的标签
		console.log(ev.target);
	}
</script>

三：事件对象对应小练习：
–实现鼠标点击浏览器区域使标签区域跟着鼠标移动

*{
		margin:0;
		padding:0;
	}
		#wrap{
			width:100px;
			height:100px;
			background:green;
			position:absolute;
		}

 

<script type="text/javascript" src="getcss.js"></script><script type="text/javascript"> var wrap=document.getelementbyid('wrap'); var width=parseint(getcss(wrap,"width")); var height=parseint(getcss(wrap,"height")); window.onclick=function (e) { var ev=e||window.event; var x=ev.offsetx; var y=ev.offsety; //将x和y分别赋值给left和top wrap.style.left=x-0.5*width+'px'; wrap.style.top=y-0.5*height+'px'； //回顾offsetwidth和offsetheight分别是标签本身的宽和高，得到的是数字，用标签去调用。 } </script>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网