隨著web應(yīng)用的發(fā)展，前端技術(shù)也不斷進(jìn)步，javascript成為了前端開發(fā)的重要技術(shù)之一。其中，事件是javascript中最重要的一部分，它可以讓網(wǎng)頁有更豐富的交互效果。今天我們主要聊聊在網(wǎng)頁中使用事件來控制多個(gè)div的實(shí)現(xiàn)方法。 首先，我們需要知道，網(wǎng)頁中的div是可以通過id或class進(jìn)行選擇的。假如我們有兩個(gè)div，它們的id分別是“box1”和“box2”。那么在javascript中，我們可以這樣選擇它們：

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");

通過上述代碼，我們就可以獲取到這兩個(gè)div的對象，進(jìn)而對其進(jìn)行操作。比如，我們可以控制它們顯示或隱藏：

box1.style.display = "none"; // 隱藏box1
box2.style.display = "block"; // 顯示box2

接下來，我們需要了解javascript中的事件。事件就是在某個(gè)操作發(fā)生時(shí)，會(huì)觸發(fā)的動(dòng)作。比如，當(dāng)我們點(diǎn)擊某個(gè)按鈕時(shí)就會(huì)觸發(fā)click事件。在javascript中，可以通過addEventListener來綁定事件，舉例如下：

box1.addEventListener("click", function() {
alert("你點(diǎn)擊了box1");
});

上述代碼表示，在box1被點(diǎn)擊時(shí)，瀏覽器會(huì)彈出一個(gè)提示框，顯示“你點(diǎn)擊了box1”。同樣，我們也可以綁定其他的事件，比如鼠標(biāo)移動(dòng)：

box2.addEventListener("mousemove", function() {
console.log("鼠標(biāo)移動(dòng)到了box2");
});

通過console.log輸出信息，可以在瀏覽器的開發(fā)者工具中查看信息。 當(dāng)我們有多個(gè)div需要操作時(shí)，可以將事件綁定到它們的父元素上，再通過事件對象(event)的target屬性獲取到被點(diǎn)擊的div。舉例來說，假如我們有一個(gè)父div(id為“parent”)，下面有兩個(gè)子div(分別為“child1”和“child2”)，我們需要在子div被點(diǎn)擊時(shí)進(jìn)行操作。

var parent = document.getElementById("parent");
parent.addEventListener("click", function(event) {
if(event.target.id == "child1") {
alert("你點(diǎn)擊了child1");
}
if(event.target.id == "child2") {
alert("你點(diǎn)擊了child2");
}
});

上述代碼將click事件綁定到了父div上，通過event.target.id判斷被點(diǎn)擊的div是哪個(gè)，再進(jìn)行不同的操作。 需要注意的是，如果某個(gè)子div有自己綁定的事件，那么在父div中觸發(fā)該事件時(shí)也會(huì)同時(shí)觸發(fā)子div的事件。此時(shí)，可以通過event.stopPropagation()方法來阻止事件的冒泡傳遞。比如：

var child1 = document.getElementById("child1");
child1.addEventListener("click", function(event) {
alert("子div的click事件");
event.stopPropagation(); // 阻止事件冒泡
});

上述代碼表示，在點(diǎn)擊child1時(shí)，會(huì)彈出子div的事件提示，但由于阻止了事件冒泡，不再觸發(fā)父div的事件。 以上就是使用javascript事件來控制多個(gè)div的一些基本實(shí)現(xiàn)方法。當(dāng)然，在實(shí)際開發(fā)中，我們還可以結(jié)合CSS動(dòng)畫、jQuery等其他技術(shù)來實(shí)現(xiàn)更加豐富的交互效果。