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. iOS 项目中用到的一些开源库和第三方组件

    iOS 项目中用到的一些 iOS 开源库和第三方组件 分享一下我目前所在公司 iOS 项目中用到的一些 iOS 开源库和第三方组件, 感谢开源, 减少了我们的劳动力, 节约了我们大量的时间, 让我们有 ...

  2. OSG模型简单控制

    OSG模型简单控制 转自:http://milkcu.sintune.net/blog/archives/1392673560.html 结点基本操作 添加结点 OSG中使用osg::Node和osg ...

  3. nodeJS代码实现计算交社保是否合适

    本文通过nodejs的一个具体示例来对比分析现阶段我们交社保合不合适, 主要是对nodejs的一个小的应用,当然大家也可以改成其他语言的,程序猿们,来算算吧. 按一个普通程序员8000的月收入算就是1 ...

  4. 常见MVC框架比较

    常见MVC框架比较 运行性能上: Jsp+servlet>struts1>spring mvc>struts2+freemarker>>struts2,ognl,值栈. ...

  5. java eclipse中的代码联动提示功能

    eclipse中的代码联动提示设置:window--->preferences--->java--->editor----> content assist的auto activ ...

  6. CSS3两个动画顺序衔接播放

    问题描述: 第一个动画先播放,播放完成后,第二个动画紧接着播放. 解决办法: 1. 将第二个的延迟时间(animation-delay) 设置成第一个的持续时间( animation-duration ...

  7. python--range()函数

    1: >>> range(10, 0, -1) [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] >>> range(10) [0, 1, 2, 3, ...

  8. Log4cplus使用

    Log4cplus使用¶ 1.1 简介 log4cplus是C++编写的开源日志系统,前身是java编写的log4j日志系统.log4cplus具有线程安全.灵活.以及多粒度控制的特点,通过将信息划分 ...

  9. Odoo attrs X2many 类型的过滤

    有童鞋在群里问到 attrs 中的 many2many类型的字段该如何进行domain过滤,其实非常简单: Many2many的字段在js中获取的值的格式为[[6,false,[]]] 所以attrs ...

  10. C++重载operator的示例

    #include<iostream>#include<vector>using namespace std; class test{public:     int v;   / ...