JS的event对象--知识点总结

标签: js event 对象 | 发表时间:2013-05-17 17:38 | 作者:a564663276
出处:http://blog.csdn.net

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

需要注意的是:event对象只在事件发生的过程中才有效。

event的某些属性只对特定的事件有意义。

比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。


Event属性和方法: 


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

描述: 返回事件名

语法: event.type

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


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

下面的例子检查鼠标是否在链接上单击,并且,如果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()"> 


3. button:声明被按下的鼠标键,整数, 如果按下多个键,就把这些值加起来,所以3就代表左右键同时按下;

(firefox中 0代表左键,1代表中间键,2代表右键) 

描述: 检查按下的鼠标键。

语法: event.button

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

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


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

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

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

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

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

...

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



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

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

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

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

语法: 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> 



描述 :检测 onmouseover 和 onmouseout 事件发生时,鼠标所离开的元素。

语法: event.fromElement

注释: 这是个只读属性。




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

(e.cancelBubble = true; 相当于 e.stopPropagation();) 

描述: 检测是否接受上层元素的事件的控制。

语法: 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">


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

(e.returnValue = false; 相当于 e.preventDefault();) 

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

语法: event.returnvalue[ = Boolean]

可能的值: true 事件中的值被返回             false 源对象上事件的默认操作被取消 例子见本文的开头。


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

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

14  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> 

一些说明: 

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即可。

作者:a564663276 发表于2013-5-17 17:38:01 原文链接
阅读:0 评论:0 查看评论

相关 [js event 对象] 推荐:

JS的event对象--知识点总结

- - CSDN博客推荐文章
Event描述:event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等. 需要注意的是:event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义. 比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义.

js对象深拷贝

- - ITeye博客
在做一个前台页面你的时候用到了一个自己写的List对象,在进行深拷贝的时候参考了网上的代码:. //对象扩展,tObj被扩展对象,sObj扩展对象. Object.extend(a,b);//a获得了b的所有属性. 我自己定义的list中没有定义constructor,所以执行sObj.constructor == Array会报错,我就修改为:.

什么是 Event Loop?

- - 阮一峰的网络日志
Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制. JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题. Aaron Cois的 《Understanding The Node.js Event Loop》,解释什么是Event Loop,以及它与JavaScript语言的单线程模型有何关系.

js字符串转换为Json对象的三种写法

- - JavaScript - Web前端 - ITeye博客
在进行web前端开发时,经常会遇到将js字符串转换成Json对象的情况,这种转换有三种写法:. 1.使用eval()来进行解析(最原始的写法,但却很有效). 这种写法适合从数据库取出json字符串,然后需要进行转换为json对象的方式. 2.使用new function()的方式.  3.使用JSON的转换方法.

80%人都理解错误的 Event Loop

- - IT瘾-dev
本文的目的在于,一次性推翻80%人构建好的关于Event Loop的知识体系和一次性的完整的理解Nodejs(13以上)和浏览器中的Event Loop. 首先进行一下基础概念的划分. mouseover(之类的事件). Web API大部分异步返回方法(XHR,fetch). 逗知识:其实setTimeout和setInterval也属于Web API.

JS获取当前对象大小以及屏幕分辨率等

- - JavaScript - Web前端 - ITeye博客
JS获取当前对象大小以及屏幕分辨率等. s += " 网页可见区域宽:"+ document.body.clientWidth+"\n";. s += " 网页可见区域高:"+ document.body.clientHeight+"\n";. s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"\n";.

JavaScript 运行机制详解:再谈Event Loop

- - 阮一峰的网络日志
一年前,我写了一篇 《什么是 Event Loop. 》,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts的演讲 《Help, I'm stuck in an event-loop》. 这才尴尬地发现,自己的理解是错的. 我决定重写这个题目,详细、完整、正确地描述JavaScript引擎的内部运行机制.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.