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

Question

我有一个表行，其中包含一个文本框，它有一个显示 JavaScript 日历的 onclick...我正在使用文本框向表中添加行，但我不知道如何将 onclick 事件附加到 JavaScript 生成的文本框。 我的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);">

生成一个文本框，

    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

HTML5/ES6 方法：

var el = document.createElement('input')

[...]

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

Answer 2

像这样：

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

顺便说一句：请注意 DOM 中的大小写敏感性。它是“onclick”，而不是“onClick”。

Answer 3

以您的示例为例，我认为您想要这样做：

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

唯一的技巧是意识到为什么需要将 displayDatePicker 调用包装在 function() { ... } 中代码。基本上，您需要为 onclick 属性分配一个函数，但是为了做到这一点，您不能只执行 el.onclick = displayDatePicker(el.id) 因为这将告诉 javascript 执行 displayDatePicker 函数并将结果分配给 onclick 处理程序，而不是分配函数调用本身。因此，为了解决这个问题，您创建了一个匿名函数，该函数依次调用您的 displayDatePicker。希望有帮助。

Answer 4

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