如何在 javascript 中使用 Onclick 属性动态创建对象

How do I create objects dynamically with Onclick property in javascript

本文关键字：Onclick 属性 动态 创建对象 javascript      更新时间：2023-09-26

>我有以下代码

  var eventbar = document.createElement("Div");
  eventbar.id = "eventa";
  eventbar.className= "event";
  eventbar.onclick = 'createpopupdata(this)';
  eventbar.innerHTML = "Click here";
  document.getElementById("body").appendChild(eventbar);

但是，当它在 HTML 中创建对象时，我的检查器在创建的 HTML Div 中不显示 onClick 属性。想知道我是否出错了，因为我尝试了多种方式发布在这里。(显然没有引号立即运行函数(。

编辑：如果我必须做一些特别的事情，比如为对象创建一个侦听器，或者如果有一个简单的解决方案，我会很高兴。

你可以尝试这样的事情：

var eventbar = document.createElement("Div");
eventbar.id = "eventa";
eventbar.className = "event";
eventbar.onclick = createpopupdata.bind(null,eventbar);
eventbar.innerHTML = "Click here";
document.getElementById("body").appendChild(eventbar);
function createpopupdata(el){
  alert(el.id)
}
div{
  width:50px;
  height:50px;
  background:#eee;
}
<div id="body"></div>

你的onclick(不是onClick区分大小写！(应该是对函数(createpopupdata(的引用，而不是对它的调用('createpopupdata(this)'(。首先将其添加到 DOM，然后添加到 onclick 侦听器。

function createpopupdata(event) {
  var el = event.target;
  alert(el.id + " clicked, foo: " + el.dataset.foo + ", bar: " + el.dataset.bar);
}
var eventbar = document.createElement("Div");
eventbar.id = "eventa";
eventbar.dataset.foo = "FOO";
eventbar.dataset.bar = "BAR";
eventbar.className= "event";
eventbar.innerHTML = "Click here";
document.getElementsByTagName("body")[0].appendChild(eventbar); 
eventbar.onclick = createpopupdata;

您还必须具有<body id="body">才能使您的版本正常工作。我修改了它以在通常的情况下工作。

这应该有效： 

eventbar.addEventListener('click', function (){
    createpopupdate(this);
}, false);
相关文章：