Isabell
asked on
What's the difference between event delegation and event capturing?
I think that I understand these concepts, but
First as I know 'event propagation' is divided into 3 phases:
1. Capture phase
2. Target phase
3. Bubbling phase.
if we have a hierarchy as
Window --> Document --> <html> --> <body> --> <div.container> --> <div.card> --> <div.card-title>,
for example, if we have a click event on card-title, then during Capture phase it will start from Window, executing event handler attached to each element.
And once it comes to card-title, it's entering Target phase. We can use "Capturing" by passing 'true' to addEventListener.
Window --> Document --> <html> --> <body> --> <div.container> --> <div.card> --> <div.card-title>
Bubbling is a default behavior, so when we click 'card-title', it executes event handler that is attached to card-title, but it goes up till Window and execute event handlers that are attached to each element, correct? Window <-- Document <-- <html> <-- <body> <-- <div.container> <-- <div.card> <-- <div.card-title>
So I believe that these are they way you can propagate events.
What I am really clear is the difference between "event capturing" and "event delegation".
In event delegation, we put the event listener to the parent element. Then, it goes down to its children. Like when we put the event handler on ul, that event handler will be executed for all the <li>s under this ul.
However, in here we are not passing 'true' on addEventListener, right?
And children don't have any event handlers attached to them, but somehow, they can use parent event handler.
I am not if "event capturing" and "event delegation" are the same thing.
Can anybody please explain this clearly?
First as I know 'event propagation' is divided into 3 phases:
1. Capture phase
2. Target phase
3. Bubbling phase.
if we have a hierarchy as
Window --> Document --> <html> --> <body> --> <div.container> --> <div.card> --> <div.card-title>,
for example, if we have a click event on card-title, then during Capture phase it will start from Window, executing event handler attached to each element.
And once it comes to card-title, it's entering Target phase. We can use "Capturing" by passing 'true' to addEventListener.
Window --> Document --> <html> --> <body> --> <div.container> --> <div.card> --> <div.card-title>
Bubbling is a default behavior, so when we click 'card-title', it executes event handler that is attached to card-title, but it goes up till Window and execute event handlers that are attached to each element, correct? Window <-- Document <-- <html> <-- <body> <-- <div.container> <-- <div.card> <-- <div.card-title>
So I believe that these are they way you can propagate events.
What I am really clear is the difference between "event capturing" and "event delegation".
In event delegation, we put the event listener to the parent element. Then, it goes down to its children. Like when we put the event handler on ul, that event handler will be executed for all the <li>s under this ul.
However, in here we are not passing 'true' on addEventListener, right?
And children don't have any event handlers attached to them, but somehow, they can use parent event handler.
I am not if "event capturing" and "event delegation" are the same thing.
Can anybody please explain this clearly?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.