如何使用addEventListener
[英]How to use addEventListener
问题描述
I was making a script that creates div elements each time a button is pressed. 
我正在创建一个脚本，每次按下按钮时都会创建div元素。 Originally I had the function called inline with the onclick attribute, but jslint doesn't like that so I moved it out and instead tried to use addEventListener("click",function()); 最初我有一个带有onclick属性的内联函数，但jslint不喜欢这样，所以我把它移出来，而是尝试使用addEventListener("click",function());
I've never used addEventListener() before so I'm not even sure I am using it correctly. 我以前从未使用过addEventListener()所以我甚至不确定我是否正确使用它。
The problem is that it creates one div when the page loads and won't do anything when the button is pressed. 问题是它在页面加载时创建一个div ，而在按下按钮时不会执行任何操作。
Thank you in advance. 先感谢您。
here is what I have: 这就是我所拥有的：
<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 个解决方案
解决方案1
11 已采纳 2012-12-07 21:14:58
Change the event listener like this 像这样更改事件监听器
input.addEventListener("click", function(){
createEntry(document.getElementById('a').value);
});
as it stands, you're passing the result of createEntry as an event listener, not the function itself 就目前而言，您将createEntry的结果作为事件侦听器传递，而不是函数本身
More information here: 更多信息：
https://developer.mozilla.org/en/docs/DOM/element.addEventListener https://developer.mozilla.org/en/docs/DOM/element.addEventListener
解决方案2
6 2012-12-07 21:15:17
Change this line 改变这一行
input.addEventListener("click", createEntry(document.getElementById('a').value));
into 成
input.addEventListener("click", function(){
createEntry(document.getElementById('a').value);
});
解决方案3
4 2012-12-07 21:18:53
Try using a JavaScript library like jQuery for event handling and DOM manipulation, to be browser safe and for uniformity. 尝试使用像jQuery这样的JavaScript库来进行事件处理和DOM操作，以确保浏览器的安全性和统一性。
You can use the event handlers in jQuery like the following: 您可以在jQuery中使用事件处理程序，如下所示：
$(<element_selector>).on("click", function (event) {
// your code here...
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.