Question

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

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

如何使用预定义函数而不是在事件内部定义函数？类似的东西：

elem.onclick=func();

Answer 1

将eventlistener添加到具有已定义函数的元素中调用：

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

https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener

Answer 2

我发现自己的最佳方式如下。

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

Answer 3

1）

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

elem.onclick=myfunction();

或

2）

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

Answer 4

var clickHandler = function(){

};

elem.onclick = clickHandler;

function clickHandler(){

};

elem.onclick = clickHandler;

基本上functions是javascript

中的变量

如果按方法1完成，则显而易见。

但即使你在方法2中这样做，它也会做同样的事情，创建一个名为clickHandler的变量，并输入值为function的函数体。

当你做

时

elem.onclick = function(){};

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

同时这种将处理程序绑定到事件的方法有点不赞成。大多数浏览器都有更好的方法来解决许多常见问题，比如在同一事件中添加多个处理程序。一旦理解了这个函数概念，就可以继续查看w3c模型事件注册，而不是传统模型。使用传统方法得到了很好的支持，而且只需要有更好的工程选项。

Answer 5

使用纯javascript

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

-

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

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

演示here

Answer 6

<强> 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/

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

6 个答案: