javascript - Memberikan sebuah elemen lebih dari satu pengendali acara dengan memilihnya menggunakan selektor yang berbeda

Saya memiliki beberapa kelas "event" yang mencakup beberapa elemen svg saya. Saya menugaskan setiap kelas sebuah event handler untuk mouseover dan mouseout, dan jika sebuah elemen memiliki lebih dari satu kelas, saya ingin kedua handler tersebut dijalankan. Bagaimana saya melakukan ini? Tampaknya ketika saya melakukannya

d3.selectAll(".a-class")
    .on("mouseover", function() {
        // do A
    })
    .etc();

d3.selectAll(".another-class")
    .on("mouseover", function() {
        // do B
    })
    .etc();

kemudian ketika saya mengarahkan kursor ke elemen yang memiliki kedua kelas, hanya B (penangan kedua) yang dijalankan, tampaknya karena menimpa yang pertama. Apakah ada metode untuk "menambahkan" sebuah event handler, daripada mendefinisikannya ulang?

Jawaban #1

Sesuai dengan dokumentasi...

Jika sebuah pendengar peristiwa sudah terdaftar untuk tipe yang sama pada elemen yang dipilih, pendengar yang ada akan dihapus sebelum pendengar baru ditambahkan. Untuk mendaftarkan beberapa pendengar untuk tipe peristiwa yang sama, tipe tersebut dapat diikuti dengan namespace opsional, seperti "click.foo" dan "click.bar".

Oleh karena itu Anda dapat mencapai apa yang Anda inginkan dengan menambahkan namespace sembarang ke setiap handler Anda.

d3.selectAll(".a-class")
    .on("mouseover.a", function() {
        // do A
    })
    .etc();

d3.selectAll(".another-class")
    .on("mouseover.b", function() {
        // do B
    })
    .etc();

Ini memiliki keuntungan tambahan bahwa Anda kemudian dapat merujuk secara eksplisit ke handler peristiwa yang ditambahkan nanti (baik secara individual atau untuk seluruh namespace) untuk mengganti atau menghapusnya.