Javascript OOP 事件处理程序不工作

Question

我对 Javascript 中的事件处理程序有疑问。我正在使用事件处理程序来设置 div 的颜色。但是，我在这里关注了已经回答的问题：

// Add an event listener
document.addEventListener("name-of-event", function(e) {
console.log(e.detail); // Prints "Example of an event"
});

// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an       event" });

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

但这对我想做的事情不起作用。底部函数是运行来自 HTML 文档中的 onclick 事件。

var colour = "#808080";
var event = new CustomEvent("set",{});

document.addEventListener("set", function (colour) {
    document.getElementById("light1").style.backgroundColor = colour;
});

//function that sets the colour variable to red and then triggers the event      handler, passing the colour variable
function setlight1red() {
    colour = "#ff0000"
    document.dispatchEvent(event, [colour]);
}

感谢任何帮助，这不是 return 错误，只是当我运行 .html 文件时不会更改 div 的颜色。

谢谢。

Answer 1

试试这个

document.addEventListener("set", function (e) {
    document.getElementById("light1").style.backgroundColor = e.detail.color;
});

function setlight1red() {
    document.dispatchEvent(new CustomEvent("set", {'detail': {color: "#ff0000"}}));
}

性能改进：

如果您的颜色是静态的并且永远不会改变缓存事件并将其移出 setlight1red 函数。

Javascript OOP 事件处理程序不工作

Javascript OOP Event Handlers not working

javascript

jquery

html

eventhandler