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

        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>

转载于:https://www.cnblogs.com/zzc134680/p/5741843.html

window.event相关推荐

JS中window.event事件使用详解
一.描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如:from ...
if(window.event) e = window.event
浏览器事件对象兼容 function func(e){ if(window.event){ e = window.event; } } 浏览器中的事件都是以对象的形式存在的,IE浏览器与标准DOM浏览 ...
window.event.srcElement
<input type=button value=ok οnclick="mm()"> <s cript LANGUAGE="Javas cript&q ...
冇内容管理系统分析-[JS]详尽解析window.event对象
描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromEl ...
event 和 window.event
event 和 window.event 出处:http://hi.baidu.com/zzcc_8/blog/item/1c6e7a8f560765f3503d9200.html < html ...
javascript中window.event事件用法详解
前两天写程序时因为要用到javascript中的window.event事件,于是就在网上搜了一下,终于找到一篇不错的文章,来与大家分享下: 描述 event代表事件的状态,例如触发event对 ...
window.event.returnValue=false
window.event.returnValue=false放到提交表单中的onclick事件中则不会提交表单,如果放到超链接中则不执行超链接
详尽解析window.event对象
描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromEl ...
JavaScript:window.event.srcElement（指触发事件的对象）
event对象指当前触发的事件对象, window.event.srcElement是指触发事件的对象. srcelement 是事件初始目标的html元素对象引用,因为事件通过元素容器层次冒泡,可以 ...

window.event

window.event相关推荐

最新文章

热门文章