JQuery $(window).blur vs native window.onblur

В чем преимущества использования jQuery

$(window).blur(function() { ... })

чтобы связать обработчик событий с настройкой его непосредственно с помощью

window.onblur = function() { ... }

Похоже, что последний менее надежный, поскольку он поддерживает только один обработчик размытия, а при использовании с другими пакетами другой код может переопределить значение window.blur другой функцией. Однако не могло ли это также произойти и с реализацией jQuery, которая предположительно использует window.blur как свою базовую реализацию?

EDIT: Несколько человек также упомянули альтернативу window.addEventListener, которую можно использовать для добавления события 'onblur', кроме описанных выше методов.

Ответ 1

$(window).blur(function() { ... })

Позволяет добавить один или несколько обработчиков событий.

window.onblur = function() { ... }

У вас есть только один обработчик событий, обрабатывающий событие размытия.

Первый использует механизм обработки событий jQuery. Вызов .blur() будет делегировать jQuery.fn.on(), который, в свою очередь, будет делегировать jQuery.event.add. Этот метод add() создаст свой собственный обработчик для данного типа события и сообщит addEventListener() для вызова этого обработчика всякий раз, когда запускается событие данного типа. Таким образом, в основном у jQuery есть собственный способ обработки событий, который полагается на addEventListener() для правильного выполнения.

Последний - это просто атрибут, который может содержать только одно значение, поэтому обработчики событий в очереди невозможны.

Я написал небольшую демонстрацию, чтобы доказать этот момент: http://jsfiddle.net/GnNZm/1/

Ответ 2

С помощью jQuery-метода вы можете присоединить несколько обработчиков событий. Установив window.onblur, вы можете иметь только один обработчик.

Pure JavaScript также имеет следующее: window.addEventListener(). На самом деле, я уверен, что jQuery использует это внутренне. (Да, они делают.)

(РЕДАКТИРОВАТЬ) Свойство window.onblur в основном является ярлыком для установки одного обработчика. Использование addEventListener() (или обертки jQuery) в основном создает список обработчиков событий, которые все запускаются, когда происходит событие. Я не тестировал, но думаю, что вы можете использовать их вместе. Поскольку это список, а не одно значение, несколько обработчиков не должны мешать друг другу. Их также можно удалить отдельно или сразу.

Обработчики событий jQuery, используя on(), также позволяют вам помещать ваши обработчики, чтобы предотвратить столкновения, если плагин удаляет свои обработчики. Pure JS, похоже, не так легко.

Ответ 3

Для размытия jquery

Событие размытия не пузырится в Internet Explorer. Следовательно, скрипты, которые полагаются на делегирование событий с событием размытия, не будут работать последовательно в браузерах. Однако, начиная с версии 1.4.2, jQuery работает вокруг этого ограничения, сопоставляя размытие с фокусом событие в своих методах делегирования событий .live() и .delegate().

взято из jquery doc https://api.jquery.com/blur/

Также jquery позволяет связывать несколько обработчиков событий

Ответ 4

Когда вы присоединяете событие, существует возможность перезаписать событие, уже прикрепленное к обработчику событий. Это часто случалось с window.onload(), где разные сценарии перезаписывали обработчики событий друг друга.

например:

//lightbox.js
window.onload = function() { /* do lightbox stuff */ }

//carousel.js 
window.onload = function() { /* do carousel stuff */ }

Таким образом, обычная практика была примерно такой:

var existing_event_handlers = window.onload;
window.onload = function(){

    //my event code
    alert('onready fired');

    //call other event handlers after
    existing_event_handlers();
}

Использование window.onblur = function() { ... } по-прежнему имеет преимущество, потому что вы можете специально диктовать, если вы хотите, чтобы ваше событие срабатывало до или после других вложенных событий.

Как и многие другие ответы, уже упомянутые jQuery абстрагируют вас от большинства различий в браузере. Версия до IE9 использовала attachEvent(), а не addEventListener().