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