logo标签列表

如何使用addEventListener

javascriptclickaddeventlistener
9
我正在制作一个脚本，每次按下按钮时都会创建 div 元素。最初，我将该函数与 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>

3个回答
13

像这样更改事件监听器

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

目前情况是，你将createEntry函数的结果作为事件侦听器传递了进去，而不是函数本身。

更多信息请参见：

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

7

修改这一行

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

转换成

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

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

您可以像以下示例一样使用jQuery中的事件处理程序：

$(<element_selector>).on("click", function (event) {
     // your code here...
});
3
我知道如何使用JQuery来实现，但我想通过不使用JQuery的方式来提高我的JavaScript技能。不过你提到了跨浏览器的安全性问题，这点很重要。谢谢：] - Kyle Messner
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接