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. Windows环境下的NodeJS+NPM+Bower安装配置步骤

    Windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL”按钮 ...

  2. 在DataGridView控件中加入ComboBox下拉列表框的实现

    在DataGridView控件中加入ComboBox下拉列表框的实现 转自:http://www.cnblogs.com/luqingfei/archive/2007/03/28/691372.htm ...

  3. winform窗体最大化、最小化、还原

    //最大化 private void button_maxsize_Click(object sender, EventArgs e)        {            this.WindowS ...

  4. Spring MVC和Struts2的比较(二)

    1.Spring MVC的controller+command object模式比Struts2的Action模式更安全一些.而在Struts2中,自动数据绑定发生在Action对象上.这样,在Act ...

  5. 内置函数----整理、例题 、xmin

    -----------数值函数 ---绝对值 select abs(-123) from dual; --求模 select mod (12,5) from dual; --取整 --上限值 sele ...

  6. Hive_DDL与DML

    DDL(数据定义语言) create.drop.alter.truncate.show.describe DML(数据控制语言) load.insert.update.delete.import/ex ...

  7. Android课程---Android Studio使用小技巧：提取方法代码片段

    这篇文章主要介绍了Android Studio使用小技巧:提取方法代码片段,本文分享了一个快速复制粘贴方法代码片段的小技巧,并用GIF图演示,需要的朋友可以参考下 今天来给大家介绍一个非常有用的Stu ...

  8. IOS第二天多线程-03对列组合并图片

    ********* // 2D绘图 Quartz2D // 合并图片 -- 水印 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *) ...

  9. Trie树

    一.什么是trie树 1.Trie树 (特例结构树)   Trie树,又称单词查找树.字典树,是一种树形结构,是一种哈希树的变种,是一种用于快速检索的多叉树结构.典型应用是用于统计和排序大量的字符串( ...

  10. Java与C++面向对象不同点

    首先面向对象的语言有哪些?JAVA.C++.C#等等.但是呢很多人认为C#和C++有关系,其实一点关系都是没有滴.C#是仿Java做的,很多人都说是假Java,因为C#和Java太像了比如C#也有st ...