Не ограничено одним событием ready ()
Важно помнить, что вы можете объявить столько событий custom ready() сколько захотите. Вы не можете прикрепить одно событие .ready() к документу. События ready() выполняются в том порядке, в котором они включены.
Примечания: Передача функции jQuery, функция — например, jQuery(funciton(){//code here}) — является ярлыком для jQuery(document).ready() .
Присоединение / удаление событий с помощью bind () и unbind ()
Используя метод bind() — например, jQuery('a').bind('click',function(){}) — вы можете добавить любой из следующих стандартных обработчиков к соответствующим элементам DOM.
-
blur -
focus -
load -
resize -
scroll -
unload -
beforeunload -
click -
dblclick -
mousedown -
mouseup -
mousemove -
mouseover -
mouseout -
change -
select -
submit -
keydown -
keypress -
keyup -
error
Очевидно, что, основываясь на стандартах DOM, только определенные обработчики совпадают с конкретными элементами.
В дополнение к этому списку стандартных обработчиков вы также можете использовать bind() для присоединения пользовательских обработчиков jQuery — например, mouseenter и mouseleave — а также любых пользовательских обработчиков, которые вы можете создать.
Чтобы удалить стандартные обработчики или пользовательские обработчики, мы просто передаем методу unbind() имя обработчика или имя настраиваемого обработчика, которое необходимо удалить — например, jQuery('a').unbind('click') . Если никакие параметры не переданы unbind() , он удалит все обработчики, прикрепленные к элементу.
Эти только что обсужденные концепции выражены в примере кода ниже.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<input type=»text» value=»click me»>
<br>
<br>
<button>remove events</button>
<div id=»log» name=»log»></div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Bind events
$(‘input’).bind(‘click’, function () { alert(‘You clicked me!’); });
$(‘input’).bind(‘focus’, function () {
// alert and focus events are a recipe for an endless list of dialogs
// we will log instead
$(‘#log’).html(‘You focused this input!’);
});
// Unbind events
$(‘button’).click(function () {
// Using shortcut binding via click()
$(‘input’).unbind(‘click’);
$(‘input’).unbind(‘focus’);
// Or, unbind all events // $(‘button’).unbind();
});
})(jQuery);
</body>
</html>
|
Примечания: jQuery предоставляет несколько ярлыков для метода bind() для использования со всеми стандартными событиями DOM, что исключает пользовательские события jQuery, такие как mouseenter и mouseleave . Использование этих ярлыков просто подразумевает подстановку имени события в качестве имени метода — например .click() , mouseout() , focus() .
Вы можете прикрепить неограниченное количество обработчиков к одному элементу DOM, используя jQuery.
jQuery предоставляет метод обработки событий one() для удобного связывания события с элементами DOM, которые будут выполнены один раз, а затем удалены. Метод one() — это просто оболочка для bind() и unbind() .
Программно вызывать определенный обработчик с помощью коротких методов событий
Синтаксис ярлыков — например, .click() , mouseout() и focus() — для привязки обработчика событий к элементу DOM также можно использовать для программного вызова обработчиков. Для этого просто используйте метод события ярлыка, не передавая ему функцию. Теоретически это означает, что мы можем привязать обработчик к элементу DOM и затем немедленно вызвать этот обработчик. Ниже я продемонстрирую это с помощью события click() .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<a>Say Hi</a>
<!— clicking this element will alert «hi» —>
<a>Say Hi</a>
<!— clicking this element will alert «hi» —>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Bind a click handler to all <a> and immediately invoke their handlers
$(‘a’).click(function () { alert(‘hi’) }).click();
// Page will alert twice.
// is triggered for each <a> in the wrapper set.
})(jQuery);
</body>
</html>
|
Примечания: Также можно использовать метод trigger() события trigger() для вызова определенных обработчиков — например, jQuery('a').click(function(){ alert('hi') }).trigger('click') . Это также будет работать с пространством имен и пользовательскими событиями.
jQuery нормализует объект события
jQuery нормализует объект события в соответствии со стандартами W3C. Это означает, что когда объект события передается в обработчик функции, вам не нужно беспокоиться о реализации объекта события в браузере (например, window.event Internet Explorer). Вы можете использовать следующие атрибуты и методы объекта события без проблем из-за различий в браузере, поскольку jQuery нормализует объект события.
Атрибуты объекта события
-
event.type -
event.target -
event.data -
event.relatedTarget -
event.currentTarget -
event.pageX -
event.pageY -
event.result -
event.timeStamp
Методы объекта события
-
event.preventDefault() -
event.isDefaultPrevented() -
event.stopPropagation() -
event.isPropagationStopped() -
event.stopImmediatePropagation() -
event.isImmediatePropagationStopped()
Чтобы получить доступ к нормализованному объекту события jQuery, просто передайте анонимную функцию, переданную методу события jQuery, параметр с именем «событие» (или как вы хотите его вызывать). Затем внутри функции анонимного обратного вызова используйте параметр для доступа к объекту события. Ниже приведен закодированный пример этой концепции.
|
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(window).load(function (event) { alert(event.type); });
})(jQuery);
</body>
</html>
|
Пространство имен Grokking
Часто в DOM у нас будет объект, которому нужно привязать несколько функций к одному обработчику событий. Например, давайте возьмем обработчик изменения размера. Используя jQuery, мы можем добавить столько функций в обработчик window.resize сколько захотим. Но что происходит, когда нам нужно удалить только одну из этих функций, но не все из них? Если мы используем $(window).unbind('resize') , все функции, прикрепленные к обработчику window.resize будут удалены. resize.unique пространство имен обработчиком (например, resize.unique ), мы можем назначить уникальный хук конкретной функции для удаления.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(window).bind(‘resize’, function ()
{ alert(‘I have no namespace’);
$(window).bind(‘resize.unique’, function () { alert(‘I have a unique namespace’); });
// Removes only the resize.unique function from event handler
$(window).unbind(‘resize.unique’)
})(jQuery);
</body>
</html>
|
В приведенном выше коде мы добавляем две функции в обработчик изменения размера. Второе добавленное событие изменения размера (порядок документов) использует пространство имен события, а затем немедленно удаляет это событие с помощью unbind() . Я сделал это для того, чтобы первая прикрепленная функция не была удалена. События пространства имен дают нам возможность маркировать и удалять уникальные функции, назначенные одному и тому же обработчику в одном элементе DOM.
В дополнение к отмене привязки конкретной функции, связанной с одним элементом и обработчиком DOM, мы также можем использовать пространство имен событий для эксклюзивного вызова (с помощью trigger() ) определенного обработчика и функции, прикрепленной к элементу DOM. В приведенном ниже коде два события щелчка добавляются в <a>, а затем с использованием пространства имен вызывается только одно.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<a>click</a>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘a’).bind(‘click’,
function () { alert(‘You clicked me’) });
$(‘a’).bind(‘click.unique’,
function () { alert(‘You Trigger click.unique’) });
$(‘a’).trigger(‘click.unique’);
})(jQuery);
</body>
</html>
|
Примечания: Нет ограничений по глубине или количеству используемых пространств имен — например, resize.layout.headerFooterContent .
Пространство имен — это отличный способ защиты, вызова, удаления любых эксклюзивных обработчиков, которые могут потребоваться плагину.
Пространство имен работает как с пользовательскими событиями, так и со стандартными событиями — например, click.unique или myclick.unique .
Делегация событий в Гроккинге
Делегирование событий опирается на распространение событий (или пузырьков). Когда вы щелкаете <a> внутри <li> , который находится внутри <ul> , событие щелчка поднимает DOM от <a> до <li> до <ul> и так далее, пока каждый элемент-предок с функцией, назначенной обработчику события, срабатывает.
Это означает, что если мы прикрепим событие click к <ul> а затем <a> , инкапсулированному внутри <ul> , в конечном итоге будет вызван обработчик кликов, прикрепленный к <ul> , из-за всплывающего сообщения. Когда он вызывается, мы можем использовать объект события ( event.target ), чтобы определить, какой элемент в DOM фактически вызвал всплывание события. Опять же, это даст нам ссылку на элемент, который начал барботирование.
Делая это, мы можем добавить обработчик событий ко многим элементам DOM, используя только один обработчик / объявление события. Это чрезвычайно полезно; например, таблица с 500 строками, где для каждой строки требуется событие щелчка, может использовать делегирование события. Изучите код ниже для уточнения.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<ul>
<li><a href=»#»>remove</a></li>
<li><a href=»#»>remove</a></li>
<li><a href=»#»>remove</a></li>
<li><a href=»#»>remove</a></li>
<li><a href=»#»>remove</a></li>
<li><a href=»#»>remove</a></li>
</ul>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘ul’).click(function (event) { // Attach click handler to <ul> and pass event object
// event.target is the <a>
$(event.target).parent().remove();
return false;
});
})(jQuery);
</body>
</html>
|
Теперь, если вам нужно было буквально щелкнуть одну из действительных позиций списка, а не саму ссылку, угадайте, что? В итоге вы удалите <ul> . Почему? Потому что все щелчки пузырь. Поэтому, когда вы нажимаете на маркер, event.target — это <li> , а не <a> . Поскольку это так, метод parent() захватит <ul> и удалит его. Мы могли бы обновить наш код так, чтобы мы удаляли <li> при щелчке по нему из <a> , передавая методу parent() выражение элемента.
|
1
|
$(event.target).parent(‘li’).remove();
|
Важным моментом здесь является то, что вам нужно тщательно управлять тем, что нажимается, когда область, по которой можно щелкнуть, содержит несколько инкапсулированных элементов, потому что вы никогда не знаете точно, где пользователь может щелкнуть. Из-за этого вы должны убедиться, что щелчок произошел с того элемента, который вы ожидали.
Применение обработчиков событий к элементам DOM независимо от обновлений DOM с помощью live ()
Используя удобный метод live() , вы можете привязать обработчики к элементам DOM, которые в настоящее время находятся на веб-странице, и тем, которые еще не добавлены. Метод live() использует делегирование событий, чтобы убедиться, что вновь добавленные / созданные элементы DOM всегда будут реагировать на обработчики событий независимо от манипуляций DOM или динамических изменений в DOM. Использование live() по сути является ярлыком для ручной настройки делегирования события. Например, используя live() мы можем создать кнопку, которая создает другую кнопку на неопределенный срок.
|
01
02
03
04
05
06
07
08
09
10
11
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<button>Add another button</button>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘button’).live(‘click’, function ()
{ $(this).after(«<button>Add another button</button>»);
})(jQuery);
</body>
</html>
|
После изучения кода должно стать очевидным, что мы используем live() для применения делегирования события к родительскому элементу (элементу <body> в примере кода), чтобы любой элемент кнопки, добавленный в DOM, всегда реагировал на обработчик нажатия.
Чтобы удалить событие live, мы просто используем метод die() например $('button').die() .
Концепция, которую нужно убрать — это метод live() который можно использовать для присоединения событий к элементам DOM, которые удаляются и добавляются с помощью AJAX. Таким образом, вам не придется перепривязывать события к новым элементам, введенным в DOM после начальной загрузки страницы.
Примечания: live() поддерживает следующие обработчики: click , dblclick , mousedown , mouseup , mousemove , mouseover , mousemove , mousemove , mousemove , mousemove .
live() работает только против селектора.
live() по умолчанию остановит распространение, используя return false в функции, отправленной методу live() .
Добавление функции к нескольким обработчикам событий
В метод bind() можно передать несколько обработчиков событий. Это позволяет прикрепить одну и ту же функцию, написанную один раз, ко многим обработчикам. В приведенном ниже примере кода мы прикрепляем одну анонимную функцию обратного вызова к обработчикам событий click, keypress и resize в документе.
|
01
02
03
04
05
06
07
08
09
10
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Responds to multiple events
$(document).bind(‘click keypress resize’, function (event) { alert(‘A click, keypress, or resize event occurred on the document.’); });
})(jQuery);
</body>
</html>
|
Отмена поведения браузера по умолчанию с protectDefault ()
При щелчке ссылки или отправке формы браузер вызывает функции по умолчанию, связанные с этими событиями. Например, нажмите ссылку <a> и веб-браузер попытается загрузить значение атрибута <a> href в текущем окне браузера. Чтобы preventDefault() браузеру выполнять функции такого типа, вы можете использовать метод preventDefault() объекта нормализованного события jQuery.
|
01
02
03
04
05
06
07
08
09
10
11
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<a href=»http://www.jquery.com»>jQuery</a>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Stops browser from navigating
$(‘a’).click(function (event) { event.preventDefault(); });
})(jQuery);
</body>
</html>
|
Отмена распространения события с помощью stopPropagation ()
События распространяются (или пузырь) вверх по DOM. Когда обработчик события запускается для любого данного элемента, вызываемый обработчик события также вызывается для всех элементов-предков. Такое поведение по умолчанию облегчает такие решения, как делегирование событий. Чтобы запретить это stopPropagation() умолчанию, вы можете использовать метод нормализованного события jQuery stopPropagation() .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div><span>stop
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘div’).click(function (event) {
// Attach click handler to <div>
alert(‘You clicked the outer div’);
});
$(‘span’).click(function (event) {
// Attach click handler to <span>
alert(‘You clicked a span inside of a div element’);
// Stop click on <span> from propagating to <div>
// If you comment out the line below,
//the click event attached to the div will also be invoked
event.stopPropagation();
});
})(jQuery);
</body>
</html>
|
В приведенном выше примере кода обработчик события, присоединенный к элементу <div> , не будет запущен.
Отмена поведения по умолчанию и распространения событий с помощью return false
Возвращение false — например, return false — эквивалентно использованию и preventDefault() и stopPropagation() .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<!DOCTYPE html>
<html lang=»en»>
<body><span><a href=»javascript:alert(‘You clicked me!’)» class=»link»>click me</a>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){ $(‘span’).click(function(){
// Add click event to <span>
window.location=’http://www.jquery.com’;
$(‘a’).click(function(){
// Ignore clicks on <a>
return false;
});
})(jQuery);
</body>
</html>
|
Если вы закомментируете оператор return false в приведенном выше коде, то будет вызвана alert() , потому что по умолчанию браузер выполнит значение href . Кроме того, страница перейдет на jQuery.com из-за всплывающих событий.
Создание пользовательских событий и запуск их через триггер ()
С jQuery у вас есть возможность создавать свои собственные пользовательские события, используя метод bind() . Это делается путем предоставления методу bind() уникального имени для пользовательского события.
Теперь, поскольку эти события являются пользовательскими и не известны браузеру, единственный способ вызвать пользовательские события — это программно вызвать их, используя метод trigger() jQuery. Изучите приведенный ниже код для примера пользовательского события, которое вызывается с помощью trigger() .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div>jQuery</div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘div’).bind(‘myCustomEvent’, function () {
// Bind a custom event to <div>
window.location = ‘http://www.jquery.com’;
});
$(‘div’).click(function () {
// Click the <div> to invoke the custom event
$(this).trigger(‘myCustomEvent’);
})
})(jQuery);
</body>
</html>
|
Клонирование событий, а также элементов DOM
По умолчанию, клонирование структур DOM с использованием метода clone() дополнительно не клонирует события, связанные с клонируемыми элементами DOM. Чтобы клонировать элементы и события, присоединенные к элементам, вы должны передать методу clone() логическое значение true .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<button>Add another button</button>
<a href=»#» class=»clone»>Add another link</a>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘button’).click(function () {
var $this = $(this);
$this.clone(true).insertAfter(this);
// Clone element and its events
$this.text(‘button’).unbind(‘click’);
});
$(‘.clone’).click(function () {
var $this = $(this);
$this.clone().insertAfter(this);
$this.text(‘link’).unbind(‘click’);
});
})(jQuery);
</body>
</html>
|
Получение X и Y координат мыши в окне просмотра
mousemove событие mousemove ко всей странице (документу), вы можете получить координаты X и Y указателя мыши, когда он перемещается внутри области просмотра по холсту. Это делается путем извлечения свойств pageY и pageX объекта нормализованного события jQuery.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(document).mousemove(function (e) {
// e.pageX — gives you the X position
// e.pageY — gives you the Y position
$(‘body’).html(‘e.pageX = ‘ + e.pageX + ‘, e.pageY = ‘ + e.pageY);
});
})(jQuery);
</body>
</html>
|
Получение координат X и Y мыши относительно другого элемента
Часто бывает необходимо получить координаты X и Y указателя мыши относительно элемента, отличного от области просмотра или всего документа. Обычно это делается с помощью всплывающих подсказок, где всплывающая подсказка отображается относительно места, где наведена мышь. Это может быть легко достигнуто путем вычитания смещения относительного элемента из координат мыши X и Y области просмотра.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<!— Move mouse over div to get position relative to the div —>
<div style=»margin: 200px; height: 100px; width: 100px; background: #ccc; padding: 20px»>
relative to this </div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){ $(‘div’).mousemove(function(e){
//relative to this div element instead of document
var relativeX = e.pageX — this.offsetLeft;
var relativeY = e.pageY — this.offsetTop;
$(this).html(‘releativeX = ‘ + relativeX + ‘, releativeY = ‘ + relativeY);
});
})(jQuery);
</body>
</html>
|