西西软件园多重安全检测下载网站、值得信赖的软件下载站!
软件
软件
文章
搜索

首页编程开发javascript|JQuery → JavaScript Event学习第七章:事件属性

JavaScript Event学习第七章:事件属性

相关软件相关文章发表评论 来源:本站原创时间:2010/2/19 11:15:46字体大小:A-A+

作者:不详点击:221次评论:0次标签: Event

  • 类型:加壳脱壳大小:126KB语言:中文 评分:3.5
  • 标签:
立即下载

为了理解Event属性,我将在这里给出一些示例代码。在这个范畴内有非常严重的浏览器兼容性问题。

当我们想去读一读关于Event的一些资料时,常常会湮没在大量的属性里面,这些属性其中的大多数不能良好的运行在大多数的浏览器。这里有event的兼容性列表。

我不打算给这些属性列个表,因为那些情况实在是太让人晕头了,而且对你的学习也不会有一点点的帮助。在写5段代码前我先要问关于浏览器的5个问题。

1、event的类型(type)是什么?
2、哪一个HTML元素是event的目标呢?
3、哪些键在event发生时被按下了?
4、哪个鼠标键在Event发生时被按下了?
5、在Event发生时鼠标的位置在哪?

最后一个问题我在这里做了非常详尽的解答。

请注意这些代码我做了非常严谨的对象检查。我首先创建跨浏览器的的对事件的访问,然后在使用每一个属性前都做了浏览器支持性的检查。

1、event的类型(type)是什么?
这是一个跨浏览器的有标准答案的问题:使用type属性就可以查看其属性:

1 function doSomething(e) {<BR>    if (!e) var e = window.event;<BR>    alert(e.type);<BR>}<BR><BR>

2、哪一个HTML元素是event的目标呢?
W3C/Netscape说:target。不对,微软说,是srcElement。这两个属性都返回event发生时的HTML元素。

