使用 setAttribute 向元素添加事件

Question

我正在使用 JavaScript 创建多个同类元素。我想向元素添加一个 onclick 事件。到目前为止我的代码：

for(let i=0;i<localStorage.length;i++)
{
var rem=document.createElement("button");
rem.innerHTML='<i class="fa fa-trash-o" aria-hidden="true"></i>';
rem.setAttribute('background-color','white');
rem.setAttribute('id',localStorage.key(i));
rem.setAttribute('class','delbuttons');
rem.setAttribute('onclick','del(e)');
document.body.appendChild(rem);
}

我的del函数：

function del(event) {
  var id = event.target.getAttribute('id'); 
  localStorage.removeItem(id);
  window.location.reload();
}

但这不起作用。出了什么问题？

Answer 1

试试这个

 rem.onclick = function(e) {del(e);};

Answer 2

您必须声明一个函数，然后您可以通过点击或任何其他事件将该函数附加到节点，请查看以下代码片段：

function del() {
  var id = event.target.getAttribute('id'); 
  localStorage.removeItem(id);
  window.location.reload();
}

var rem=document.createElement("button");
rem.innerHTML='<i class="fa fa-trash-o" aria-hidden="true"></i>';
rem.setAttribute('background-color','white');
rem.setAttribute('id',localStorage.key(i));
rem.setAttribute('class','delbuttons');
rem.onclick = del;
document.body.appendChild(rem);

Answer 3

使用 html 事件属性时，其中使用的任何变量或函数都需要在全局范围内才能访问。表示未在某些函数或对象中定义。同样在您的示例中，您将 e 传递给函数，但示例中没有名为 e 的变量。如果你打算传入 event 对象，那么你应该使用 event 而不是 e:

rem.setAttribute('onclick','del(event)');

但是这里没有真正的理由使用setAttribute，您可以更轻松地设置onclick 属性或使用addEventListener。后者更好，因为您可以使用它为同一事件设置多个事件处理程序。您也不必显式传入 event 对象

rem,onclick = del;
//or
rem.addEventListener('click',del);

因为您有很多元素，所以您也可以只使用 delegated event listener，这样您就不必为每个元素显式设置一个事件。您只需在一个公共静态父元素上设置一个

document.addEventListener('click',function(event){
  //event.target is the element firing the ev4nt
  if(evrnt.target.classLidt.contains('delbuttons')){
    /* your code here */
  }
});

使用 setAttribute 向元素添加事件

adding event to an element using setAttribute

javascript

event-handling