在web開(kāi)發(fā)中，JavaScript事件經(jīng)常被用來(lái)響應(yīng)用戶的操作。當(dāng)一個(gè)事件被觸發(fā)時(shí)，JavaScript腳本就會(huì)執(zhí)行相應(yīng)的代碼。對(duì)于單個(gè)div元素，事件的添加十分簡(jiǎn)單。但是當(dāng)我們需要在一個(gè)頁(yè)面中添加多個(gè)div元素并且要對(duì)每個(gè)元素都綁定事件的時(shí)候，問(wèn)題就變得有一定的復(fù)雜性了。

比如我們需要在一個(gè)頁(yè)面中添加10個(gè)div元素，并分別在它們上面綁定點(diǎn)擊事件。我們可以先使用document.createElement()方法創(chuàng)建10個(gè)div元素，并將它們添加到頁(yè)面中。

let container = document.getElementById('container');
for(let i=0;i<10;i++){
let div = document.createElement('div');
div.classList.add('box');
container.appendChild(div);
}

現(xiàn)在我們已經(jīng)擁有了10個(gè)擁有box類(lèi)名的div元素。接下來(lái)我們需要在每個(gè)div元素上綁定點(diǎn)擊事件。我們可以使用事件委托的方法，將事件綁定到它們的父元素上。

let container = document.getElementById('container');
container.addEventListener('click', function(event){
if(event.target.classList.contains('box')){
console.log('box is clicked');
}
});

這段代碼的意思是將點(diǎn)擊事件綁定到container元素上，如果點(diǎn)擊事件發(fā)生在box元素上，就打印輸出“box is clicked”。

但是有時(shí)候我們需要為不同的div元素綁定不同的事件。這時(shí)候我們可以使用遍歷的方法，為每個(gè)div元素單獨(dú)綁定事件。例如，我們希望點(diǎn)擊第一個(gè)div元素時(shí)，它的邊框顏色變?yōu)榧t色；點(diǎn)擊第二個(gè)div元素時(shí)，它的背景顏色變?yōu)樗{(lán)色。

let container = document.getElementById('container');
let boxes = container.getElementsByTagName('div');
for(let i=0;i<boxes.length;i++){
boxes[i].addEventListener('click', function(event){
switch(i){
case 0:
this.style.borderColor = 'red';
break;
case 1:
this.style.backgroundColor = 'blue';
break;
default:
console.log('other boxes clicked');
break;
}
});
}

這段代碼中，我們遍歷了所有的div元素，并分別綁定了不同的事件。當(dāng)點(diǎn)擊第一個(gè)div時(shí)，this關(guān)鍵字指向它自己，我們可以使用this.style.borderColor修改邊框顏色。當(dāng)點(diǎn)擊第二個(gè)div元素時(shí)，我們使用this.style.backgroundColor修改背景顏色。

總結(jié)來(lái)說(shuō)，在多div元素情況下使用JavaScript事件，我們可以使用事件委托或遍歷的方法進(jìn)行綁定。前者可以提高頁(yè)面的性能，后者可以更加靈活地為每一個(gè)元素綁定不同的事件。