2

I am confused with "Event Listener", "Event Handler", "Event Bubbling" and "Event Capturing" in JavaScript.

I have search in internet and have looked into different website but, I still have problem understanding some differences and even the basic condition.

As this article suggests, the event handler is created and listens for an event.

  • Does it mean that, the JavaScript functions attached to the elements inside the DOM are not event handler and they are event listener?

Also, here I found the differences between "Event bubbling" and "Event capturing". Also, I have read some time ago that in dojo all the events are captured by the <body> tag.

  • Does it mean that there is no JavaScript attached to the rest of the elements inside the DOM?

  • More precisely, is this true that if an event is going to be handled by the parent through "Event Bubbling" there is no need to add listener to the children?

What is the precise definition behind these terms?

Community
  • 1
  • 1
Suo6613
  • 431
  • 5
  • 17
  • As far as I know an event handler is bound once to an item in the dom and an event listener will trigger regardless of whether the dom content was loaded after the listener was bound – kurt Sep 13 '15 at 00:05

1 Answers1

7

Event Handlers / Event Listeners

There's no difference between an Event Listener and an Event Handler - for all practical purposes, they're the same thing. But, it may help to think about them differently:

I can define a single "handler" ...

function myHandler( e ){ alert('Event handled'); }

... and attach it to multiple elements using 'addEventListener':

elementA.addEventListener( 'click', myHandler );
elementB.addEventListener( 'click', myHandler, true );

Or, I can define my "handler" as a closure within 'addEventListener':

elementC.addEventListener( 'click', function( e ){ alert('Event Handled'); } );

Event Capturing / Event Bubbling

You can think of Event Capturing as the opposite of Event Bubbling - or as the two halves of the event lifecycle. DOM elements can be nested (of course). An event first CAPTURES from the outermost parent to the innermost child, and then BUBBLES from the innermost child to the outermost parent.

You may have noticed that in my example above, the listener attached to elementB has an additional parameter - true - that is not passed to elementA. This tells the listener to respond to the event on the CAPTURE phase, whereas it would respond on the BUBBLE phase by default. Try this at jsfiddle.net:

Say we have 3 nested div elements:

<div id="one">
    1
    <div id="two">
        2
        <div id="three">
            3
        </div>
    </div>
</div>

... and we attach a 'click' handler to each:

document.getElementById('one').addEventListener( 'click', function(){ alert('ONE'); } );
document.getElementById('two').addEventListener( 'click', function(){ alert('TWO'); }, true );
document.getElementById('three').addEventListener( 'click', function(){ alert('THREE') } );

If you click '1', you'll see an alert box with the text 'ONE'.

If you click '2', you'll see an alert box 'TWO', followed by an alert box 'ONE' (because 'two' is fired first during the CAPTURE PHASE, and 'one' is fired on the way back up during the BUBBLE PHASE)

If you click '3', you'll see an alert box 'TWO' (CAPTURED), followed by an alert box 'THREE' (BUBBLED), followed by an alert box 'ONE' (BUBBLED).

Clear as mud, right?

Ragdata
  • 1,156
  • 7
  • 16
  • You mean whenever I click on any element I call the handler attached to all its ancestors in bubble phase? I mean, when this bubbling will be stopped? In your example, it will call all the handler until it reaches a parent to which there is nothing attached or until it reaches the body? – Suo6613 Sep 13 '15 at 03:02
  • 1
    Yes, unchecked it will bubble right up to the activating every parent that is listening for the event ... unless you specifically stop it. You might add a 'stopPropogation' call to your handler to stop the event bubbling after you've acted upon it if you don't want it going any further. – Ragdata Sep 13 '15 at 03:18
  • Thank you. Just to confirm! therefore, in your example, if there was no handler attached to div #2, when I clicked on div #3 I would see the alert box "ONE" and then "THREE" since the bubbling passes the parent with no handler attached to it and you have not stopped the bubbling either. Right? – Suo6613 Sep 13 '15 at 03:29
  • and one more question!! What happened if there was nothing attached to div#3? If I click on div #3 which has no event handler, would I be able to see "TWO" and then "ONE"? – Suo6613 Sep 13 '15 at 03:32
  • 1
    If there was no handler attached to #2 and you clicked on #3 you would see "THREE" then "ONE" as these events are being handled on the BUBBLE (inner to outer) and not the CAPTURE (outer to inner). If there was no handler attached to #3 and you click on #3 then yes, you would see "TWO" (CAPTURE) then "ONE" (BUBBLE). – Ragdata Sep 13 '15 at 03:48