Пусть у нас есть такая разметка
|
1 2 3 4 5 6 |
... <button id="bind">bind</button> <button id="on">on</button> <button id="delegate">delegate</button> <button id="one">one</button> ... |
Далее, посмотрим на варианты обработки событий с помощью jquery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(function(){ //bind $('#bind').bind('click',function(){ alert('it is a bind method, now it will be unbinded'); $('#bind').unbind(); }); //on $('#on').on('click',function(){ alert('it is a bind method, now it will be off'); $('#on').off(); }); //delegate $('body').delegate('#delegate','click',function(){ alert('it is a delegate method, now it will be undelegated'); $('body').undelegate('#delegate','click'); }); //one $('#one').one('click',function(){alert('it is one function, it will work one time');}); }); |
Также существует объект Event, который также можно обрабатывать. Важным моментом является обработка всплытий событий, когда элемент находится внутри других элементов, а также метод trigger, который позволяет в ручную вызывать обработчики.