綁定動態添加內容沒有jQuery？

如果我動態地（通過AJAX或其他JS）向頁面添加表單，如何在事件偵聽器添加到pageload上的這些元素之前添加它們？綁定動態添加內容沒有jQuery？

我知道用jQuery它很容易結合到父元素，像這樣：

$(document).on('blur', 'input', function() {...})

，但我如何與香草JS做到這一點不清楚addEventListener必須直接應用到元素本身並且不能指定事件應該傳播的父元素？（我認爲，對..？）

來源

2016-09-26 Drew

好，'$（文件）。在（...）'綁定事件'document'。你也會這樣做。在事件處理程序中手動執行的所有操作都是檢查事件是否來自「輸入」元素。 –

你可以用類似的方法做到這一點。您將偵聽器附加到'document'文件並檢查點擊目標是否是您想要的目標並從那裏執行您的操作。 – putvande

在這個例子中，我特別尋找輸入模糊，所以如果我'addEventListener'來爲'模糊'事件形成文檔，難道不會激發？如果文檔中的輸入模糊，而不是文檔本身，我需要特別說明。 – Drew

以下是我將如何做到這一點。代表團很簡單。綁定到頂級父級。越接近，越好，越快。例如，如果你想在特定的div中委託事件，那會更好;避免衝突。比較event.target與你的目標你後，並調用回調函數

document.addEventListener('blur', function(event){ 
 
    
 
    if(event.target.tagName == 'INPUT'){ 
 
     onInputBlur.apply(this, arguments); 
 
    } 
 

 
}, true); 
 

 
function onInputBlur(event){ 
 
    
 
    // console.log(event); // event 
 
    console.log(event.target.value); 
 
    
 
}

<input type="text"/> 
 
<input type="text"/> 
 
<input type="number"/>

來源

2016-09-26 18:31:51

你可以很容易地添加事件監聽器在香草js，很像你通常會。煩人的焦點/模糊行爲與大多數事件有所不同（請參閱：http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html#link2），所以爲了使其實際工作，您需要爲您的容器元素添加一個製表符索引。

document.querySelector(".container").addEventListener("blur", function(e){ 
    if(e.target.tagName == "input"){ 
     // do stuff 
    } 
},false);

的這個動作https://jsfiddle.net/2n0v43gc/一個簡單的例子（編輯：看到輸出，你需要在你的控制檯上打開的窗口（F12））

來源

2016-09-26 18:17:12 Carl

function addEvent(a,b,c){ 
document.addEventListener(a,e=> { 
      if (e.target !== e.currentTarget) { 
      if(e.target.id==b){ 
     c(); 
     } 
        } 
        e.stopPropagation(); 
    },false); 
    }

使用這樣的：

addEvent("click","elem",function(){});

來源

2016-09-26 18:30:34

綁定動態添加內容沒有jQuery？

回答

相關問題