Приоритет, когда более одного обработчика событий привязано к элементу

Когда более одного обработчика событий привязано к элементу, как определяется, какой из них запускается первым?

<script> 
$(function(){
    $(".li").find('input').click(function(){alert('li>input');});
    $(".li").click(function(){alert('li');});
    $('input').click(function(){alert('input');});
});
</script>
</head>

<body>
<ul>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
</ul>
</body>

Ответы

Ответ 1

Если два обработчика событий привязаны к одному и тому же объекту, он будет первым, первым. Первый из них будет выполнен первым.

Но ваш пример выглядит несколько иначе. Похоже, у вас также есть одно событие, связанное с объектом input, а другие - с родительским объектом li. В этом случае сначала произойдет событие, в котором произошло событие (предположительно элемент input в этом случае), а затем событие будет пузыриться до родительских объектов, и они появятся позже.

Если вы хотите остановить пузырь до родителей, вы можете использовать jQuery event.stopPropagation(), и это событие не дойдет до родителей и никогда не запускать их обработчики событий. Это будет выглядеть так:

$('input').click(function(e) {
    e.stopPropagation();
    alert('input');
});

В документации jQuery для stopPropagation() он не останавливает другие обработчики событий на одном и том же объекте, а только обработчики событий на родительских объектах, которые обычно получают событие через пузырьки родительского дерева.

Здесь вы можете увидеть разницу: http://jsfiddle.net/jfriend00/L33aq/

Ответ 2

Я хочу отметить, что правило "Первое пришествие, первая подача" не всегда верно, это также зависит от того, как вы регистрируете обработчик:

Handler1 - $(document).on('click', 'a', function....)
Handler2 - $('a').on('click', function....)

В приведенном выше примере обработчик 2 всегда вызывается перед обработчиком1.

Посмотрите на эту скрипту: http://jsfiddle.net/MFec6/

Ответ 4

но, похоже, отличается если я добавляю событие родительского элемента, тогда он должен сначала позвонить то их дети

если у меня есть событие уровня документа и события внутреннего уровня html