如何使用javascript动态地向html元素添加onclick

我能够创建一个按钮元素并添加一个onclick事件，如下所示

elem.onclick=function()
{
alert("qweqweqwe");
}        

如何使用预定义函数而不是在事件内部定义函数？比如：

elem.onclick=func();

---

向具有要调用的已定义函数的元素添加eventlistener：

elem.addEventListener("click", func, false); //where func is your function name

---

---

基本上，

函数

是

javascript

如果按照方法1中的方法进行操作，其效果是显而易见的

但是，即使您像方法2中那样做，它也会做同样的事情，创建一个名为

clickHandler

的变量，并键入

function

值，即函数体

当你这样做的时候

elem.onclick = function(){};

您正在创建一个没有名称的匿名函数，并将其分配给元素的

onclick

同时这种将处理程序绑定到事件的方法有点不受欢迎。大多数浏览器都有更好的方法来实现这一点，解决了许多常见问题，比如说向同一事件添加多个处理程序。一旦理解了函数的概念，就可以继续检查w3c模型事件注册，而不是传统模型。使用传统方法得到了很好的支持，而且还可以，恰好您有更好的工程选项。

HTML:

<button>Button</button>
<div id="buttons">
</div>

$('button').click(function(){
    var dyn_button = '<button onclick="javascript:test()">Dynamic button</button>'
    $('div#buttons').append(dyn_button + "<br>");
});


function test()
{
    alert(123);
}

按钮

JS（我使用jQuery）：

<button>Button</button>
<div id="buttons">
</div>

$('button').click(function(){
    var dyn_button = '<button onclick="javascript:test()">Dynamic button</button>'
    $('div#buttons').append(dyn_button + "<br>");
});


function test()
{
    alert(123);
}

$（“按钮”）。单击（函数（）{
变量动态按钮='动态按钮'
$（'div#button'）。追加（dyn#u button+“
”）；
});
功能测试（）
{
警报（123）；
}

1）

或

(二)

使用纯javascript

<div id="test">Click me to alert</div>

---

演示

我为自己找到的最佳方法如下所示

const li = document.createElement('li');
        li.innerText = "client";
        li.id ="key";
        li.className = "client-class";
        li.setAttribute("onclick","valid;");

---

这并不是他所要求的，我设法让函数实际运行的唯一方法。将其设置为

elem.onclick=…

似乎不再有效，至少对我来说，这是我见过的解决此问题的最佳方案。这实际上是将其作为属性添加到Div中，就像您不需要添加dynamically时那样，因为我的代码是动态的，类似于需要运行eval（），而不是固定的函数。否则我会添加一个侦听器。

<div id="test">Click me to alert</div>

    document.getElementById("test").onclick=callme;

function callme()
{
    alert("You have clicked me!");
}

const li = document.createElement('li');
        li.innerText = "client";
        li.id ="key";
        li.className = "client-class";
        li.setAttribute("onclick","valid;");