`

javascript 的event对象

    博客分类:
  • Web
 
阅读更多
event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。

event对象只在事件发生的过程中才有效。

event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。


属性:
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y


1.type:返回事件名
语法:
event.type
注释:
返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click
只读。

2.screenX:检测鼠标相对于用户屏幕的水平位置
  screenY:检测鼠标相对于用户屏幕的垂直位置
语法:
event.screenX
event.screenY
注释:
这是2个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

3.clientX:返回鼠标在窗口客户区域中的X坐标。
  clientY:返回鼠标在窗口客户区域中的Y坐标
语法:
event.clientX
event.clientY
注释:
这是2个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

4.button:检查按下的鼠标键。
语法:
event.button
可能的值:
0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键

5.cancelBubble:检测是否接受上层元素的事件的控制
语法:
event.cancelBubble[ = cancelBubble]
可能的值:
这是一个可读写的布尔值:
TRUE 不被上层原素的事件控制。
FALSE 允许被上层元素的事件控制。这是默认值。

6.keyCode
描述:检测键盘事件相对应的内码。
这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。
语法:
event.keyCode[ = keyCode]
这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为 0;

7.event.which
Netscape/Firefox/Opera中不支持 window.event.keyCode,需要用event.which代替,IE用event.keCode方法获取当前被按下的键盘按键值,而NetScape/FireFox/Opera用的则是event.which;




-------------------------以下为参考资料:

1.altKey
描述:
检查alt键的状态。

语法:
event.altKey

可能的值:
当alt键按下时,值为 TRUE ,否则为 FALSE 。只读。
这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件,不管鼠标状态如何,都返回 0(比如onclick)。


6.ctrlKey
描述:
检查ctrl键的状态。

语法:
event.ctrlKey

可能的值:
当ctrl键按下时,值为 TRUE ,否则为 FALSE 。只读。


7.fromElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所离开的元素。参考:18.toElement

语法:
event.fromElement

注释:
这是个只读属性。

9.offsetX
描述:
检查相对于触发事件的对象,鼠标位置的水平坐标

语法:
event.offsetX


10.offsetY
描述:
检查相对于触发事件的对象,鼠标位置的垂直坐标

语法:
event.offsetY


11.propertyName
描述:
设置或返回元素的变化了的属性的名称。

语法:
event.propertyName [ = sProperty ]

可能的值:
sProperty 是一个字符串,指定或返回触发事件的元素在事件中变化了的属性的名称。
这个属性是可读写的。无默认值。

注释:
你可以通过使用 onpropertychange 事件,得到 propertyName 的值。

例子:
下面的例子通过使用 onpropertychange 事件,弹出一个对话框,显示 propertyName 的值。

<HEAD>
<SCRIPT>
function changeProp()
{
btnProp.value = "This is the new VALUE";
}

function changeCSSProp()
{
btnStyleProp.style.backgroundColor = "aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<P>The event object property propertyName is
used here to return which property has been
altered.</P>

<INPUT TYPE=button ID=btnProp onclick="changeProp()"
VALUE="Click to change the VALUE property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
<INPUT TYPE=button ID=btnStyleProp
onclick="changeCSSProp()"
VALUE="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
</BODY>

12.returnValue
描述:
设置或检查从事件中返回的值

语法:
event.returnValue[ = Boolean]

可能的值:
true 事件中的值被返回
false 源对象上事件的默认操作被取消

例子见本文的开头。





15.shiftKey
描述:
检查shift键的状态。

语法:
event.shiftKey

可能的值:
当shift键按下时,值为 TRUE ,否则为 FALSE 。只读。


16.srcElement
描述:
返回触发事件的元素。只读。例子见本文开头。

语法:
event.srcElement


17.srcFilter
描述:
返回触发 onfilterchange 事件的滤镜。只读。

语法:
event.srcFilter


18.toElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所进入的元素。参考:7.fromElement

语法:
event.toElement

注释:
这是个只读属性。

例子:下面的代码演示了当鼠标移到按钮上时,弹出一个对话框,显示“mouse arrived”

<SCRIPT>
function testMouse(oObject) {
if(oObject.contains(event.toElement)) {
alert("mouse arrived");
}
}
</SCRIPT>
:
<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>




20. x
描述:
返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:
event.x

注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。


21. y
描述:
返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:
event.y

注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
分享到:
评论

相关推荐

    javascriptEvent对象详解定义.pdf

    javascript Event 对象详解定义 在 JavaScript 中,Event 对象是事件状态的代表,它包含了事件发生的元素、键盘状态、鼠标位置和鼠标按钮状态等信息。一旦事件发生,浏览器的内存中就会生成相应的 Event 对象,如...

    javascript Event对象详解

    JavaScript中的Event对象是事件处理的核心部分,它包含了与事件相关的所有信息,如事件类型、触发事件的元素、鼠标和键盘的状态等。以下是对Event对象及其重要属性的详细解释: 1. **altKey**:这个属性用于检查...

    javascript Event对象详解及使用示例

    JavaScript Event对象是前端开发中不可或缺的一部分,它允许开发者与用户界面进行交云,比如按钮点击、键盘按键、鼠标移动等。Event对象负责管理事件在页面上发生的各种状态,包括事件发生的元素、键盘状态、鼠标...

    JavaScript event对象整理及详细介绍

    JavaScript中的event对象是事件处理机制的核心,它为开发者提供了处理事件所需的属性和方法。以下是对JavaScript event对象的详细介绍,包括其属性、方法以及在不同浏览器中的兼容性问题。 首先,event对象包含了...

    一些常用的特效包括一些javascript中event对象的使用

    根据给定文件的信息,我们可以总结出以下几个...以上内容主要介绍了JavaScript中Event对象的使用以及如何通过事件来控制和优化用户输入体验。通过这些方法,开发者可以在网页应用中实现更高效、更精确的用户交互功能。

    《javascript》——event对象与事件

    《JavaScript》——Event 对象与事件 Event 对象是 JavaScript 中的一个基本概念,它代表了用户与 Web 页面的交互行为,例如点击、鼠标移动、键盘输入等。Event 对象的属性和方法可以帮助开发者更好地处理用户的...

    window对象--event对象详解

    Event对象则是JavaScript事件处理中的核心,它包含了与特定事件相关的所有信息,如事件类型、事件目标等。 在深入讲解Window对象和Event对象之前,我们先了解一些基础概念。JavaScript是一种基于原型的动态类型语言...

    Javascript中的事件--Event对象

    下面我们将深入探讨`Event`对象的关键属性和方法,以及它们在JavaScript中的应用。 ### 1. `Event`对象的基础属性 - **`type`**:表示事件的类型,例如`click`、`mousemove`等。 - **`target`**:返回事件最初触发...

    window.event 对象详解

    在JavaScript编程语言中,`window.event`对象是一个特殊对象,它与浏览器的事件处理机制紧密相关。这个对象在大部分浏览器环境中(尤其是老版本的IE)是全局可用的,提供了当前事件的相关信息。本文将深入探讨`...

    JavaScript面向对象基础.ppt

    在JavaScript中,面向对象编程(OOP)是其核心概念之一,允许开发者通过类和对象来组织和管理代码,提高代码的可重用性和可维护性。 8.1 面向对象术语 面向对象编程的基础包括类、对象、继承和多态等概念。类是对象...

    event对象总结,更详细更全面

    JavaScript 事件对象总结 事件对象概述 JavaScript 事件对象是指在用户与浏览器交互时触发的事件,例如点击、键盘输入、鼠标移动等。事件对象是一种特殊的对象,它包含了事件的详细信息,例如事件类型、事件目标、...

    A JavaScript Event Bus

    在JavaScript中,Event Bus 可以是一个简单的对象,拥有发布(publish)和订阅(subscribe)方法。发布方法用于触发事件,而订阅方法用于注册监听特定事件的回调函数。这种模式的优势在于,它提供了一种松散耦合的...

    2.01 JavaScript基础事件以及Event对象(原生态).pdf

    JavaScript 基础事件与 Event 对象 本文将详细介绍 JavaScript 中的基础事件和 Event 对象,包括事件的定义、EventTarget 接收事件接口、addEventListener、removeEventListener、dispatchEvent 方法 serta ...

    Javascript之event大全

    Event对象包含了与事件相关的所有信息,如触发事件的元素、事件类型、按键状态等。在JavaScript中,事件可以是用户的行为,如点击按钮、滚动页面,或者是浏览器内部的操作,如加载完成或图片加载失败。 1. **event...

    javascript中event详解

    在JavaScript中,`event`对象是浏览器提供的一个标准对象,用于表示用户与网页交互时发生的各种事件的状态。这些事件包括但不限于用户点击、移动鼠标、按下键盘等操作。`event`对象包含了关于事件的所有相关信息,...

    Event 对象的使用方法

    Event对象经常与JavaScript函数结合,用于响应用户的交互行为。 事件句柄,也称为事件处理器,是HTML 4.0引入的新特性,允许我们在HTML标签中定义事件触发的行为。这些行为会在特定的事件发生时执行,例如用户点击...

    HTML DOM Event 对象

    首先,Event对象是JavaScript中用于处理事件的核心组件。它包含了有关事件的各种信息,例如哪个鼠标按钮被点击、光标坐标、按键Unicode码等。例如,`event.button`属性可以用来判断哪个鼠标按钮被点击(1表示左键,2...

    js Event对象的5种坐标

    JavaScript中的Event对象是处理用户交互和页面事件时不可或缺的一部分,它包含了与事件相关的各种信息,如事件类型、触发事件的元素、鼠标位置等。在不同的浏览器中,Event对象提供的坐标属性不尽相同,这给开发者...

Global site tag (gtag.js) - Google Analytics