Допустим, у нас есть следующая структура документа:
<body> <div> <button>Жми</button> </div> </body>
Таким образом, у нас трехуровневая структура: на самом высоком уровне - элемент body, ниже - элемент div, и в самом низу - элемент button. Теперь добавим для каждого последовательно обработчики нажатия:
$('button').bind('click', function(e){
console.log('Событие инициировал элемент ' + e.target.tagName);
console.log('Событие обрабатывается для элемента ' + e.currentTarget.tagName);
});
$('div').bind('click', function(e){
console.log('Событие инициировал элемент ' + e.target.tagName);
console.log('Событие обрабатывается для элемента ' + e.currentTarget.tagName);
});
$('body').bind('click', function(e){
console.log('Событие инициировал элемент ' + e.target.tagName);
console.log('Событие обрабатывается для элемента ' + e.currentTarget.tagName);
});
Итак, если мы нажмем на кнопку, то сработает не только собственно обработчик кнопки, но и обработчики выше лежащих уровней. Так как нажатие на кнопку - это в то же время нажатие и на элемент div и на элемент body, так как кнопка находится внутри них. Произойдет всплытие событие. То есть с каждым уровнем выше будут просматриваться обработчики события click и, если они имеются, они будут вызываться.
Однако мы можем запретить всплытие. Например, нам надо, чтобы срабатывал только обработчик нажатия кнопки. В этом случае нам надо применить метод
stopPropagation:
$('button').bind('click', function(e){
console.log('Событие инициировал элемент ' + e.target.tagName);
console.log('Событие обрабатывается для элемента ' + e.currentTarget.tagName);
e.stopPropagation();
});
Теперь обработчики вышележащих уровней не будут задействованы.