1 function doSomething(e) {<BR>    var targ;<BR>    if (!e) var e = window.event;<BR>    if (e.target) targ = e.target;<BR>    else if (e.srcElement) targ = e.srcElement;<BR>    if (targ.nodeType == 3) // defeat Safari bug<BR>        targ = targ.parentNode;<BR>}<BR><BR>

最后两行的代码专门针对Safari的。如果event发生在一个包含文本(text)的元素上,这个文本节点(text node)而不是元素本身就成为了event的目标。因此我们要检查如果目标的nodetype是3(文本节点)。如果是我们就把它移动到父节点上,HTML元素。

即使event被捕获或者冒泡了(bubbles up),target/srcElement属性也依然是最早发生event的元素。

其他的target
还有很多targeting的属性。我在Event Order这篇文章里讨论了currentTarget,在Mouse event这篇文章里讨论了relatedTarget,fromElement和toElement。

3、哪些键在event发生时被按下了?
这个问题相对简单一些。首先从keyCode属性得到该键的代码(a=65)。当你得到了键值以后,你可以通过String.fromCharCode()方法知道实际的键值,如果必要的话。

1 function doSomething(e) {<BR>    var code;<BR>    if (!e) var e = window.event;<BR>    if (e.keyCode) code = e.keyCode;<BR>    else if (e.which) code = e.which;<BR>    var character = String.fromCharCode(code);<BR>    alert('Character was ' + character);<BR>}<BR>

这里有一些地方可能会造成键盘事件比较难用。比如,kepress事件触发的时间和使用者按下键的时间一样长。然而,大多数浏览器里面keydown的触发时间也和按下的时间一样长。我不确定这是不是一个好的想法,但是就是那样的。

4、哪个鼠标键在Event发生时被按下了?
这里有两个属性可以知道哪个鼠标键被按下了:which和button。请注意这些属性通常不一定在click上起作用。为了保险的探测哪个鼠标键被按下,你最好使用mousedown和mouseup事件。

which是一个古老的Netscape属性。鼠标左键的值是1,中键(滚轮)的值是2,右键的值是3。除了支持上比较薄弱以外没有什么问题,事实上也经常用来检测鼠标按键。

现在button属性能被很好的识别。W3C的标准值如下:

左键 0
中键 1
右键 2
微软的标准值如下:

左键 1
中键 4
右键 2
毫无疑问的微软的标准比W3C的好。0可以表示没有键按下,其他都是不合理的。

另外,只有在微软的模型中按键的值是可以合并使用的,比如5就代表“左键和中键”一起按下。不仅IE6不支持合并,w3c的的模型在理论上也是不能完成的:你永远也不知道左键是不是被按下了。

所以在我看来w3c在定义button上有严重的失误。

右击
幸运的是,通常你想知道右键是否被点击。因为W3C和微软恰好在这个问题上给button的定义值是2,所以你依然可以检测右击。

1 function doSomething(e) {<BR>    var rightclick;<BR>    if (!e) var e = window.event;<BR>    if (e.which) rightclick = (e.which == 3);<BR>    else if (e.button) rightclick = (e.button == 2);<BR>    alert('Rightclick: ' + rightclick); // true or false<BR>}<BR>

需要注意的是,Macs通常只有一个键,Mozilla给Ctrl-Click的button的值定义为2,所以Ctrl-Click也会打开菜单。ICab 还不支持鼠标button属性,所以你在Opera里面还不能检测右击。

5、在Event发生时鼠标的位置在哪?
鼠标位置这个问题相当的严峻。虽然有不少于6对鼠标坐标的属性,但是仍然没有一个可靠的跨浏览器的方法能找到鼠标的坐标。
下面是这6组坐标:
1、clientX,clientY
2、layerX,layerY
3、offsetX,offsetY
4、pageX,pageY
5、screenX,screenY
6、x,y
我曾经在这里解释过pageX/Y和clientX/Y的问题。

screenX和screenY是唯一一对跨浏览器兼容的属性。他们给出鼠标在整个电脑屏幕上的坐标。不幸的是,仅仅这个信息是远远不够的:你永远也不需要知道鼠标在屏幕的位置--好吧,或者你想在当前的鼠标位置放置一个新的窗口。

其他的三对属性也不重要,看这里的描述。

正确的代码
下面的代码能够正确的检测鼠标的坐标

1 function doSomething(e) {<BR>    var posx = 0;<BR>    var posy = 0;<BR>    if (!e) var e = window.event;<BR>    if (e.pageX || e.pageY)     {<BR>        posx = e.pageX;<BR>        posy = e.pageY;<BR>    }<BR>    else if (e.clientX || e.clientY)     {<BR>        posx = e.clientX + document.body.scrollLeft<BR>            + document.documentElement.scrollLeft;<BR>        posy = e.clientY + document.body.scrollTop<BR>            + document.documentElement.scrollTop;<BR>    }<BR>    // posx and posy contain the mouse position relative to the document<BR>    // Do something with this information<BR>}<BR>

    易语言
    (22)易语言
    易语言开发的软件虽然经常会被一些安全软件误报为病毒,但是易语言确实是一门可学很好的编程语言,因为是全中文全可视跨平台编程语言,全中文支持,无需跨越英语门槛。全可视化编程,支持所见即所得程序界面设计和程序流程编码。因此易语言也可以理解为简易的语言,跟语言语言等以英文为基础的国外语言开发平台,易语言学习起来更简单了。西西本次提供了易语言.完美破解版,十天学会易语言图解教程教程易语言零起点教程易语言个皮肤...更多>>

    相关评论

    阅读本文后您有什么感想? 已有人给出评价!

    • 8 喜欢喜欢
    • 3 顶
    • 1 难过难过
    • 5 囧
    • 3 围观围观
    • 2 无聊无聊

    热门评论

    最新评论

    发表评论 查看所有评论(0)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    字数: 0/500 (您的评论需要经过审核才能显示)