劫持事件对象
by 司徒正美
at 2012-09-08 15:40:00
original http://www.cnblogs.com/rubylouvre/archive/2012/09/08/2664480.html
在JS框架，事件系统的回调那个事件对象一般不是真正的事件对象。因为为了兼容IE，我们要为了它加上许多W3C属性，即使在标准浏览器下，也有许多事件也仿造出来，比如FF下的DOMMouseScroll要变mousewheel， chrome下的mouseover要变mouseenter……有太多东西要兼容了，
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,body{
height:100%;
background:green;
}
</style>
<script>
window.onload = function(){
Event.prototype.xxx = "自定义属性1"
document.addEventListener("click", function(e){
console.log(e);
console.log(e.xxx);
console.log(e.yyy)
console.log(e.zzz)
});
var event = document.createEvent("MouseEvent");
event.initEvent("click", true, true,"xxx");
event.yyy = "自定义属性2"
Object.defineProperty(event,"zzz", {
value:"自定义属性3",
writable:true,
configurable:true
});
document.body.dispatchEvent(event)
}
</script>
</head>
<body>
</body>
</html>
经测试只要是支持addEventListener的浏览器都能绑上这三个属性。
我们甚至可以通过事件描述符修改事件类型
Object.defineProperty(event,"type", {
value:"自定义属性4",
writable:true,
configurable:true
});