Question

我正在创建一个脚本，每次按下按钮时都会创建div元素。最初我有一个名为inline的函数onclick属性，但是jslint不喜欢这样，所以我把它移出来，而是尝试使用addEventListener("click",function());

之前我从未使用addEventListener()所以我甚至不确定我是否正确使用它。

问题是它在页面加载时会创建一个div，而在按下按钮时则不会执行任何操作。

提前谢谢。

这就是我所拥有的：

<body>
<form>
    <textarea id="a"></textarea>    
    <br>
    <input value="button" type="button">
</form>
<div id="content">
</div>
<script>
    /*jslint browser:true */
    function createEntry(text) {
        "use strict";

        var div = document.createElement("div");
        div.setAttribute("class", "test");
        document.getElementById("content").appendChild(div);
    }
    var input = document.getElementsByTagName("input")[0];
    input.addEventListener("click", createEntry(document.getElementById('a').value));
</script>

Answer 1

像这样更改事件监听器

input.addEventListener("click", function(){
    createEntry(document.getElementById('a').value);
});

就目前而言，您将createEntry的结果作为事件监听器传递，而不是函数本身

此处提供更多信息：

https://developer.mozilla.org/en/docs/DOM/element.addEventListener

Answer 2

更改此行

input.addEventListener("click", createEntry(document.getElementById('a').value));

进入

input.addEventListener("click", function(){
createEntry(document.getElementById('a').value);
});

Answer 3

尝试使用像jQuery这样的JavaScript库来进行事件处理和DOM操作，以确保浏览器的安全性和统一性。

您可以在jQuery中使用事件处理程序，如下所示：

$(<element_selector>).on("click", function (event) {
     // your code here...
});

如何使用addEventListener

3 个答案: