e = e || window.event是我们在做事件处理时候区分IE和其他浏览器事件对象时常用的写法。但是这行兼容性代码有没有必要出现在所有的事件句柄中呢？标准事件调用方式需要这行代码吗？下边我们做详细讨论。

　　在讨论之前，如果有些忘记或者不熟悉事件对象的先参考其他资料，或者看看这个连接的资料http://wenku.baidu.com/view/400a89f4f61fb7360b4c65ca.html

这里作者把四种主要的事件调用方式总结了出来，本文的讨论也是在此之上延伸说明。

  1. <!DOCTYPE HTML>
    <html>
    <head>
        <title></title>
        <style type="text/css">
        #aa{ border:1px solid #000; width:100px; height:40px; margin-top:50px;}
        #bb{ border:1px solid #000; width:500px; height:40px; margin-top:50px;}
        #cc{ border:1px solid #000; width:500px; height:40px;}
        </style>
    </head>
    <body>
        <div id="aa"></div>
        <div id="bb">dfdfddfsd</div>
        <div id="cc">gregreger</div>
  2.  
  3.     <script type="text/javascript">
  4.  
  5.         document.getElementById("aa").onclick = function (e) {
                if (e) alert(e.toString()); // IE6/7/8 e为undefined  IE9中e为W3标准事件对象。
                //e = window.event;
                alert(e.srcElement.tagName || e.currentTarget.tagName);
            }
            /*  element.onXXX方式（比较古老，不推荐使用）
  6.  
  7.         这种方式添加事件IE6/7/8只支持window.event不支持参数传入，
            Firefox只支持参数传入不支持其它方式。
            IE9/Opera/Safari/Chrome 两种方式都支持。
            */
  8.  
  9.         var d4 = document.getElementById('bb');
            function clk(e) {
                alert(e);  // 所有浏览器弹出的信息框显示都是事件对象。
                alert(e.srcElement.tagName || e.currentTarget.tagName);
                e = e || window.event;
                alert(e);  // IE6/7/8中和上个e弹出相同的对象。
            } 
            if (d4.addEventListener) {
                d4.addEventListener('click', clk, false);
                alert("addEventListener");
            }
            if (d4.attachEvent) {
                d4.attachEvent('onclick', clk);
                alert("attachEvent");
            }
            /*  addEventListener、attachEvent方式（推荐使用）
  10.  
  11.         结论：
            通常事件句柄里有这句话：e = e || window.event;
            但是在这种调用方式（addEventListener、attachEvent方式）中没什么作用，
            这是什么原因呢？上边参考文章的总结里指出了原因，即：
            “IE6/7/8支持通过window.event获取对象，
            通过attachEvent方式添加事件时也支持事件对象作为句柄第一个参数传入”
            因为IE6/7/8在attachEvent方式添加事件时同时支持两种方式，所以事件句柄中的参数e在
            IE6/7/8中会自动转换为window.event。
            这么以来，这句e = e || window.event;在此处就不需要了（个人结论）。
  12.  
  13.         */
  14.  
  15.         /*  
            在编写跨浏览器的函数库时，IE和标准事件对象的属性的差异的问题需要解决。
            下边抽出相关代码，讨论这个问题在这里的体现。
            */
            var _E = {
                BindEvent: function (object, fun) {
                    if (arguments.length == 1) {
                        fun = arguments[0];
                        object = null;
                    }
                    var args = Array.prototype.slice.call(arguments, 2);
                    return function (event) {
                        return fun.apply(object, [fixEvent(event)].concat(args));
                    }
                }
            };
            function fixEvent(event) {  // 统一不同浏览器的event对象
                if (event) return event;  
                event = window.event;
                event.pageX = event.clientX + getScrollLeft(event.srcElement);
                event.pageY = event.clientY + getScrollTop(event.srcElement);
                event.target = event.srcElement;
                event.stopPropagation = stopPropagation;
                event.preventDefault = preventDefault;
                var relatedTarget = {
                    "mouseout": event.toElement, "mouseover": event.fromElement
                }[event.type];
                if (relatedTarget) { event.relatedTarget = relatedTarget; }
  16.  
  17.             return event;
            };
            function stopPropagation() { this.cancelBubble = true; };
            function preventDefault() { this.returnValue = false; };
  18.  
  19.         // 测试代码如下
            function get(ev) {
                alert(ev.pageX);
            }
            var cc = document.getElementById("cc");
            var clickHandler = _E.BindEvent(get);
            cc.attachEvent('onclick', clickHandler);  // IE6/7/8下测试
            /*
            结果点击id为cc的div元素后，弹出undefined。说明ev.pageX根本不存在。
            可是我们在fixEvent()里已经做了事件对象的统一工作。
            调试会发现：fixEvent()里if (event) return event;这句是执行后就直接return了，
            这里的event按照道理说应该是undefined，但是事实并不是。
  20.  
  21.         //
            至于原因个人觉得就是这里：因为IE6/7/8在attachEvent方式添加事件时同时支持两种方式，
            所以事件句柄中的参数会自动转换为window.event。也就是说参数不是undefined
  22.  
  23.         //
            所以在这里用if (event) return event;判断事件对象不妥。
            （说明：fixEvent()这段代码参考自博客园里cloudgamer的函数库，
             他里边就是这种写法，个人觉得有错误，希望有兴趣的朋友也做做验证）
            */
  24.  
  25.     </script>
    </body>
    </html>

window.event的更多相关文章

  1. JS控制键盘录入 和 window.event.keycode对照

    一.只允许录入整数 1.不允许录入非数字(按下字母键就会提示并清空) function intOnly() { if (!(window.event.keyCode >= 48 &&am ...

  2. window.event.srcElement与window.event.target 触发事件的元素

    IE浏览器支持window.event.srcElement , 而firefox支持window.event.target:<input type="text" onblu ...

  3. 解决webkit浏览器中js方法中使用window.event提示未定义的问题

    这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...

  4. window.event对象详尽解析

    event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromEleme ...

  5. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  6. 火狐和IE的window.event对象详解(转载)

    FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的. 但它主要检查FF方面的错误,对IE就无能为力了. 要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0恐怕也用不 ...

  7. js事件源window.event.srcElement兼容性写法

    <html> <body> <p>一个好处就是 我想让body(或其他元素内)的某些对象响应事件 就不用挨个儿去写 只要在外层上写一个 然后检查event.srcE ...

  8. Event/window.Event属性和方法

    type:事件的类型,如onlick中的click:srcElement/target:事件源,就是发生事件的元素:button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下 ...

  9. 如何解决firefox下window.event的问题

    一.在函数中传递event参数 在函数中传递event参数,这样我们就可以兼容IE和FF的event的获取了,如下面的函数: function _test(evt){    var src = evt ...

随机推荐

  1. OpenSceneGraph学习笔记

    VirtualPlanetBuilder编译方法 转自:http://www.boyunjian.com/do/article/snapshot.do?uid=7327932418831703800 ...

  2. Express 路由

    路由 路由是指如何定义应用的端点(URIs)以及如何响应客户端的请求. 路由是由一个 URI.HTTP 请求(GET.POST等)和若干个句柄组成,它的结构如下: app.METHOD(path, [ ...

  3. java工程展示问题

    当java工程这样展示时,需要选择window---->Open Perspective----->java改变java工程的展示方式

  4. Spring中depends-on的作用是什么？

    spring的IOC容器负责bean的管理,当实例化一个bean是,spring保证该Bean所依赖的其他bean已经初始化.一般情况下,用<ref>元素建立对其他bean的依赖关系. 比 ...

  5. 李洪强漫谈iOS开发[C语言-046]-统计输入字符个数

  6. sbt assembly build.sbt content

    // import sbt._ // import sbt.Keys._ // import java.io.File // import AssemblyKeys._ name := "n ...

  7. linux笔记二-----目录及文件命令

    一:目录及文件操作 1.file:识别文件类型 如果是文本文件,会显示ASCII: 如果是执行会显示shell script: 如果链接文件显示链接执行文件等信息 2.touch:改变文件或目录时间. ...

  8. CentOs5.8下安装Oracle12C

    12C安装向导: http://docs.oracle.com/database/121/LTDQI/toc.htm 12C下载地址: http://www.oracle.com/technetwor ...

  9. Log4J简单使用

    一.一般会将commons-logging和Log4j一起使用   原因:1.commons-logging功能较弱 2.log4j功能强大. 所需jar:       log4j-1.2.16.ja ...

  10. CCF认证(1)

    #include <iostream> #include <windows.h> using namespace std; typedef struct letter{ int ...