e = e || window.event的区别及用法。

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">
            /*JS的event.srcElement与event.target(触发事件对象)
                IE下,event对象有srcElement属性,但是没有target属性;
                Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:
                firefox 下的 event.target = IE 下的 event.srcElement
                解决方法:使用obj = event.srcElement ? event.srcElement : event.target;
                或:var evtTarget = event.target || event.srcElement;
            */

            //event.srcElement:表示的当前的这个事件源。
            //
            //event.srcElement.parentNode:表示当前事件源的父节点。
            //
            // parentNode:父节点,也就是上一层的节点。可以是任何一个标签。
            //
            //event.srcElement.firstChild:当前事件的第一个节点,如果节点是input,通过event.srcElement.firstChild.value就可以获取此input的值。
            //
            //event.srcElement.parentElement:是指在鼠标所在对象的上一个对象。
            //
            //event.srcElement.children:当前节点下对象的个数,有多个的话就是个数组,如当前节点下有2个input的对象,要获取这两个可以用event.srcElement.children[0] 与 event.srcElement.children[1]分别获取。
            //            

            document.getElementById("aa").onclick = function(e) {
                if(e) console.log(e.toString()); // IE6/7/8 e为undefined  IE9中e为W3标准事件对象。
                //e = window.event;
                console.log(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弹出相同的对象。
            };
            
            //addEventListener() 用于向指定元素添加事件。 
            //            参数说明:tr件,比如 click mouseenter mouseleave 
            //fn 回调函数 
            //useCaption 用于描述是冒泡还是捕获。默认值是false,即冒泡传递。 
            //当值为true,就是捕获传递。 
            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>

猜你喜欢

转载自blog.csdn.net/qq_41348029/article/details/81288481
E
e'e
e4e