具有通用參數處理的回調函數

我想創建一個JS函數，它從調用它的地方獨立處理它的參數。 AFAIK參數有所不同，具體取決於調用函數的位置。具有通用參數處理的回調函數

實施例1

甲黎民的用法是在HTML註冊功能：

<input type="text" id="text1" onkeyup="myFunc(this);">

的元件將隨後被傳遞給函數：

function myfunc(element) { 
    alert(element.value); 
}

實施例2

另一個辦法是在文檔加載完成後動態註冊它。類似的規定：

// init() gets called when document is ready 
function init() { 
    document.getElementById('text2').addEventListener('keyup', myFunc2); 
}

現在，該函數將收到一個事件對象，而不是一個Element-對象。 我需要更改函數代碼來訪問信息。

function myFunc2(event) { 
    var element = event.target; 
    alert(element.value); 
}

例3

一個解決這個問題的方法是完全ingnore論點，總是聚集在函數內部的所有信息，如：

function myFunc3(event) { 
    var element = document.getElementById('text3'); 
    alert(element.value); 
}

醜陋件事這個解決方案是，GUI將被巧妙地耦合到邏輯。

例4？

一個解決方案，我能想到的是改變解決方案1 和包裝this成一個事件對象？我還沒有嘗試過這一點，我不知道如何最優雅地做到這一點。

PS：不JQuery的「允許」

來源

2017-09-14 Boris Däppen

忘掉解決方案1，因爲在HTML代碼中直接綁定事件是一個不好的做法和做事的一種常見方式初學者。解決方案3笨拙，並會在每次按鍵時進行DOM調用（'element = document.getElementById（'text3'）'），這可能非常耗費資源。解決方案2看起來不錯，你可以獲得所有需要傳遞的信息。你用'element = event.target'獲得你的元素，你自己做了。它出什麼問題了？ –

您也可以從內聯處理程序傳遞事件對象：'onclick =「myFunc（event）;」'。儘管我同意Jeremy的觀點，但內聯處理程序是不好的做法。 – Teemu

這實際上是我正在尋找的解決方案'onclick =「myFunc（event）;''。我問的原因是純粹的教育（我正在向初學者教這些東西）。他們有時需要先學習**例1 **，儘管它被認爲是不好的。所以我在尋找從例子1 **到例子2 **的平滑過渡。有人可以將此作爲答案嗎？然後我可以接受它。萬分感謝！ –

第一個可以寫成這樣（請注意，它寧願不混合與事件處理您的標記，但是如果你真的想它，那麼它可以這樣寫）

<input type="text" id="text1" onkeyup="myFunc(event);">

和第二個將從事件target財產的輸入。

function myFunc(e) { 
 
    let element = e.target; 
 
    console.log('event comming from ' + element.id); 
 
    console.log('current value is ' + element.value); 
 
} 
 

 
window.addEventListener('load', function() { 
 
    let el = document.querySelector('#text2'); 
 
    el.addEventListener('keyup', myFunc); 
 
});

<input type="text" id="text1" onkeyup="myFunc(event);"> 
 
<input type="text" id="text2">

來源

2017-09-14 08:56:24 Icepickle

第一個不應該被寫入。 –

@JeremyThille我會同意它不適合，但是如果它必須寫入，那麼它可以這樣寫，以支持統一的參數值 – Icepickle

剛剛也注意到了這一點。只有'事件'在大多數瀏覽器中工作？ –

這包括兩種情況：

function foo(e) { 
    let element = e.target || e; 
}

來源

2017-09-14 08:54:00

非常整潔優雅，但有點破解:-)我認爲這使得更多的意識用'event'替換'this'：''onclick =「myFunc（event）;'' –

如果你想支持舊的JavaScript風格'onkeypress =「...」'等等）更好地習慣於適應黑客行爲。 :) –

用'event'代替'this'不會做任何事情：只是重命名事物，底層對象不會改變。 –

你可以有你的功能檢查實例/類型參數（S）和委託邏輯等功能。

function myGeneralFunction(arg) { 
    if(arg instanceof Event) { 
    return handerForEvents(arg); 
    } 
    return otherHandler(arg); 
}

來源

2017-09-14 08:55:38 vassiliskrikonis

謝謝。我認爲用'event'取代'this'會更有意義：'onclick =「myFunc（event）;」' –

具有通用參數處理的回調函數

回答

相關問題