关于javascript中的事件学习及总结

1关于事件对象
ie:事件对象是window对象的一个属性event
dom：event对象是作为唯一参数传递给事件处理函数。arguments[0]

2关于IE与DOM事件兼容性的总结(参考javascript高级程序设计)
DOM属性/方法 IE属性/方法
altKey altKey
bubbles -
button button
cancelBubble cancelBubble
charCode keyCode
clientX clientX
clientY clientY
ctrlKey ctrlKey
currentTarget -
detail -
eventPhase -
isChar -
keyCode keyCode
metaKey -
pageX clientX+document.body.scrollLeft
pageY clientY+document.body.scrollTop
preventDefault() returnValue = false
relateTarget fromElement/toElement
screenX screenX
screenY screenY
shiftKey shiftKey
stopPropagation() cancelBubble = true
target srcElement
timeStamp -
type type
具体的属性和方法意思我就不写清楚了，有不太明白的可以baidu、google一下~

3关于跨平台事件（针对第二点各个属性在ie和ff下的不同）
在这里javascript高级程序设计一书总结了一个容器对象，可以方便的解决事件兼容性问题。
具体如下：
EventUtil

4里面会用到判断浏览器是什么牌子的另一个脚本（detect.js）
具体代码如下：
detect.js

4相关测试代码。
test

5在自己测试中遇到的两个问题。
1用addEventLisenter(dom)/attachEvent(ie)时如果针对的事件触发对象是window，
事件函数必须写为声明式的像这样function foo(){}
//错误的写法(变量式)ie会报语法错误
<script> 
window.attachEvent("onload",foo);
   var foo = function()
   {
   alert("loaded");
   };
</script>
//正确的写法（声明式）
<script>
window.attachEvent("onload",foo);
  function foo()
   {
   alert("loaded");
   };
</script>

其他的页面元素则两者皆可。

问题二：关于同一对象连续使用attachEvent执行顺序的问题
猜猜会先执行那一个alert?

<html>
<head>
<script>
    var app = function()
    {
        var obj = document.getElementById("mypp");
        obj.attachEvent("onclick",foo1);
        obj.attachEvent("onclick",foo2);
    }

        var foo1 = function()
        {
        alert("clicked!");
        };
        var foo2 = function()
        {
        alert("also clicked!");
        };
    </script>
</head>    
 <body onload="app()">
        <p id="mypp">test</p>
    </body>
</html>

答案是上面的代码会先执行第二个alert。
如果你觉得你的思维是正确的那么再看看下面的代码：

test2

一段关于此的英文解释：
When   event   fires   on   the   object,   the   object's   event   handler   is   called   before   pDisp,   the   specified   function.   If   you   attach   multiple   functions   to   the   same   event   on   the   same   object,   the   functions   are   called   in   random   order,   immediately   after   the   object's   event   handler   is   called.
引用网上一位高人说的：
并不是什么随机问题，你可以去研究研究哈希对象，这种对象插入新元素的时候并不是顺序插入的，而是根据计算所得的hash值而定的，但在取用这些对象的时间是按照一定的顺序取的，所以就会出现你这种所谓的乱序问题。我估计DHTML里的这些对象的事件处理函数存放及JS对象都是一个个哈希对象，都是key-value这种键值对的模式。

所以在使用上还是要慎重的，最好不要做依赖于顺序的设计。


posted @ 2008-04-09 13:05  早班火车  阅读(883)  评论(0)  编辑  收藏  举报