Встановлення та відключення обробника подій. Програмний запуск події

.on() - метод встановлення обробників подій. Введений в 1.7. Поєднує в собі функціональність .bind(), .live(), .delegate(). Починаючи з 1.7 ці три методи вважаються застарілими
.off() - відміна обробника події, що встановлений за допомогою .on ()
.one() - встановлює обробник події на один раз
.trigger() - дозволяє для елемента програмно запустити подію

Приклади

Метод встановлення обробників подій

Так само можна встановити будь-яку іншу можливу подію для вибраного елементу

 $('.tt').on('click',function(){
	   $(this).css('border','3px solid red');
 });

/* на місці #fornew може бути батьківський елемент 
вищого рівня - document, 'body', ... */
 $('#fornew').on('click','.newb', function(){
	         $(this).css('border','3px solid red');
 });

Метод відміняє обробника події, що встановлена за допомогою .on ()

Для приклада вище - відміняємо 'click' встановлений .on(). Завантажте новий блок, перевірте 'click', а потім відмініть 'click' для натупного нового завантаженого блоку

$('#btnoff').click(function(){
          $('#fornew').off('click','.newb');
 });

Встановлює обробника аналогічно .on(), але подія встановлена на один раз

Кліком по кнопці можемо добавити тільки один новий блок.

$('#btnone').one('click',function(){
	   $('#fornew1').append('<div></div>');
 });

Програмно запускає код події для іншого елементу і це виглядає так, ніби на елемент вплинули безпосередньо - викликаються події браузера для цього елементу (якщо вони є), наприклад, відправка submit, або стилі для елемента.

Кліком по кнопці можемо запустити подію click для вкладеного блоку .tb

/* подія для блоку .tb*/
 $('.tb').click (function(){
	           $(this).css('border','3px solid red');
 });
 /* програмний запуск click для  .tb*/
 $('#btnt').click(function(){
          $('.tb').trigger('click');
 });

$( "p" ).click(function( event, a, b ) {
   // при звичайному клікі, a и b дорівнють undefined
   // при ручному виклику, вони будуть відповідати "par1" та "par2"
 })
 .trigger( "click", [ "par1", "par2" ] );
 

Програмно запускає код події (записаний всередені) для іншого елементу, але не викликає події браузера для цього елементу.

Різниця між .trigger() та .triggerHandler()

$( "#inp1" ).focus(function(){  
	    $(this).fadeOut(500).fadeIn(500); 
 });

 #inp1:focus {
 	border: 2px solid red;
 }

Клік по кнопці "button1 - .trigger()" буде виглядати візуально ніби і справді клікнули в input - виконається і код, і подія браузера - надання червоного бордеру. Клік по кнопці "button2 - .triggerHandler()" виконає лише код, записаний для input.

 $( "#button1" ).click(function() { 
	    $( "#inp_trig" ).trigger( "focus" ); 
	  });
	  
 $( "#button2" ).click(function() { 
	    $( "#inp1" ).triggerHandler( "focus" ); 
	  });