Ruby's Louvre

每天学习一点点算法

导航

劫持事件对象

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

posted on 2012-09-08 15:40  司徒正美  阅读(1565)  评论(0)  编辑  收藏  举报