2015-01-20 242 views
30

如何檢查一個元素是否有事件監聽器,如果我使用它的內聯函數就像下面的代碼。因爲我有一個函數調用函數並添加事件偵聽器,但它導致重複事件偵聽器導致它觸發一個函數兩次。所以我怎麼檢查它,所以我可以阻止它添加一個事件監聽器,如果它已經存在。謝謝! :D檢查一個元素是否有事件監聽器。沒有jquery

for (var a = 0;a<formFieldInput.length;a++) { 
      if(formFieldInput[a].hasAttribute("name") && formFieldInput[a].attributes.title.value !== "Valid Until") { 
       formFieldInput[a].addEventListener("click",function(event) { 
        toggleFieldList(event,"show"); 
       }); 
      } 
+1

您可以在添加它之前將其刪除 – dandavis 2015-01-20 23:02:40

+1

添加監聽程序和附加屬性(如「data-listener = true」)是否更容易,然後檢查是否設置了「data-litener」如果不是,添加監聽器? – pawel 2015-01-20 23:02:43

+0

您還可以使用直接分配來綁定每個事件處理程序,例如:formFieldInput [a] .onclick = function(){...};當你替換那些時,舊的只會消失而沒有併發症... – dandavis 2015-01-20 23:08:48

回答

31

沒有JavaScript函數來實現這一點。但是,您可以在添加偵聽器時將布爾值設置爲true,並在刪除偵聽器時將其設置爲false。然後在可能添加重複事件偵聽器之前檢查此布爾值。

可能重複:How to check whether dynamically attached event listener exists or not?這些天的Chrome瀏覽器開發工具控制檯上

+5

它很奇怪的JavaScript不告訴你!我覺得這很奇怪。 – vsync 2015-07-25 20:25:42

+2

@vsync 這不是JavaScript問題,它是瀏覽器功能以及它們如何管理DOM。 如果瀏覽器要處理這樣的檢查,它可能類似於Ryan Warner所說的。 – 2015-11-08 15:59:02

+0

@SebastienDaniel - 是的,這就是我的意思,DOM .. – vsync 2015-11-08 16:05:21

20

,您可以快速執行下面這個函數來顯示已連接到一個元素的所有事件偵聽器。

getEventListeners(document.querySelector('your-element-selector')); 
+1

是這個解決方案跨瀏覽器或只是鉻? – Anthony 2017-03-02 04:47:35

+0

@Anthony正如我上面提到的,它只適用於Chrome開發工具 – arufian 2017-03-30 00:10:55

10

您不需要。只要你想要多次,並隨時隨地打到你想要的。 MDN explains identical event listeners

如果多個相同事件偵聽器被登記在相同 事件目標使用相同的參數,重複實例是 丟棄。它們不會導致EventListener被調用兩次,而且它們不需要用removeEventListener 方法手動刪除。