`

Event/window.Event属性和方法

IEFirefoxCSSOpera浏览器 
阅读更多

一、event说明：event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；

                 event对象只在事件发生的过程中才有效。
                 firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。
                在IE/Opera中是window.event，在Firefox中是event；

                而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中两者都可用。
               下面两句效果相同
                var evt = (evt) ? evt : ((window.event) ? window.event : null);
                var evt = evt || window.event; // firefox下window.event为null, IE下event为null

二、event的属性

     　type：事件的类型，如onlick中的click；
    　srcElement/target：事件源，就是发生事件的元素；
 　　button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键）
　　clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上document.body.scrollLeft和 document.body.scrollTop)
　　offsetX,offsetY/layerX,layerY：事件发生的时候，鼠标相对于源元素左上角的位置；
　　x,y/pageX,pageY：检索相对于父元素鼠标水平坐标的整数；
　　altKey,ctrlKey,shiftKey等：返回一个布尔值；
　　keyCode：返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，可以用 event.which替代 )
　　fromElement,toElement：前者是指代mouseover事件中鼠标移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素；
     cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素；    (e.cancelBubble = true; 相当于 e.stopPropagation();)
      returnValue：一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作；(e.returnValue = false; 相当于 e.preventDefault();)
     attachEvent(),detachEvent()/addEventListener(),removeEventListener：为制定DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素；
     screenX、screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要；
三、IE中事件的起泡
IE中事件可以沿着包容层次一点点起泡到上层，也就是说，下层的DOM节点定义的事件处理函数，到了上层的节点如果还有和下层相同事件类型的事件处理函数，那么上层的事件处理函数也会执行。例如， div 标签包含了 a ，如果这两个标签都有onclick事件的处理函数，那么执行的情况就是先执行标签 a 的onclick事件处理函数，再执行 div 的事件处理函数。如果希望的事件处理函数执行完毕之后，不希望执行上层的 div 的onclick的事件处理函数了，那么就把cancelBubble设置为true即可。

 

－－－－－－第二篇-----------

event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。

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

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

例子

下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。

<HTML>
<HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT LANGUAGE="JScript">
function cancelLink() {
if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
window.event.returnValue = false;
}
</SCRIPT>
<BODY onclick="cancelLink()">

下面的例子在状态栏上显示鼠标的当前位置。

<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">

属性：

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

--------------------------------------------------------------------------------

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

语法：
event.altKey

可能的值：
当alt键按下时，值为 TRUE ，否则为 FALSE 。只读。

2.button
描述：
检查按下的鼠标键。

语法：
event.button

可能的值：
0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键

这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件，不管鼠标状态如何，都返回 0（比如onclick）。

3.cancelBubble
描述：
检测是否接受上层元素的事件的控制。

语法：
event.cancelBubble[ = cancelBubble]

可能的值：
这是一个可读写的布尔值:

TRUE 不被上层原素的事件控制。
FALSE 允许被上层元素的事件控制。这是默认值。

例子：
下面的代码片断演示了当在图片上点击（onclick）时，如果同时shift键也被按下，就取消上层元素（body）上的事件onclick所引发的showSrc()函数。

<SCRIPT LANGUAGE="JScript">
function checkCancel() {
if (window.event.shiftKey)
window.event.cancelBubble = true;
}
function showSrc() {
if (window.event.srcElement.tagName == "IMG")
alert(window.event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" src="/sample.gif">

4.clientX
描述：
返回鼠标在窗口客户区域中的X坐标。

语法：
event.clientX

注释：
这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

5.clientY
描述：
返回鼠标在窗口客户区域中的Y坐标。

语法：
event.clientY

注释：
这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

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

语法：
event.ctrlKey

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

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

语法：
event.fromElement

注释：
这是个只读属性。

8.keyCode
描述：
检测键盘事件相对应的内码。
这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。

语法：
event.keyCode[ = keyCode]

可能的值：
这是个可读写的值，可以是任何一个Unicode键盘内码。如果没有引发键盘事件，则该值为 0 。

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 源对象上事件的默认操作被取消

例子见本文的开头。

13.screenX
描述：
检测鼠标相对于用户屏幕的水平位置

语法：
event.screenX

注释：
这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

14.screenY
描述：
检测鼠标相对于用户屏幕的垂直位置

语法：
event.screenY

注释：
这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

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>

19.type
描述：
返回事件名。

语法：
event.type

注释：
返回没有“on”作为前缀的事件名，比如，onclick事件返回的type是click
只读。

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

语法：
event.x

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

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

语法：
event.y

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

分享到：
| oracle中判断一个串中是否包含另一个串
评论
3 楼 myhand 2012-04-12  
总结的挺不错的，先留言标记，话说，楼主头像太漂亮了，你的留言版上留言也和这个有关啊！
2 楼 dahai639 2010-01-02  
美女楼主写的很好啊，收藏了，
1 楼 rossbu 2009-04-14  
你还不错，女孩心细，做程序应该可以的.
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    [JS]详尽解析window.event对象

    例如，你可以使用`event.preventDefault()`方法阻止事件的默认行为，或者利用`event.stopPropagation()`防止事件进一步冒泡。这些功能结合`event`对象的属性，可以实现复杂的行为，如检查特定键是否按下，或者根据...

    火狐浏览器不支持window.event的解决办法

    火狐浏览器不支持window.event的解决办法，解决不同浏览器针对window.event的差异

    window.event.keycode值大全

    在JavaScript中，`window.event.keycode`属性被用于获取用户按下键的键盘码。这在处理键盘事件时非常有用，可以帮助开发者识别并响应特定的按键操作。本文将详细介绍一系列常见的`keycode`值及其对应的按键，帮助...

    window.event 对象详解

    此外，`event`对象还有许多其他特性，如`event.timeStamp`记录事件发生的时间戳，`event.clientX`和`event.clientY`表示鼠标相对于浏览器窗口的坐标。在处理复杂交互时，这些属性可以提供宝贵的信息。 总结起来，`...

    高手window.event对象详解

    - **定义**：`event.clientX` 和 `event.clientY` 分别表示鼠标相对于可视窗口的位置（水平/垂直坐标）。 - **值**：整数，表示鼠标指针位置。 - **应用场景**：常用于响应用户的鼠标移动，例如在页面上显示浮动...

    火狐下window.event回车改Tab解决方案

    例如，在Internet Explorer（IE）浏览器中，可以直接通过`window.event`来获取当前触发事件的信息；而在其他非IE浏览器（如Firefox）中，则需要通过其他方式来获取事件对象。这导致了在编写跨浏览器兼容性良好的代码...

    js弹窗并返回值(window.open方式)

    if (event.data === 'closed') { console.log('新窗口已关闭，结果是:', result); } }); newWindow.addEventListener('beforeunload', () =&gt; { window.postMessage('closed', '*'); }); ``` 这里，`b.html`是...

    onunload事件判断浏览器是刷新还是关闭窗口

    这个方法的原理是，当浏览器关闭时，window.event.screenX 和 window.event.clientY 属性的值将满足一定的条件，因此可以根据这个条件来判断浏览器是刷新还是关闭窗口。 我们可以使用 onunload 事件和 event....

    window.open父子窗口传值问题

    console.log("Received data:", event.data); }, false); ``` 4. **利用存储API**：例如localStorage或sessionStorage。父子窗口可以共享这些存储空间。 ```javascript // 父窗口设置值 localStorage.setItem...

    js window.open iframe dialog

    在JavaScript的世界里，`window.open`、`iframe`和`dialog`是三个非常重要的概念，它们在网页交互和页面通信中扮演着关键角色。这里我们将深入探讨这些知识点，并结合实例来帮助你理解它们的用法。 1. `window.open...

    利用HTML5的window.postMessage实现跨域通信

    发送消息时，调用`postMessage`方法，传入两个参数：要传递的数据和接收数据的窗口的引用（通常是`window`对象的引用或`iframe`的`contentWindow`属性）。 接收窗口需要监听`message`事件来接收数据。当接收到消息...

    常见兼容性问题

    `和`mY = event.y ? event.y : event.pageY;`。 4. **window.location.href问题**： 在Firefox 2.0.x及更早版本中，`window.location`可用来重定向页面，而IE和较新版本的Firefox则使用`window.location.href`。...

    javascript中window.event事件用法详解

    window.event对象和其属性的使用，对于实现复杂的交互逻辑非常有帮助。它可以为开发者提供丰富的信息来判断事件的来源以及用户的行为，从而实现更加精确和丰富的用户交互体验。在实际开发中，合理利用这些属性能够...

    网页右键ie不支持event.preventDefault和event.returnValue （需要加window）

    在IE浏览器中，我们需要使用另一种方式来阻止事件的默认行为，那就是通过`window.event.returnValue`属性。当`window.event.returnValue`被赋值为`false`时，相当于阻止了事件的默认行为。下面是一个兼容IE和非IE...

    10个至强JavaScript代码

    this.parent.scroll(event.wheelDelta); } /* ==== scrollbar drag N drop ==== */ this.bar.onmousedown = function (e) { if (!e) e = window.event; var scl = e.screenX - this.offsetLeft; ...

    filemon.c_ios_Book2_FSE_

    Extra event arguments removed you normally don't care about removed - to see use -v - Output both easier to read AND grep friendly - e.g.: 298 TerminalExtended attributes changed for /Users/morpheus/...

    window.event.srcElement 得到事件源对象

    只要在外层上写一个 然后检查event.srcElement.tagName或其他属性是不是你想要的来决定是否响应事件就可以了.不过好像event.srcElement在ff里不起作用 比如 span div event对象指当前触发的事件对象, window.event...

    js.rar_页面跳转

    event.preventDefault(); // 阻止默认的表单提交行为 // 提交表单... window.location.href = 'http://www.example.com/confirmation'; }); ``` 总结，JavaScript的页面跳转功能是Web开发中的基础技能，通过`...

    js禁止页面刷新禁止用F5键刷新禁止右键的示例代码.docx

    if (event.ctrlKey && event.keyCode == 82) { // Ctrl + R // ... } if (event.keyCode == 121) { // Shift + F10 event.returnValue = false; } if (event.ctrlKey && event.keyCode == 78) { // Ctrl + N ...

    【JavaScript源代码】vue实现桌面向网页拖动文件的示例代码(可显示图片音频视频).docx

    在`dragover`事件中，通常需要调用`event.stopPropagation()`阻止默认的浏览器行为，避免文件被浏览器默认打开，同时`event.preventDefault()`防止元素无法接收拖放事件。 ```html ...

Magicbox
Global site tag (gtag.js) - Google Analytics