Type a keyword and hit enter to start searching. Press Esc to cancel.

Currently Reading | 正在閱讀

Event, Even listener, Event Handler, Event Bubbling and Capturing(Delegation) in Javascript

As a designer, learning javascript is a little bit hard because it takes efforts from the poor logic part of my brain. 🙁

When I was learning Event, Event Handler and other Event related topics, I was so confused with their concepts.

The following is my understanding towards them.

Event

is like something you wanna do. Hence, it comprises of two parts – The subject/object and the action the subject/object is going to be done.

For example, an user might want to click the button on the page. That defines an event, which “the button” is the subject/object

and “click” is the action on the subject/object.

the code might be like this in jQuery

$('item').eventhandler();

both of $(‘item’) and eventhandler() method are comprised as An Event

Event handler

like its literal meaning, the event handler is used to handle event.

A function to execute each time the event is triggered.

For example, click() function is used to handle the subject being clicked

Be remembered, Event handler is actually a fancy name for actions

it is added inside html tag in javascript and in script when using jQuery.

For example,

<h1 onclick="changeText(this)">Click on this text!</h1>   //onclick is the event handler here in javascript
$('.pull-me').click(function(){ });    //click is the event handler here in jQuery

Event listener

like its literal meaning, it listen to the event, which an user click the button, The event listener was fired and the addEventListener method is doing sth.

The addEventListener method are doing the job of attaching event handler to the specified element

the syntax is as followed

element.addEventListener(event, function, useCapture);

the first input(argument) is event like click ( I would prefer called it event handler although it is being called event in the definition of w3school )

the second input is the function, which is something grouped to do the repeated job when the element being handled by event handler like click.

the third input is userCapture, which are related to the topic of Event Bubbling and Event Capturing. Both will be discussed later in this article.

when useCapture is false, it will use the bubbling propagation.

when userCapture is set to true, the event uses the capturing propagation.

Event Bubbling and Event Capture

there are two ways of event propagation in HTML DOM, bubbling and capturing

When event occurs, event propagation defines the element orders, most inner element’s event handle first or the last,

in which case the outer most element handle first.

Bubbling, the inner most element’s handle first, then the outer

capturing, the outer most element’s handle first, then the inner

For example,

you click the div tag which wrap p tag

in the Bubbling case, the p tag are being handled first

in the Capturing case, the div tag are being handled first

What will happen when the event handler are binding to a non-existing html element?

Since every event handler should declare to bind to an element, there are no event or event handler to listen for if it doesn’t exist yet.

In this case, the result will be – the code will never run again 

That’s why event bubbling and delegation come into play.

We can register a “on” event listener (you can think of .on() as a general handler/listener that takes the event, its selector and an action as inputs)

on the parent element, which does exist when DOM is loading.

Therefore, the binding is in place and declared correctly since the parent element exists at the moment.

$('.list').on('click', 'li', function() { $(this).remove(); });

the on event listener is listening to the existing parent element – ul tag with class .list

the event binding is given correctly.

If we keep adding new list element to the empty ul element with class .list, when the list is being clicked,

the click event handler will bubble up to the parent, where the binding exists.

And then the click event handler will be delegated(captured) to the current “li” that was being clicked, which is the current event object – $(this)

That is also the reason why simply use click event handler and $(this) won’t work.

You have to use on(), a general event listener/handler instead!

 

Reference:

 https://javascript.info/tutorial/bubbling-and-capturing

 

 

 

希望我的文章對你有幫助 ^^

Did you learn something from my article? I do hope so.:)

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *