javascript - 创建适用于任何选择器的自定义事件

Question

假设我有一个毫无意义的脚本，它会在单击元素时更改元素的背景颜色:

$(".foo").on("change.color", function() {
  $(this).css("background-color", "red");
});

$(".foo").click(function() {
  $(this).trigger("change.color");
});

目前它仅适用于 .foo 元素，因为这一行:

$(".foo").on("change.color", function() { ... }

问题是如何转换上面的行以使其与我以后希望使用的任何选择器一起使用，例如:

$(any_selector_here).click(function() {
  $(this).trigger("change.color");
});

Answer 1

您可以将 foo className 添加到 any_selector_here

$(document).on("change.color", ".foo", function() { });

$(selectors).addClass("foo");

这将允许您删除特定元素的className，从而将事件监听器与这些元素分离

$(any_selector_here).removeClass("foo");