javascript - 将某个类添加/删除到任何标签时，如何附加事件？

Question

假设我有一个名为“foo”的 CSS 类。

我想要两个事件处理程序： - 当“foo”作为一个类添加到任何标签时，第一个事件处理程序将被触发 - 当“foo”作为一个类从任何标签中删除时，第二个事件处理程序将被触发

我怎样才能做到这一点？

先感谢您。

Answer 1

没有跨浏览器事件可以做到这一点。

如果您的代码总是添加/删除该类，只需编写一个包装函数来执行此操作，然后使用它而不是.addClass/ .removeClass。

或者（我并没有积极建议），你可以换行.addClass和.removeClass：

var realAddClass = jQuery.fn.addClass;
jQuery.fn.addClass = function() {
    // Fire some event here
    return realAddClass.apply(this, arguments);
};

......但这真的很麻烦。

当然，最后两个建议都假设添加/删除类的唯一方法是通过 jQuery。

Answer 2

这个 jsfiddle展示了我将如何去做

    // create a list of classes that you want to handle add and/or remove actions
    var classesThatIWantToFireAnEventFor = [
        {class: 'foo', add: false, remove: true },
        {class: 'bar', add: true, remove: true }
    ];

    // create the event handlers for each scenario
    var HandlesClassRemoved = function() {
        // implementation goes here
         alert('Running custom "removeClass" handler for css class .foo');
    };

    // create the event handlers for each scenario
    var HandlesClassAdded = function() {
        // implementation goes here
             alert('Running custom "addClass" handler for css class .foo');
    };

    var originalAddClass = jQuery.fn.addClass;
    var originalRemoveClass = jQuery.fn.removeClass;

    // override jquery's add class
    jQuery.fn.addClass = function(){
        // Execute the original method.
        originalAddClass.apply(this, arguments);

        // check in the arguments if the class you want to handle 'add' is added
        for(var i=0;i<=arguments.length;i++) {
            var c = arguments[i];
            $(classesThatIWantToFireAnEventFor).each(function() {
                if((this.class === c) && (this.add)) {
                // if it is and your list has a 'add' flag, call the handler method
                    HandlesClassAdded();
                }
            });
        }
    };

    // override jquery's add class
    jQuery.fn.removeClass = function(){
        // Execute the original method.
        originalRemoveClass.apply(this, arguments);

        // check in the arguments if the class you want to handle 'add' is added
        for(var i=0;i<=arguments.length;i++) {
            var c = arguments[i];
            $(classesThatIWantToFireAnEventFor).each(function() {
                if((this.class === c) && (this.remove)) {
                // if it is and your list has a 'add' flag, call the handler method
                    HandlesClassRemoved();
                }
            });
        }
    };
    ​

在 jsfiddle.net 上查看

Answer 3

我认为您需要将事件处理程序委托给这些标签，因为在任何项目上切换类.foo都将被视为动态元素。

$('#parent').on('click', '.foo', function() {
  alert('class is foo');
});

$('#parent').on('mouseover', ':not(.foo)', function() {
  alert('class is foo');
});

这#parent是一个选择器，其中包含元素.foo或不没有的元素.foo。您可能有其他容器并且需要更改它们。

这里。:not(.foo)将应用于所有没有 class 的元素.foo，因此最好class对这些元素使用其他元素。