zoukankan      html  css  js  c++  java
  • 劫持事件对象

    在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
                    });
    
  • 相关阅读:
    八款前端开发人员更轻松的实用在线工具
    HTML5中的Web Notification桌面通知(右下角提示)
    老司机程序员用到的各种网站整理
    JAVA变量存储
    关于JAVA中的前期绑定 后期绑定(动态绑定)
    i MySQL 查看约束,添加约束,删除约束
    final static
    MySQL alter语句
    MySQL 权限生效
    MySQL 用户权限管理
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2664480.html
Copyright © 2011-2022 走看看