`
wangyuchuan520
  • 浏览: 14932 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Event属性和方法:

阅读更多

1. type:事件的类型,如onlick中的click;

2. srcElement/target:事件源,就是发生事件的元素;

3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下;(firefox中 0代表左键,1代表中间键,2代表右键)

4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置;(在DOM标准中,这两个属性值都不考虑文档的滚动 情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是 0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上
document.body.scrollLeft和 document.body.scrollTop)

5. offsetX,offsetY/layerX,layerY:事件发生的时候,鼠标相对于源元素左上角的位置;

6. x,y/pageX,pageY:检索相对于父要素鼠标水平坐标的整数;

7. altKey,ctrlKey,shiftKey等:返回一个布尔值;

8. keyCode:返回keydown何keyup事件发生的时候按键的代码,以及keypress 事件的Unicode字符;(firefox2不支持 event.keycode,可以用 event.which替代 )

9. fromElement,toElement:前者是指代mouseover事件中鼠标移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素;

10. cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素;(e.cancelBubble = true; 相当于 e.stopPropagation();)

11. returnValue:一个布尔属性,设置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue = false; 相当于 e.preventDefault();)

12. attachEvent(),detachEvent()/addEventListener(),removeEventListener:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在
attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素;

13. screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要;


一些说明:

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

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

3.  下面两句效果相同
var evt = (evt) ? evt : ((window.event) ? window.event : null);
var evt = evt || window.event; // firefox下window.event为null, IE下event为null

4.  IE中事件的起泡
IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件 处理函数,那么上层的事件处理函数也会执行。例如, div 标签包含了 a ,如果这两个标签都有onclick事件的处理函数,那么执行的情况就是先执行标签 a 的onclick事件处理函数,再执行 div 的事件处理函数。如果希望的事件处理函数执行完毕之后,不希望执行上层的 div 的onclick的事件处理函数了,那么就把cancelBubble设置为true即可。

分享到:
评论

相关推荐

    Javascript之event大全

    JavaScript 之 event大全 _event 对象是 JavaScript 中的一个重要概念,它代表事件的...event 对象提供了许多有用的属性来检测和控制事件的状态,这些属性可以帮助开发者更好地处理事件,并实现更加复杂的交互效果。

    event和srcElement说明,方法,技巧

    ### event和srcElement详解 #### 一、概述 在Web开发中,事件处理是非常重要的一个环节,它使得页面能够响应用户的交互行为。`event`对象是JavaScript中的一个重要对象,用于捕获用户或浏览器的动作,例如点击按钮...

    javascript之Event详解[定义].pdf

    在JavaScript中,Event对象非常重要,它提供了许多有用的属性和方法,帮助我们处理事件和响应用户的操作。但是,需要注意的是,Event对象的某些属性只对特定的事件有意义,因此在使用时需要根据实际情况进行选择。

    C++Event机制的简单实现

    在面向对象编程中,“事件”通常指的是对象的状态或属性发生变化,或者是对象接收到某些动作时,该对象会向外发出通知。例如,在图形用户界面(GUI)应用中,当用户点击按钮时,按钮对象就会触发一个“点击”事件。...

    JavaScript event对象整理及详细介绍

    Event属性和方法: 1. type:事件的类型,如onlick中的click; 2. srcElement/target:事件源,就是发生事件的元素; 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒...

    两窗体间传递数据。方法一:通过属性实现;方法二:通过委托实现。

    以下是两种主要的方法来实现这种数据传递:通过属性和通过委托。 **方法一:通过属性实现** 在.NET中,窗体可以被定义为类,因此我们可以为这些类添加自定义的属性来存储和共享数据。以下是一种简单的实现方式: ...

    查看VB的OCX的属性和方法

    了解并熟练掌握如何查看OCX的属性和方法对于VB编程至关重要。 首先,我们要明白什么是OCX控件。OCX控件是ActiveX控件的一种,它是基于OLE技术的,可以在Windows环境中创建和共享自定义用户界面元素。这些控件可以是...

    Event 对象的使用方法

    Event对象在Web开发中扮演着至关重要...理解并熟练使用这些属性和方法,可以让你创建更加交互性和响应性的Web应用。通过监听和响应各种事件,开发者可以创建丰富的用户体验,包括动态更新、用户验证和自定义交互效果。

    mouse_event事件

    本文将深入探讨`mouse_event`事件的用法,并通过一系列示例来帮助读者更好地理解和应用这些事件。 #### 一、基本概念 `mouse_event`事件是一组由鼠标触发的事件,包括但不限于鼠标移动(`MOUSE_MOVE`)、鼠标悬停(`...

    JS event使用方法详解

    在事件处理函数中,event 对象作为参数被自动传递给函数,或者可以通过window.event属性访问。 在页面中,我们可以为各种事件绑定处理函数,例如,使用onclick事件处理用户点击,使用onmouseover和onmouseout事件...

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

    JavaScript 事件对象总结 事件对象概述 ...事件对象是一种特殊的对象,它包含...事件对象是JavaScript编程中非常重要的一部分,掌握事件对象的使用和属性,可以帮助开发者更好地处理用户交互事件,提高网页的用户体验。

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

    4. `clientX`和`clientY`属性: 这两个属性分别返回鼠标在浏览器视口(不包括滚动条)内的水平和垂直坐标。它们是只读属性,用于获取鼠标位置,但不能用于改变鼠标位置。 5. `ctrlKey`属性: 类似于`altKey`,`...

    利用事件冒泡(Event Bubbling )获取鼠标下的元素属性

    3. **阻止不必要的事件处理**:有时我们只想让事件在特定的元素上处理,不希望它冒泡到父元素,这时可以使用`event.stopPropagation()`方法阻止事件冒泡。 4. **获取事件源**:通过`event.target`属性,我们可以...

    JS操作DOM元素属性和方法大全

    **JS操作DOM元素属性和方法大全** 在JavaScript中,DOM(Document Object Model)是一种标准,用于表示HTML或XML文档的结构,并提供了与这些文档交互的方法。DOM是浏览器提供的一种接口,使得JavaScript能够读取、...

    《javascript》——event对象与事件

    Event 对象的属性和方法可以帮助开发者更好地处理用户的交互行为,从而创建更加交互的网页应用。 Event 对象的重要属性包括: * clientX 和 clientY:返回事件发生时鼠标指针的水平和垂直坐标。 * keyCode:获取...

    javascript中event详解

    ### JavaScript中的Event详解 #### 一、Event概念与特性 在JavaScript中,`event`对象是浏览器提供的一个标准对象,用于表示用户与...熟练掌握这些属性和方法,可以帮助开发者更好地控制用户与网页之间的交互行为。

    XMLHTTPRequest的属性和方法简介

    XMLHttpRequest(XHR)是JavaScript中一个非常重要的对象,...总的来说,XMLHttpRequest提供了丰富的属性和方法,使我们能够构建功能强大的AJAX应用,实现网页的无刷新交互。理解和掌握这些知识对于前端开发至关重要。

    window对象--event对象详解

    Window对象的主要属性和方法包括: 1. `window.location`:表示当前页面的URL,可以用来导航到其他页面。 2. `window.document`:提供对整个HTML文档的访问,可以用来操作DOM元素。 3. `window.history`:允许用户在...

    window.event 对象详解

    需要注意的是,随着ES6和现代浏览器的发展,推荐使用`addEventListener`方法来添加事件监听器,因为它可以提供更好的控制和更一致的行为。在这种情况下,`event`对象将作为事件处理函数的第一个参数传入: ```...

Global site tag (gtag.js) - Google Analytics