在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 });