Javascript: Запуск нескольких функций с помощью OnChange

Question

У меня есть этот Javascript/HTML фрагмент:

var select = document.getElementById("selectMe"); 
 
function loadMe() 
 
{ 
 
    select.onchange = updateMe; 
 
} 
 

 
function updateMe() 
 
{ 
 
    alert("I am updated"); 
 
} 
 

 
function updateMeToo() 
 
{ 
 
    alert("I am updated too!"); 
 
} 
 

 
function updateMeAlso() 
 
{ 
 
    alert("I am also updated!"); 
 
} 
 
loadMe();

<select id="selectMe"> 
 
    <option>foo</option> 
 
    <option>bar</option> 
 
</select>

Приведенный выше код работает отлично, но,

Вопрос:
Как могу сообщать n нескольких функций в части «select.onchange» кода?

Я пытался что-то вроде этого:

select.onchange = updateMe; updateMeToo; updateMeAlso; 

И, как и ожидалось, он не работает.

Я хочу придерживаться моего кода, насколько это возможно.

Я также искал некоторые связанные с этим проблемы, но ничего не помогло.

Спасибо, ребята, заранее!

Answer 1

Попробуйте

select.onchange = function() { updateMe(), updateMeAlso(),updateMeToo() }; 

Answer 2

select.setAttribute('onchange','updateMe(); updateMeToo(); updateMeAlso();'); 

моя обычная практика, я знаю, что вы уже приняли ответ, но это работает точно так же, как хорошо.

Answer 3

Вы можете использовать addEventListener, чтобы добавить столько функций, сколько хотите.

var select = document.getElementById("selectMe"); 

select.addEventListener("onchange", loadMe, false); 
select.addEventListener("onchange", updateMe, false); 
select.addEventListener("onchange", updateMeToo, false); 
select.addEventListener("onchange", updateMeAlso, false); 

Основное преимущество состоит в том, что вы можете удалить любую из этих функций (слушателей событий) в любое время позднее, в любой последовательности, не влияя на другие слушатели. Просто убедитесь, что вы используете тот же список аргументов, что и для добавления слушателя.

select.removeEventListener("onchange", updateMeToo, false); 

Вы можете прочитать больше о том, что «мистический» третий аргумент (useCapture) here

Конечно эта модель не работает с функциями анонимным/стрелка, потому что вам нужно имя (указатель) из функцию, чтобы отменить его позже. Вот пример, который не работает

// you can add anonymous function 
select.addEventListener(
    "onchange", 
    function() { updateMe(), updateMeAlso(),updateMeAlso() }, 
    false 
); 

// but you cannot remove anonymous function from event listeners 
select.removeEventListener(
    "onchange", 
    function() { updateMe(), updateMeAlso(),updateMeAlso() }, 
    false 
);