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

欣賞任何幫助，這不會返回一個錯誤，但只是在運行.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功能。