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

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

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

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

    <script type="text/javascript">

        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方式（比较古老，不推荐使用）

        这种方式添加事件IE6/7/8只支持window.event不支持参数传入，
        Firefox只支持参数传入不支持其它方式。
        IE9/Opera/Safari/Chrome 两种方式都支持。
        */

        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方式（推荐使用）

        结论：
        通常事件句柄里有这句话：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;在此处就不需要了（个人结论）。

        */

        /*  
        在编写跨浏览器的函数库时，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; }

            return event;
        };
        function stopPropagation() { this.cancelBubble = true; };
        function preventDefault() { this.returnValue = false; };

        // 测试代码如下
        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，但是事实并不是。

        //
        至于原因个人觉得就是这里：因为IE6/7/8在attachEvent方式添加事件时同时支持两种方式，
        所以事件句柄中的参数会自动转换为window.event。也就是说参数不是undefined

        //
        所以在这里用if (event) return event;判断事件对象不妥。
        （说明：fixEvent()这段代码参考自博客园里cloudgamer的函数库，
         他里边就是这种写法，个人觉得有错误，希望有兴趣的朋友也做做验证）
        */

    </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. js-小效果-无缝滚动

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. web.xml的一份配置(备忘)

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java ...

  3. JCreator的配置

    1.在Configure(配置)菜单上选择Options(选项),将弹出对话框. 2.在Option对话框中选择左侧JDK Profile,选择右侧JDK version 1.x.x.. ,点击Edi ...

  4. thinkphp框架验证码验证一次

    做异步验证验证码,只要验证一次结果正确,拿相同的值再次来对比,返回结果就不正确.我看到论坛中有人说,tp框架只要验证过一次正确后验证码就销毁了.确实是这个效果,但具体的还没深入了解

  5. android studio学习之一

    一:ADT和sdk的区别 ADT(Android Development Tools): 目前Android开发所用的开发工具是Eclipse,在Eclipse编译IDE环境中,安装ADT,为Andr ...

  6. .net下Ueditor配置(主要讲解上传功能配置)

    Ueditor上传功能配置——.net 今天项目中用到Ueditor就自己配置了下,但上传功能和图片显示功能不能正确使用,就自己琢磨了下.已实现上传功能,并能显示正确的图片和文件,在线编辑功能也能使用 ...

  7. mysql添加外键错误

    异常信息如下: ERROR <HY000>:Can't create table '.\itac\#sql-6fc_546f.frm' <errno:121> 我的问题是新建的 ...

  8. Android课程---Android Studio的一些小技巧

    APK瘦身 在Android Studio中我们可以开启混淆,和自动删除没有Resources文件,来达到给APP瘦身的目的,这对于一些维护很久的老项目比较有用,里面有很多无效的Resource, 删 ...

  9. PHP文件操作系统----主要的文件操作函数

    一.文件操作系统概述 1.概述: php中的文件操作系统主要是对文件和目录的操作.文件在windows系统下分为3种不同:文件.目录.未知,在linux/unix系统下分为7种不同:block.cha ...

  10. [Virtualization][qemu][kvm][virtio] 使用 QEMU/KVM 模拟网卡多队列

    序: 做DPDK例子的时候,发现一些例子需要多队列,而我当前所使用的虚拟机并不是多队列的.关于我当前虚拟机的状态,可以见前文. 所以,我的需求就是,让虚拟机里的网卡,有多队列! 参考: http:// ...