Обработчики событий 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); 

Но это не работает для того, что я пытаюсь сделать. Нижняя функция запускается из события onclick в документе HTML.

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

Цените любую помощь, это не возвращает ошибку, но только не меняет цвет DIV, когда я запускаю файл .html.

Спасибо.

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 функции.