JQuery обработка событий

Мы можем запускать программно события с помощью метода jquery trigger(). А вешать события на элементы с помощью метода on()

Например:

$( "#SantaClaus" ).on( "click", function() {
    alert( "Ho-ho");
});
$( "#SantaClaus" ).trigger( "click" );

Триггер вызовет событие — клик по элементу $( «#SantaClaus» ), после этого сработает alert , так как мы привязали к этому событию функцию — обработчик события.

Но с событиями hide()  и show() у нас такое провести по-умолчанию не получится.
Для решения этой задачи мы можем переопределить метод show:

(function ($) {
    $.each(['show', 'hide'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
            this.trigger(ev);
            return el.apply(this, arguments);
        };
    });
})(jQuery);

Что происходит?  Сначала для show, зачем для hide мы через прототип JQuery $.fn переопределяем оба события, так чтобы при их вызове запускался обработчик  (строка 5)
А для того, чтобы вызвать само событие мы используем метод apply(), который мы рассматривали в посте про применение методов apply  и call

Что ж вставляем этот код и проверяем:

Как видите при вызове события show() и hide() срабатывают также и обработчики, которые мы навесили на элемент через метод on().
Что и требовалось сделать.

Хотите быть в курсе новых статей?