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

Question

我有几个"事件"类,涵盖了我的一些svg元素.我指定每个类的事件处理程序mouseover和mouseout,如果一个元素有多个类,我想这两个处理器火.我该怎么做呢？看来,当我这样做

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

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

然后,当我将鼠标悬停在具有两个类的元素上时,仅B触发(第二个处理程序),显然是因为它覆盖了第一个.有没有一种方法可以"追加"事件处理程序,而不是重新定义它？

Answer 1

按照文件 ......

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

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

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

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

这具有额外的优势,您可以稍后明确地引用添加的事件处理程序(单独或整个命名空间)来替换或删除它们.