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]);
}

感谢任何帮助，这不会返回错误，但只是在运行.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事件处理程序无法正常工作

1 个答案: