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
                    });
    
  • 相关阅读:
    Ruby
    WebGL的第二个小程序
    wegGL的第一个小程序
    Node.js介绍
    接口隔离原则(Interface Sepreation Principle)
    参数
    字段/属性
    接口和抽象类
    javascript中的事件
    线性回归算法-4.多元线性回归算法
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2664480.html
Copyright © 2011-2022 走看看