是否存在將屬性值的內容存儲到HTML事件的最佳實踐？

Question

我想將屬性值（紅色）的內容存儲到HTML事件中作為參數。 是否有最佳實踐來執行此操作，而不是手動將其作為參數？

<input type="radio" value="red" onchange="changeColor('red')">

Answer 1

您可以這樣做。 希望能幫助到你！

<input type="radio" value="red" onclick="changeColor(this.value)">

Answer 2

您可以使用this.value傳遞值，而不是傳遞值作為參數。

或者，您可以在函數參數中分配默認值，如果不是默認值，則通過value屬性

HTML

<input type="radio" value="red" name='radio' onchange="changeColor(this.value)">
<input type="radio" value="red" name='radio' onchange="changeColor()">

JS

//setting defualt value as red
function changeColor(color = 'red'){
      console.log(color);
 }

Answer 3

我認為事件委托和通過JS綁定單擊事件無疑是最佳實踐解決方案。 因為它使用單個功能，並最大程度地減少了重復。

使用HTML進行事件處理很麻煩，因為您最終要重復多次函數名稱，尤其是在這種情況下，添加功能並不是HTML的真正角色-而是JS的角色。 HTML在那里主要提供文檔結構。

正如其他人所述，使用click事件是最佳做法，因為onchange的行為因瀏覽器而異。

以下是工作輸入，JS綁定委托事件的完整示例，該事件將注銷#radioColours中任何輸入的值

 var dynamicBind = document.getElementById("radioColours"); dynamicBind.addEventListener("click", function(evt){ var elem = evt.target; if(elem.tagName == "INPUT"){ console.log(elem.value) } }) 

 <div id="radioColours"> Red - <input type="radio" name="colours" value="red"><br> Blue -<input type="radio" name="colours" value="blue"><br> </div>