將事件偵聽器添加到動態創建的div中，並將其傳遞給它

我發現了有關傳遞變量的類似問題，但沒有關於傳遞該變量的信息。將事件偵聽器添加到動態創建的div中，並將其傳遞給它

我想創建一個基於表單輸入的div，然後附加一個事件監聽器調用一個事件，要求將它傳遞給它。我已經到了創建div的地步，並根據輸入的數據添加內容。所以現在我試圖使用.addEventListener添加onClick事件，但看起來你不能通過匿名函數傳遞這個事件。這是我正在嘗試的代碼。這個傳遞給它，所以它可以瞄準正確的div

是否有此解決方案的任何

element.addEventListener("click", function(this){selectActiveCompetitor(this)});

sekectActiveCompetitor是依賴？

來源

2016-04-21 user3772307

你是否正在瞄準點擊的div？ – Shomz

看到的東西是 - 當你用'element.addEventListener'（而不是element.onclick =）附加一個事件監聽器時，該函數可以自動訪問'this'關鍵字，因爲函數現在是'的一部分'元素。因此，'this'是指具有附加事件的對象 - 您不需要明確地傳遞它。 – enhzflep

啊好的。謝謝！ – user3772307

繼上面我的評論，這裏是一個自動訪問我所說的this關鍵字的例子。點擊任何按鈕將導致該特定按鈕上的文本被警告。

<!DOCTYPE html> 
<html> 
<head> 
<script> 
"use strict"; 
function allByTag(tagName,parent){return (parent == undefined ? document : parent).getElementsByTagName(tagName);} 

function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); } 

window.addEventListener('load', onDocLoaded, false); 

function onDocLoaded() 
{ 
    forEachNode(allByTag('button'), function(curNode, curIndex, nodeList){ curNode.addEventListener('click', onBtnClick, false); }); 
} 
/* 
// expanded version of the above function 
// 
function onDocLoaded() 
{ 
    var btns = allByTag('button'); 
    forEachNode(btns, attachBtnHandler); 

    function attachBtnHandler(curNode, curIndex, nodeList) 
    { 
     curNode.addEventListener('click', onBtnClick, false); 
    } 
} 
*/ 


function onBtnClick(evt) 
{ 
    alert(this.textContent); 
} 
</script> 
<style> 
</style> 
</head> 
<body> 
    <button>This is btn1</button> 
    <button>This is btn2</button> 
    <button>This is btn3</button> 
</body> 
</html>

來源

2016-04-21 16:39:55 enhzflep

有一件事，爲什麼它沒有將onClick添加到html？如果我檢查元素，它沒有onclick事件偵聽器，其中作爲手動創建的div，我在此之後進行建模。 – user3772307

因爲它是'javascript事件'，所以它不會出現在DOM中。如果您選擇元素檢查器的事件偵聽器選項卡，則可以看到他們擁有單擊事件的處理程序。這只是它的工作方式。最大的好處（或者至少另一個好處）是，您可以爲同一元素上的任何一個事件添加多個處理程序。如果你改用'element.onclick ='這將取代任何現有的處理程序。每種方式都有好處，但'element.addEventListener'由_far_越強大。你也可以使用'element.removeEventListener'去除處理器。這有幫助嗎？ – enhzflep

將事件偵聽器添加到動態創建的div中，並將其傳遞給它

回答

相關問題