Event Handlers and Listeners & Event Bubbling and Event Capturing
Question
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?
1 answers
solution1
7 ACCPTED 2015-09-13 01:12:19
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.