Ketahui acara menggelegak untuk mencapai kesan interaktif yang kompleks dengan mudah

master peristiwa yang menggelegak dan mudah mencapai kesan interaktif yang kompleks. menyebarkan kepada elemen induk sehingga ia mencapai elemen akar dokumen. Dengan menguasai prinsip dan aplikasi acara menggelegak, kami boleh melaksanakan kesan interaktif yang kompleks dan meningkatkan pengalaman pengguna dengan mudah. Berikut akan menggunakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan acara menggelegak dengan lebih baik.

Contoh Kod 1: Klik untuk mengembangkan dan meruntuhkan kesan

Struktur HTML:

<div class="container">
    <div class="header">标题</div>
    <div class="content">
        <p>内容</p>
    </div>
</div>

Gaya CSS:

.container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
}
.header {
    background-color: #eee;
    cursor: pointer;
}
.content {
    display: none;
}

Kod JavaScript:

// 获取容器元素
var container = document.querySelector('.container');

// 监听容器元素的点击事件
container.addEventListener('click', function(event) {
    // 判断点击的是标题元素
    if (event.target.classList.contains('header')) {
        // 获取内容元素
        var content = event.target.nextElementSibling;
        
        // 切换内容的显示状态
        if (content.style.display === 'none') {
            content.style.display = 'block';
        } else {
            content.style.display = 'none';
        }
    }
});

Kod di atas melaksanakan klik mudah untuk mengembangkan dan meruntuhkan kesan. Apabila tajuk diklik, keadaan paparan kandungan akan ditukar Melalui acara menggelegak, kita hanya perlu mendengar acara pada elemen kontena untuk mencapai kawalan bersatu bagi semua tajuk.

Kod Contoh 2: Menggunakan perwakilan acara untuk melaksanakan fungsi pemadaman item senarai

Struktur HTML:

<ul class="list">
    <li>列表项1 <span class="delete">删除</span></li>
    <li>列表项2 <span class="delete">删除</span></li>
    <li>列表项3 <span class="delete">删除</span></li>
    <li>列表项4 <span class="delete">删除</span></li>
</ul>

Gaya CSS:

.delete {
    color: red;
    cursor: pointer;
}

Kod JavaScript:

// 获取列表元素
var list = document.querySelector('.list');

// 监听列表元素的点击事件
list.addEventListener('click', function(event) {
    // 判断点击的是删除按钮
    if (event.target.classList.contains('delete')) {
        // 获取点击的列表项
        var listItem = event.target.parentNode;
        
        // 移除列表项
        list.removeChild(listItem);
    }
});

Kod di atas melaksanakan fungsi item senarai yang mudah Apabila butang padam di sebelah item senarai diklik, melalui delegasi acara, kita boleh mendengar acara klik melalui elemen induk, mendapatkan item senarai yang diklik dalam pengendali acara, dan kemudian mengeluarkannya daripada senarai.

Melalui dua contoh kod di atas, kita dapat melihat kuasa acara menggelegak. Menggunakan acara menggelegak, kami boleh memudahkan kod, meningkatkan kecekapan pembangunan dan mencapai kesan interaktif yang kompleks. Selepas menguasai prinsip dan aplikasi acara menggelegak, saya percaya pembaca akan lebih selesa dalam pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Ketahui acara menggelegak untuk mencapai kesan interaktif yang kompleks dengan mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!