1. Делегирование события. Необходим, когда у вас имеются динамические манипуляции с контентом. Такие конструкции, как правило, более производительны, т.к. событие навешивается один раз на родительский элемент. Может не сработать, если у вас прерывается всплытие(об этом забывать нельзя):
<body>
<div class='no-bubble'>
<p class='click-target'></p>
</div>
</body>
// клик по .click-target не сработает никогда!
$('body').on('click','.click-target', function(){
// do something...
});
$('body').on('click','.no-bubble', function(e){
e.stopPropagation();
});
2 и 3 работают аналогично друг другу, но за небольшим исключением:
$('#id').click();
// не равносильно:
$('#id').on('click');
// а работает как:
$('#id').trigger('click');
// т.е. не навешивает обработчик клика, а эмулирует клик по объекту.
А кроме того, 1 и 2 варианты позволяют делать так:
$('id').on('click mouseover mouseout', function(e) {
if (e.type === 'click') {
// обработать клик...
} else if (e.type === 'mouseover') {
// ну принцип понятен, да?..
}
});
