addEventListener =方法中的功能不起作用

Question

我對window.addEventListener有問題。

此作品：

const engine = {
    eventListeners:function(){
        window.addEventListener("resize",this.resize);
    },
    resize:function(){alert("dupa");},
}
engine.eventListeners();

但是 ：不：

const engine = {
    eventListeners:function(){
        window.addEventListener("resize",this.event.resize);
    },
    event:function(){
        function resize(){alert("d");}
    },
}
engine.eventListeners();

我不知道為什么對我來說應該起作用。

我必須使用event(); 每秒60次並在內部event（）; 將會有更多的功能

控制台中有0個錯誤。

Answer 1

對於代碼：

const engine = {
    eventListeners:function(){
        window.addEventListener("resize",this.event.resize);
    },
    event:function(){
        function resize(){alert("d");}
    }
}

resize函數是在您存儲在event屬性中的匿名函數的范圍內定義的， resize起， resize只能從該范圍內訪問。

但是您可能想使用event對象而不是函數：

const engine = {
    eventListeners:function(){
        window.addEventListener("resize",this.event.resize);
    },
    event: {
        resize : function(){alert("d");}
    }
}
engine.eventListeners();

這樣，您可以使用this.event.resize訪問它。

Answer 2

如果我正確理解了您想要的內容，則解決方案是將engine對象中的events屬性轉換為一個對象，如下所示：

const engine = {
    eventListeners:function(){
        window.addEventListener("resize",this.event.resize);
    },
    event:{ // You can have all your event methods here
        resize: function(){
            alert("d");
        },
        click: function(){
            alert("Clicked")
        },
        change: function(){
            alert("Changed")
        }
    }
}
engine.eventListeners();

看看它是如何工作的：

 let i = document.querySelector("input"), b = document.querySelector("button") const engine = { eventListeners:function(){ window.addEventListener("resize",this.event.resize); b.addEventListener("click",this.event.click); i.addEventListener("change",this.event.change); }, event:{ // You can have all your event methods here resize: function(){ console.log("Resized") }, click: function(){ console.log("Clicked") }, change: function(){ console.log("Changed") } } } engine.eventListeners(); 

 <input placeholder="change my value"/> <button>Click me</button> <h1>Try resizing your window</h1> 

Answer 3

this.event是一個函數，您應該從中返回函數並將其更改為this.event（）

const engine = {
eventListeners:function(){
    window.addEventListener("resize",this.event());
},
event:function(){
    return function resize(){alert("d");}
},

}