如何為 JavaScript 生成的文本框附加 onclick 事件？

Question

我有一個包含文本框的表格行，它有一個顯示 JavaScript 日歷的 onclick ......我正在使用文本框向表格中添加行，但我不知道如何將 onclick 事件附加到 JavaScript 生成的文本框.. .

<input  class="date_size_enquiry" type="text" autocomplete="off"
onclick="displayDatePicker('attendanceDateadd1');" size="21" readonly="readonly"    
maxlength="11" size="11"  name="attendanceDateadd1" id="attendanceDateadd1" 
value="" onblur="per_date()" onchange="fnloadHoliday(this.value);">

我的 JavaScript 生成了一個文本框，

    var cell2 = row.insertCell(1);
    cell2.setAttribute('align','center')
    var el = document.createElement('input');
    el.className = "date_size_enquiry";
    el.type = 'text';
    el.name = 'attendanceDateadd' + iteration;
    el.id = 'attendanceDateadd' + iteration;
    el.onClick = //How to call the function displayDatePicker('attendanceDateadd1');
    e1.onblur=??
    e1.onchange=??
    cell2.appendChild(el);

Answer 1

像這樣：

var el = document.createElement('input');
...
el.onclick = function() {
    displayDatePicker('attendanceDateadd1');
};

順便說一句：注意 DOM 中的區分大小寫。 它是"onclick" ，而不是"onClick" 。

Answer 2

以您為例，我認為您想這樣做：

el.onclick = function() { displayDatePicker(el.id); };

唯一的技巧是意識到為什么需要在function() { ... }代碼中包裝displayDatePicker調用。 基本上，您需要為onclick屬性分配一個函數，但是為了做到這一點，您不能只執行el.onclick = displayDatePicker(el.id)因為這會告訴 javascript 執行displayDatePicker函數並將結果分配給onclick處理程序，而不是分配函數調用本身。 因此，為了解決這個問題，您創建了一個匿名函數，該函數反過來調用您的displayDatePicker 。 希望有幫助。

Answer 3

el.onclick = function(){
  displayDatePicker(this.id);
};

Answer 4

HTML5/ES6 方法：

var el = document.createElement('input')

[...]

el.addEventListener('click', function () {
  displayDatePicker('attendanceDateadd1')
})