組織多個onChange事件

我在頁面上有8個窗體。每個表單都會更改其相應圖形的值，而無需刷新頁面。但是，我想這樣做以便我不必點擊提交按鈕來更改圖形。每個表單我都有3個表單元素。這意味着我需要3 onChange事件爲每個表單。我需要整個頁面的24個onChange事件。每個onChange事件僅調用該圖的唯一函數。因此在每個onChange事件內部都有一個唯一功能，其中由onChange事件提供的參數。組織多個onChange事件

我想知道的是，有沒有辦法減少onChange事件的數量？寫出24個事件讓我懷疑是否有一個更簡單的方法。在那兒？

來源

2017-08-01 user2896120

您需要在任何情況下的24個獨特的功能呢？或者它們只有參數不同？ – Teemu

不確定是否只是簡化啓動邏輯或整個過程。你可以通過在jQuery選擇器上添加變化來簡化激發邏輯 - 例如，爲所有的類添加'$（「。in」）。change（）'。 –

'$（document）.on（'change'，'form：input'，function（）{console.log（this）}）' –

你只需要1個eventHandler，你可以發送不同的ID來檢查。像這樣的東西。

function onChangeInput(id) { 
 
    switch (id) { 
 
    case 1: 
 
     console.log('Update form 1'); 
 
     break; 
 

 
    case 2: 
 
     console.log('Update form 2'); 
 
     break; 
 
    } 
 
}

<form> 
 
    <label>Form 1</label><br> 
 
    <input type="text" onchange="onChangeInput(1)"> 
 
    <input type="text" onchange="onChangeInput(1)"> 
 
</form> 
 

 
<form> 
 
    <label>Form 2</label><br> 
 
    <input type="text" onchange="onChangeInput(2)"> 
 
    <input type="text" onchange="onChangeInput(2)"> 
 
</form>

來源

2017-08-01 17:00:10

這正是我想要的！謝謝！ – user2896120

@ user2896120我敢打賭，這不是你真正想要的。 – Teemu

您可以通過代碼添加onChange處理程序。但我認爲這更容易理解。 –

只是爲了好玩這裏是提高解決方案的另一種方式。

首先每個表單都獲得一個Id。然後在事件處理程序中，您可以通過執行this.parentNode.id來獲取該ID。現在輸入元素不需要知道它應該更新哪種形式。

，最後你可以通過查詢這些事件處理程序添加到輸入元素，並使用addEventListener

var q = document.querySelectorAll.bind(document); 
 

 
function updateForm(id) { 
 
    console.log(id); 
 
    document.getElementById('output').textContent = "Change detected in Form: " + id; 
 
} 
 

 
function onChangeEvent(event) { 
 
    updateForm(this.parentNode.id); 
 
} 
 

 
var allInputs = q('form input'); 
 
allInputs.forEach(function(element) { 
 
    element.addEventListener('change', onChangeEvent); 
 
});

<form id="1"> 
 
    <label>Form 1</label><br> 
 
    <input type="text"> 
 
    <input type="text"> 
 
</form> 
 
<br> 
 
<form id="2"> 
 
    <label>Form 2</label><br> 
 
    <input type="text"> 
 
    <input type="text"> 
 
</form> 
 
<br> 
 
<form id="3"> 
 
    <label>Form 3</label><br> 
 
    <input type="text"> 
 
    <input type="text"> 
 
</form> 
 
<br> 
 
<div id="output"></div>

來源

2017-08-02 12:47:01

組織多個onChange事件

回答

相關問題