通过使用不同的选择器选择元素，为元素提供多个事件处理程序

Giving an element more than one event handler by selecting it using different selectors

本文关键字：元素 程序 事件处理 选择 选择器      更新时间：2023-10-05

我有几个"event"类，涵盖了我的一些svg元素。我为每个类分配一个mouseover和mouseout的事件处理程序，如果一个元素有多个类，我希望两个处理程序都激发。我该怎么做？当我做的时候

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

然后，当我将鼠标悬停在一个同时具有两个类的元素上时，只有B（第二个处理程序）会触发，显然是因为它覆盖了第一个。有没有一种方法可以"附加"事件处理程序，而不是重新定义它？

根据文档。。。

如果已在选定元素上为相同类型注册了事件侦听器，则在添加新侦听器之前，将删除现有侦听器。要为同一事件类型注册多个侦听器，该类型后面可以跟一个可选的名称空间，如"click.foo"answers"click.bar"。

因此，您可以通过向每个处理程序附加一个任意名称空间来实现所需的功能。

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

这还有一个额外的优点，即以后可以显式引用添加的事件处理程序（单独引用或针对整个命名空间引用）来替换或删除它们。

相关文章：