多個元素的AddEventListener無法與「焦點」事件一起工作

我在猜想我有一個基本的錯誤思想，但我無法繞過它。多個元素的AddEventListener無法與「焦點」事件一起工作

我有幾個文本字段，我想添加一個EventListener。我把它們放在一個類中，並將EventListener添加到這個類中。當選擇「點擊」事件時，Everyhing可以完美工作。但是，當我將其改爲「專注」時，沒有任何反應。這是爲什麼？

這個工程：

document.getElementById('parent').addEventListener('click', emptyField, false);

這並未並不：

document.getElementById('parent').addEventListener('focus', emptyField, false);

文本字段：

function emptyField(e){ 
 
    var clicked = e.target; 
 
\t if (clicked.value == clicked.name) { 
 
\t \t clicked.value=''; 
 
\t \t 
 
\t \t if (clicked.id=='password') { 
 
\t \t \t clicked.type='password'; 
 
\t \t } 
 
\t } \t 
 
}

<class id="parent"> 
 
\t <input type="text" name="USERNAME" id="username" value="USERNAME"><br> 
 
\t <input type="text" name="PASSWORD" id="password" value="PASSWORD" ><br> 
 
</class>

來源

2015-11-02 BenQCat

這兩個是一樣的......我想你的意思是'querySelector'或其他東西？ querselector返回一個NodeList，你不能用它來附加事件，你必須循環它。 – somethinghere

使用實例可以幫助我們更好地理解。你說文本字段，但這些例子並沒有表明。請儘量隔離您的具體問題，以便我們可以重新創建它。 – xHocquet

我希望函數能夠對「焦點」事件做出反應，而不是「點擊」。但它不工作。 – BenQCat

我認爲你必須使用querySelectorAll()，將返回所有的input S：

var fields = document.querySelectorAll('#parent input');

並使用循環來focus事件附加到各個領域：

for (var i = 0; i < fields.length; i++) { 
    fields[i].addEventListener('focus', emptyField, false); 
}

希望這有助於。

來源

2015-11-02 15:23:55

的click事件冒泡達到祖先元素。

focus事件沒有，它是被聚焦的<input>，而不是外部元素。

來源

2015-11-02 15:21:32

我不知道，謝謝。所以沒有辦法添加每個單獨的文本字段？ – BenQCat

@BenQCat如果你想要專門處理'focus'，不是真的 - 你需要在你想接收事件的每個元素上綁定它，儘管你可以按照[Zakaria's答案]（http://stackoverflow.com/a/33481053/791010）保存必須分別處理每個元素。 –

如果要附加一個事件的幾個要素沒有明確的循環，你可以使用一個輔助功能：

function attachEvents(elementList, eventName, handlerFunction) { 
      if(typeof elementList == "string") 
        elementList = document.querySelectorAll(elementList); 
      for(var i = 0; i < elementList.length; i++) 
        elementList[i].addEventListener(eventName, handlerFunction); 
    }

你這樣稱呼它：

attachEvents("#area button", "click", function(event) { 
      this.style.backgroundColor = "red"; 
    });

或者是這樣的：

attachEvents(document.getElementById("area").getElementsByTagName("button"), "click", function(event) { 
      this.style.backgroundColor = "red"; 
    });

你並不總是想要document.querySelectorAll - 自己動手也意味着你也不會像some_element.querySelectorAll這樣的事情，當處理尚未成爲文檔一部分的事物或者沒有獨特的選擇器時，這真的很棒。

但無論如何，把循環放在一個輔助函數中給你一個沒有大型庫的jQuery類型單線程，它只是幾行簡單的代碼。

來源

2016-04-22 15:32:58

多個元素的AddEventListener無法與「焦點」事件一起工作

回答

相關問題