的Javascript：使用的onChange

運行多個功能，我有此Javascript/HTML片段：
的Javascript：使用的onChange

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>

上面的代碼工作正常，但，

問題：
我該如何ru代碼的「select.onchange」部分有多個函數？

我想是這樣的：

select.onchange = updateMe; updateMeToo; updateMeAlso;

和預期的一樣，這是行不通的。

我想盡可能地使用我的代碼。

我也搜索了一些相關的問題，但沒有任何幫助。

謝謝各位提前！

來源

2017-02-15 Jorz

試試這個

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

來源

2017-02-15 06:17:06 Mairaj

這是真棒一個例子！我很困惑的結果，然後我發現你用了兩次updateMeAlso（）。無論如何編輯它。 – Jorz

@Jorz哦，我看到我會馬上更新它。 – Mairaj

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

是我的習慣，我知道你已經接受一個答案，但這個作品一樣精緻。

來源

2017-02-15 06:38:02 Merigold

這工作得很好！真棒！ – Jorz

你可以很容易地使用setAttribute和addEventListener來設置參數 – Merigold

您可以使用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 
);

來源

2017-02-15 06:44:51

你得到了很棒的信息！我也會嘗試用這些玩我的代碼。 – Jorz

我的榮幸@Jorz –

的Javascript：使用的onChange

回答

相關問題