在使用createElement（）生成的元素上添加事件和函數

Question

我使用createElement（）/ createTextNode（）創建了不同的元素 - 段落，並將它們添加到主體中。

我的問題是，我想讓這些div鏈接或能夠添加事件，如onclick，顯然沒有HTML代碼來做到這一點。只是JavaScript生成的對象。

我的代碼大氣壓：

for (i=0; i<10; i++){ 
    var newDiv = document.createElement("div"); 
    newDiv.className = "block"; 
    var heading = document.createElement("h2"); 
    var newContent = document.createTextNode(data[1][i]); 
    heading.className="title"; 
    heading.appendChild(newContent); 
    newDiv.appendChild(heading); 
    var paragraph = document.createElement("p"); 
    var newContent2 = document.createTextNode(data[2][i]); 
    paragraph.className="light"; 
    paragraph.appendChild(newContent2); 
    newDiv.appendChild(paragraph); 

    var currentDiv = document.getElementById("div1"); 
    document.body.insertBefore(newDiv, currentDiv); 


    } 

Answer 1

您可以將事件監聽器添加到您剛剛創建的對象。該對象不一定是HTML。 Read more about adding event listeners，看看簡單的例子：

var someDiv = document.createElement('div'); 
 
var txt = document.createTextNode('click me'); 
 
someDiv.append(txt); 
 
document.body.append(someDiv); 
 

 
var myFancyFunction = function() { 
 
    alert('you clicked me'); 
 
}; 
 

 
someDiv.addEventListener('click', myFancyFunction);

更新你的代碼後，你可以添加一個事件偵聽器，這些你快速創建對象。您也可以在同一個事件中添加不同的功能。在這種情況下，它的兩個元素/對象相同的功能。與此玩法：（我改變了數據爲「假數據」，因爲沒有數據）

var myClick = function(event) { 
 
    alert(event.target.innerHTML); 
 
}; 
 

 
for (i=0; i<10; i++){ 
 
    var newDiv = document.createElement("div"); 
 
    newDiv.className = "block"; 
 
    var heading = document.createElement("h2"); 
 
    var newContent = document.createTextNode('dummy data1 index: ' + i); 
 
    heading.className="title"; 
 
    heading.appendChild(newContent); 
 
    newDiv.appendChild(heading); 
 
    var paragraph = document.createElement("p"); 
 
    var newContent2 = document.createTextNode('dummy data2 index: ' + i); 
 
    paragraph.className="light"; 
 
    paragraph.appendChild(newContent2); 
 
    newDiv.appendChild(paragraph); 
 

 
    var currentDiv = document.getElementById("div1"); 
 
    document.body.insertBefore(newDiv, currentDiv); 
 

 
    heading.addEventListener('click', myClick); 
 
    paragraph.addEventListener('click', myClick); 
 

 
}

Answer 2

一旦元素被添加到dom，您可以選擇它就像任何其他元素。

// Create the element 
 
var paragraph = document.createElement('p'); 
 

 
// Give it an `id` 
 
paragraph.id = 'foo'; 
 

 
// Add the element to the `dom` 
 
document.body.appendChild(paragraph); 
 

 
// Add the listener 
 
paragraph.addEventListener('click', function() { 
 
    this.innerHTML = 'It was clicked'; 
 
});

p { 
 
    height:20px; 
 
    padding:10px; 
 
    outline:1px solid #bada55; 
 
}

在上面的例子中，我添加一個id。如果由於某種原因，您需要重新選擇元素，它可能會更容易。

Answer 3

你可以簡單地調用addEventListener在JS生成的對象，它們被插入之前就到DOM，或從來沒有插入所有：

let div = document.createElement('div'); 

div.addEventListener('click', function(event) { 
    // do something 
}); 

// This will trigger a call of the registered click callback, 
// regardless of whether the div is in the DOM: 
div.dispatchEvent(new Event('click', { 
    "bubbles": true, 
    "cancelable": false, 
})); 

// To add it to the DOM, simply add it the way you wish: 
document.body.appendChild(div); 

• EventTarget.dispatchEvent允許您在觸發事件一種計算方式（具有與實際點擊div相同的效果）

• 請注意上例中事件構造函數的browser compatibility。