15javascript的Event对象

最新推荐文章于 2025-04-05 02:11:58 发布

原创最新推荐文章于 2025-04-05 02:11:58 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了HTML中的各种事件及其处理方式，包括鼠标和键盘事件的详细属性，并提供了多个实例帮助理解事件对象的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件（event）对象

事件对象代表着一个事件的状态，譬如发生事件的元素，键盘按键的状态，鼠标按钮的状态。

事件对象只有在可以使用事件处理而不是其他代码处理时才会有效。

事件句柄

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性此事件发生在何时...
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。支持该事件的 HTML 标签：<body><frame><frameset><iframe>, <img><link>
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。

鼠标 / 键盘属性

属性描述
altKey 返回当事件被触发时，"ALT" 是否被按下。
button 返回当事件被触发时，哪个鼠标按钮被点击。（0表示未按任何键，1表示按下左键，2表示按下右键）
clientX 返回当事件被触发时，鼠标指针相对于当前窗口的水平坐标。
clientY 返回当事件被触发时，鼠标指针相对于当前窗口的垂直坐标。
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
screenX 返回当某个事件被触发时，鼠标指针相对于屏幕的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针相对于屏幕的垂直坐标。
offsetX 设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
offsetY 设置或者是得到鼠标相对于目标事件的父元素的内边界在y坐标上的位置。
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。

JavaScript中event的x,clientX,offsetX的区别
请看下面的文字说明，也就是event中x,clientX,offsetX,screenX的区别：
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。
offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕。
y,clientY,offsetY也类似。

事件源对象
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的.都是获取当前事件的源
event.srcElement.tagName，当前事件的源的名字。
event.srcElement.type，当前事件的源的类型。
捕获释放
event.srcElement.setCapture();
event.srcElement.releaseCapture();
事件按键
event.keyCode
event.shiftKey
event.altKey
event.ctrlKey
事件返回值
event.returnValue
鼠标位置
event.x
event.y
绑定事件
document.captureEvents(Event.KEYDOWN);

实例
1哪个鼠标按钮被点击？
<html>
<head>
<script type="text/javascript">
function whichButton(elem,event)
{
if (event.button==2)
{
alert("您点击了鼠标右键！")
}
else
{
alert("您点击了鼠标左键！")
}
}
</script>
</head>
<body onmousedown="whichButton(this,event)">
<p>请在文档中点击。一个消息框会提示出你点击了哪个鼠标按键。</p>
</body>
</html>

2光标的坐标?
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
</body>
</html>

3被按的键的unicode字符?
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}

</script>
</head>
<body onkeyup="whichButton(event)">
<p><b>注释：</b>在测试前请确定此窗体被选中。</p>
<p>在键盘上按一个键，将返回你的键盘动作。</p>
</body>
</html>

4相对于屏幕，光标的坐标是？
<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}

</script>
</head>
<body onmousedown="coordinates(event)">
<p>
在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
</p>
</body>
</html>

5shift键是否被按下
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("shift按下")
}
else
{
alert("shift没有按下")
}
}

</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>鼠标点击</p>
<p>本例演示如何判断Shift键有没被按下</p>
</body>
</html>

6哪个元素被点击了？
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("shift按下")
}
else
{
alert("shift没有按下")
}
}

</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>鼠标点击</p>
<p>本例演示如何判断Shift键有没被按下</p>
</body>
</html>

7发生了那种类型事件？
<html>
<head>
<script type="text/javascript">
function whichType(event)
{
alert(event.type)
}
</script>
</head>
<body onmousedown="whichType(event)">
<p>
点击鼠标，将返回事件判断
</p>
</body>
</html>

8让鼠标的单机和双击各自独立
在默认的情况下，双击事件时是要触发单击事件的，但是这种情况有时候却是我们不想要的，那么如何才能在双击的时候屏蔽单击事件的触发呢？网上流传一种延迟执行的方法，大致思路如下：
1、声明一个全局的计时器变量如：clickTimer
2、在代理单击事件里设置计时器，默认220毫秒之后触发真正的单击事件处理函数
3、在双击事件里判断计时器变量，如果该变量不为NULL，则说明在触发该双击事件前触发了单击事件，取消计时器，因为真正的单击事件处理函数在220毫秒之后才会触发，所以在这个时候结束定时器，则真正单击事件处理函数不会被执行。

附上代码：
var timerClick;
//单击事件代理
function onNodeClick(){
//oneClick才是真正的单击事件处理函数
timerClick=window.setTimeout(oneClick,220);
}
function oneClick(){
.......
}
// 双击事件处理函数
function DbClick(id){
if(timerClick){
//让单击事件不执行
window.clearTimeout(timerClick);
}
......
}
*************************
onclick=hand(this,event)或onclick=hand(event)，这样function hand(elem,ev){..}或function hand(ev){..}的ev参数将获得Event对象。

IE下,event对象有srcElement属性,但是没有target属性;
Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的.都是获取发生该事件的元素。;
事件按键
event.keyCode
event.shiftKey
event.altKey
event.ctrlKey
事件返回值
event.returnValue

阻止事件冒泡：
jQuery.Event提供了一个非常简单的方法来阻止事件冒泡：event.stopPropagation();
但是这个方法对使用live 绑定的事件没有作用，需要一个更简单的方法阻止事件冒泡：return false。如：
$("p").live("click", function(){
$(this).after("Another paragraph!");
return false;
});

js阻止事件冒泡：
function stopBubble(e) {
if (e && e.stopPropagation) {//非IE
e.stopPropagation();
}
else {//IE
window.event.cancelBubble = true;
}
}
cancelBubble（HTML DOM Event 对象属性）：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。

js阻止默认事件：
function stopDefault(e) {
//阻止默认浏览器动作(W3C)
if (e && e.preventDefault)
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}