如何使用JavaScript动态地向HTML元素添加onclick事件

Question

我可以创建一个按钮元素，并像下面展示的那样添加一个onclick事件。

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

如何使用预定义函数而不是在事件内部定义一个函数？类似于：

elem.onclick=func();

- user3454558

Answer 1

为具有定义函数的元素添加事件监听器：

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

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

- ylerjen

Answer 2

我发现适合自己的最好方法如下。

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

- Achuth hadnoor

---

我唯一成功运行该函数的方法是使用elem.onclick=...赋值。对于我来说，直接设置并不起作用。 - dtasev

我见过的最好的解决方案。这实际上将其添加为Div上的属性，就像您不需要动态添加一样。 - James Blackburn

我喜欢这个比EventListener更好，因为我有一个场景需要动态的代码，类似于需要运行eval()，而不是固定的函数。否则我会添加一个监听器。 - EkriirkE

Answer 3

1)

function myfunction(){
alert("hello");
}

elem.onclick=myfunction();

或者

2)

var myfunction=function(){
alert("hello");
}
elem.onclick=myfunction;
//or
elem.onclick=myfunction.call();

- Tuhin

Answer 4

在我的情况下，这个方法可行...

    const elementname = document.getElementById('elementId');
    elementname.setAttribute("onclick","functionName()");

传递参数...

    var a = 10;
    var b = 20;                                              
    const elementname = document.getElementById('elementId');
    elementname.setAttribute("onclick",`functionName(${a},${b})`);

并创建新元素...

    const elementname = document.createElement('span');
    elementname.innerText = "Hii..!";
    elementname.setAttribute("onclick","functionName()");  

// 你可以像上面的例子一样在其中添加参数。

- prajwal tulawe

Answer 5

var clickHandler = function(){

};

elem.onclick = clickHandler;

---

function clickHandler(){

};

elem.onclick = clickHandler;

---

基本上，函数在javascript中属于变量类型。

如果按照方法1执行，显而易见。

但是，即使按照方法2执行，它也会创建一个名为clickHandler，类型为function，值为函数体的变量。

当你执行以下操作时：

elem.onclick = function(){};

你正在创建一个没有名称的匿名函数，并将其分配给元素的 onclick 属性。

同时，这种将处理程序绑定到事件的方法已经有点过时。大多数浏览器都有更好的方法来解决许多常见问题，比如添加多个处理程序到同一个事件。一旦你理解了这个函数的概念，就可以继续查看 W3C 模型事件注册，而不是这个传统模型。使用传统方法得到了很好的支持，没问题，只是您还有更好的设计选项。

- sabithpocker

Answer 6

使用纯JavaScript

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

--

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

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

演示 这里

- Ranjit Singh

---

那不是他所要求的。 - ylerjen

Answer 7

HTML：

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

JS（我使用了jQuery）：

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


function test()
{
    alert(123);
}

http://jsfiddle.net/IceManSpy/FaXgr/

- IceManSpy