javascript - 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

如果我正确理解您想要什么，解决方案是将对象events中的属性engine转换为对象，如下所示：

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 2

对于代码：

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

该函数是在您存储在属性resize中的匿名函数的范围内定义的，并且只能从该范围内访问。eventresize

但是您可能想使用对象event而不是函数：

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

这样您就可以使用this.event.resize.

Answer 3

this.event 是一个函数，您应该从中返回函数并将其更改为 this.event()

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

}