通过数组和FOR循环添加事件监听器

Add Event Listeners via an Array and FOR Loop

本文关键字：添加 事件 监听器 循环 FOR 数组      更新时间：2023-09-26

前几天遇到了点小问题。我试图精简我的代码尽可能多，我现在已经到了我试图通过JavaScript添加事件监听器的阶段，所以我的HTML看起来更整洁。

html片段—— 

<input type="button" id="googleSearchButton" />
<input type="button" id="youtubeSearchButton" />
<input type="button" id="wikiSearchButton" />
<input type="button" id="facebookSearchButton" />
<input type="button" id="twitterSearchButton" />
<input type="button" id="tumblrSearchButton" />
<input type="button" id="dropboxSearchButton" />

JavaScript片段

var contIDArray = ["google", "youtube", "wiki", "facebook", "twitter", "tumblr", "dropbox"];
window.load = initAll();
function initAll(){
    applyProperties();
}
function applyProperties(){
        for (var i = 0; i < contIDArray.length; i++){
            addEventListeners(contIDArray[i] + "SearchButton");
        }
}
function addEventListeners(id){
    document.getElementById(id).addEventListener("click", testAlert(id), false);
}
function testAlert(id){
    alert(id + " clicked")
}

，我希望，你可以看到，FOR循环将循环，直到它用完容器数组中的值。每次它都会输出数组中的位置，后面跟着"SearchButton"。例如，第一次循环时它将输出"googleSearchButton"，第二次循环时输出"youtubeSearchButton"，以此类推。

现在，我知道FOR循环适用于应用属性，因为我用它来应用按钮值和文本框占位符文本在我的项目的其他部分。

我让它添加了一个简单的测试函数("testAlert()")，并设置它传递调用它的元素的id。我已经设置好了，所以一旦事件监听器被添加，我就可以简单地点击每个按钮，它会提醒它的id，并告诉我它已经被点击了。

现在，理论上，我认为这是可行的。但是，FOR循环似乎触发了"addEventListeners"函数，该函数反过来又添加了事件侦听器，以便在单击时触发"testAlert"。但是它只会在添加事件监听器后立即触发"testAlert"函数，而不会在单击时触发。

我很抱歉，如果这看起来有点太长了，我的解释总是太长了。希望你能从我的代码中看到我想要完成的东西，而不是我的解释。

帮助将是非常感激的。:)

你离目标很近了，但还是有一些地方不对。

首先，你不能只做id.addEventListener。你需要做document.getElementById(id).addEventListener。id只是一个字符串，你需要一个DOMElement。

第二，当您执行testAlert(id)时，您正在运行该函数，然后将其返回值(undefined)分配为事件侦听器。你需要传递一个函数。像这样:

id.addEventListener("click", function(){
  testAlert(this.id); // this is the DOMElement you clicked on
}, false);

尽管我建议给你所有的按钮添加一个类，然后像这样添加事件。

<input type="button" id="googleSearchButton" class="searchButton" />
<input type="button" id="youtubeSearchButton" class="searchButton" />
<input type="button" id="wikiSearchButton" class="searchButton" />
<input type="button" id="facebookSearchButton" class="searchButton" />
<input type="button" id="twitterSearchButton" class="searchButton" />
<input type="button" id="tumblrSearchButton" class="searchButton" />
<input type="button" id="dropboxSearchButton" class="searchButton" />

然后:

var buttons = document.getElementsByClassName('searchButton');
for(b in buttons){
   if(buttons.hasOwnProperty(b)){
     buttons[b].addEventListener("click", function(){
        testAlert(this.id); // this is the DOMElement you clicked on
     }, false);
   }
}

注意:addEventListener和getElementsByClassName可能无法在所有浏览器中使用(我的意思是它们可能无法在IE中工作)。这就是为什么很多网站使用JavaScript库，比如jQuery。jQuery为您处理所有跨浏览器的东西。如果你想使用jQuery，你可以这样做:

$('.searchButton').click(function(){
  testAlert(this.id);
});

注2:在JavaScript中，函数是变量，可以作为参数传递。

document.getElementById(id).addEventListener('click', testAlert, false);

注意testAlert之后没有()，我们传递的是函数本身，当你传递testAlert()时，你传递的是它的返回值。如果你这样做，testAlert将需要修改一点:

function testAlert(){
    alert(this.id + " clicked")
}

变化:


function addEventListeners(id){
    id.addEventListener("click", testAlert(id), false);
}
为:


function addEventListeners(id){
    document.getElementById(id).addEventListener("click", testAlert(id), false);
}

否则，您将对字符串应用addEventListener。在任何情况下，将addEventListener替换为对事件的赋值，如onClick。

id看起来像一个字符串。所以不如这样做:

function addEventListeners(id){
  var obj = document.getElementById(id);
  obj.addEventListener("click", testAlert(id), false);
}

同样，下面是工作代码:

http://jsfiddle.net/ZRZY9/2/

obj.addEventListener("click", function() { testAlert(id); }, true);

正如Rocket上面提到的"你正在调用它并将事件设置为返回值undefined"。

坏消息是Internet Explorer 7目前不支持addEventListener()

我浏览了你的代码。我遇到的最初问题是，您试图在创建文档中的元素之前找到它们。窗口。onLoad在页面完成之前触发。我使用body标签的onload属性测试了这一点，它是这样工作的。

因此，这是前面提到的试图通过使用"id"字符串查找元素的问题和在页面完全加载之前触发的函数的组合。

不管怎样，很高兴你把它修好了!

这是我在结尾的javascript:

    <script>
    var contIDArray = ["google", "youtube", "wiki", "facebook", "twitter", "tumblr", "dropbox"];
function initAll(){
    applyProperties();
}
function applyProperties(){
        for (var i = 0; i < contIDArray.length; i++){
    var newString = contIDArray[i] + "SearchButton"
            addEventListeners(newString);
        }
}
function addEventListeners(id){
    document.getElementById(id).addEventListener("click", testAlert, false);
}
function testAlert(){
    alert(this.id + " clicked")
}
</script>
相关文章：