Home/ Questions/Q 7043079
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:14:44+00:00

When more than one event handler is bound to an element, how is it

  • 0

When more than one event handler is bound to an element, how is it determined which one is triggered first?

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If two event handlers are bound to the exact same object, it would be first come, first serve. The first one attached will execute first.

    But, your example looks a bit different. It looks like you also have one event bound to the input object and others to the parent li object. In that case, the one where the event actually originated (presumably the input element in this case) will occur first and then the event will bubble up to the parent objects and they will occur later.

    If you want to stop the bubbling up to the parents, you can use jQuery’s event.stopPropagation() and the event will not reach the parents and never trigger their event handlers. That would look like this:

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

    Per the jQuery documentation for stopPropagation(), it does not stop other event handlers on the same object, only event handlers on parent objects that would normally get the event via bubbling up the parent tree.

    You can see the difference here: http://jsfiddle.net/jfriend00/L33aq/

    • 0