Question

我试图创建一个返回attachEvent函数或addEventListener函数的方法。我也试图使它成为一种全局方法，因此可以按以下方式使用：Element.eventMethod("event",function(){});

我还希望能够附加多个事件，这就是我使用for循环的方法。

    var functions = {
    "addEvents" : function(e,o,f){
        if(!window.eventMethod){
            if(typeof addEventListener !== "function"){
                if(typeof attachEvent !== "function"){
                    //ie8
                }else{
                    window.eventMethod = function(){
                        return attachEvent;
                    };
                }
            }else{
                window.eventMethod = function(){
                    return addEventListener;
                };
            }
        }
        var r = e.split(",");
        for(var i=0;i<r.length;i++){
            o.eventMethod(e[i],f);
        }
    }
};

使用以下代码调用该方法 functions.addEvents(events,object,fu);

然而，我得到了＆＃34;无法设置属性＆＃39; eventMethod＆＃39;未定义＆＃34;错误。

我在做错了什么？感谢

Answer 1

当我运行你的代码时，我得到一个不同的错误。错误在这一行：

o.eventMethod(e[i],f)

您尝试在需要连接到事件的对象上调用eventMethod。由于您没有将eventMethod建立为该对象的属性，因此代码失败。

现在，我认为你希望eventMethod()能够运行并返回正确的实际方法，然后在o上调用，但这不是语法的作用。相反，您需要将所需的方法名称（作为字符串）传递给o，然后在解析该方法后，将其传递给它所需的参数。

var functions = {
    addEvents : function(e,o,f) {
    
       // No need to set up window.eventMethod twice. Just get the right
       // method reference...
       var m = null; 
       // But, you need to set it to the string name of the function, not the function itself
       m = (window.addEventListener) ? "addEventListener" : "attachEvent";
     
       // ... And then use that reference in the single method wrapper:
       window.eventMethod = function(){
         return m;
       };

       // Split the event string into an array and loop through the array   
      e.split(",").forEach(function(evt){
         // Invoke the right method by passing the string name of the method into the
         // object and then passing the arguments to that method.
         o[eventMethod()](evt.trim(), fu);
      });
   }
};

var events = "click, mouseover, mouseout";
var object = document.querySelector("div");
var fu = function(evt){ 
  console.log("The " + evt.type + " event has fired."); 
};
functions.addEvents(events,object,fu);

<div>test</div>

现在，为了确保全局可用，但不与任何其他eventMethod全局变量冲突，您应该将代码封装在立即调用的函数表达式（IIFE）中，并在函数声明之后，'' d将该函数公开为Global对象的属性，但是通过自定义命名空间：

(function(){
  var functions = {
    addEvents : function(e,o,f) {

       // No need to set up window.eventMethod twice. Just get the right
       // method reference...
       var m = null; 
       // But, you need to set it to the string name of the function, not the function itself
       m = (window.addEventListener) ? "addEventListener" : "attachEvent";

       // ... And then use that reference in the single method wrapper:
       window.eventMethod = function(){
         return m;
       };

       // Split the event string into an array and loop through the array   
      e.split(",").forEach(function(evt){
         // Invoke the right method by passing the string name of the method into the
         // object and then passing the arguments to that method.
         o[eventMethod()](evt, fu);
      });
   }
  };

    // Create a custom namespace object on the Global object:
    window.MyUtilities = {};

    // Attach the function to that object:
    window.MyUtilities.functions = functions;
})();

现在，您有一个跨浏览器的包装函数，可以全局使用，如下所示：

window.MyUtilities.functions.addEvents(events,object,fu);

如何创建一个全局方法并使用它

1 个答案: