Event对象（一）

来源：互联网发布：类似双程的网络剧编辑：程序博客网时间：2024/06/05 17:12

1、什么是event对象

所谓的event对象，就是用来获取事件的详细信息：鼠标位置（clientX，clientY），键盘事件（keyCode）

举个例子：获取鼠标位置：clientX，clientY

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>获取鼠标位置</title></head><body></body></html><script type="text/javascript">document.onclick = function(){alert('横坐标：' + event.clientX + ' ,纵坐标：' + event.clientY);}</script>

在IE下可以看到鼠标的坐标位置。当然上面的代码有兼容问题，只兼容IE，不兼容FF，需要通过传递参数可以解决FF。

2、获取event对象（兼容性写法）

将上面的代码修改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>获取鼠标位置</title></head><body></body></html><script type="text/javascript">document.onclick = function(e){var oEvent = e || event;alert('横坐标：' + oEvent.clientX + ' ,纵坐标：' + oEvent.clientY);}</script>

这样我们就做到了兼容所有浏览器。

3、事件冒泡

说到事件对象，不可避免的要说到事件冒泡，那么什么是事件冒泡呢？

事件冒泡就是当事件触发完成后，会将事件传递到父层，继续触发，直到最后的document。下面的例子可以很好的解释什么是事件冒泡：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>什么是事件冒泡</title></head><body><div style="width:300px; height:300px; background:red;" onclick="alert(this.style.background);"><div style="width:200px; height:200px; background:green;" onclick="alert(this.style.background);"><div style="width:100px; height:100px; background:gray;" onclick="alert(this.style.background);"></div></div></div></body></html>

如何取消冒泡？oEvent.cancelBubble = true;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>取消冒泡</title><style type="text/css">#div1{width:100px;height:100px;background:red;display:none;}</style></head><body><input type="button" value="点击显示" id="btn1" /><br /><div id="div1"></div></body></html><script type="text/javascript">window.onload = function(){var oBtn = document.getElementById('btn1');var oDiv = document.getElementById('div1');oBtn.onclick = function(e){var oEvent = e || event;oDiv.style.display = 'block';oEvent.cancelBubble = true;};document.onclick = function(){oDiv.style.display = 'none';}}</script>

4、鼠标事件

前面我们说到clientX，clientY，其实指的是鼠标可视区坐标。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>跟随鼠标的div</title><style type="text/css">#div1{width:100px;height:100px;background:red;position:absolute;top:0;left:0;}</style></head><body style="height:2000px;"><div id="div1"></div></body></html><script type="text/javascript">window.onload = function(){var oDiv = document.getElementById('div1');document.onmousemove = function(e){var oEvent = e || event;oDiv.style.left = oEvent.clientX + 'px';oDiv.style.top = oEvent.clientY + 'px';}}</script>

上面的代码我们可以看出，当页面滚动一定距离时，鼠标和div分开了。这个就解释了为什么clientX，clientY是可视区坐标。之所以出错了，是因为没有算上滚动距离，下面我们来介绍滚动距离。

首先需要介绍滚动条的意义：可视区与页面顶部的距离。而这段距离就是滚动距离了。如何获取滚动距离？答案是 scrollTop

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//前一个兼容ie/ff，后一个兼容chrome

最终代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>跟随鼠标的div</title><style type="text/css">#div1{width:100px;height:100px;background:red;position:absolute;top:0;left:0;}</style></head><body style="height:2000px;"><div id="div1"></div></body></html><script type="text/javascript">window.onload = function(){var oDiv = document.getElementById('div1');document.onmousemove = function(e){var oEvent = e || event;var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;oDiv.style.left = oEvent.clientX + scrollLeft + 'px';oDiv.style.top = oEvent.clientY + scrollTop + 'px';}}</script>

5、键盘事件

keyCode——获取用户按下键盘的哪个按键。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>keyCode</title><style type="text/css">#div1{width:100px;height:100px;background:red;position:absolute;}</style></head><body><div id="div1"></div></body></html><script type="text/javascript">document.onkeydown = function(e){var oEvent = e || event;var oDiv = document.getElementById('div1');//alert(oEvent.keyCode);if(oEvent.keyCode == 37){oDiv.style.left = oDiv.offsetLeft - 10 + 'px';}if(oEvent.keyCode == 39){oDiv.style.left = oDiv.offsetLeft + 10 + 'px';}if(oEvent.keyCode == 38){oDiv.style.top = oDiv.offsetTop - 10 + 'px';}if(oEvent.keyCode == 40){oDiv.style.top = oDiv.offsetTop + 10 + 'px';}}</script>

PS：博客搬家了，以后不再 CSDN 更新了，见谅。最新博客地址：http://www.cnblogs.com/yjzhu/