Don’t go round and round and go straight to the point
Concept
- Propagation (propagation)
- Bubbling (bubbling): refers to going from below the roots to the base of the tree
- Capturing: the intention to go from the base of the tree
- Target : where the DOM element registers an event (href, onclick, scroll, …)
Look at this picture to understand
Event capturing
When we proceed to click a card it will capture from the top level card down
- Capturing :
window -> document -> html -> body -> div#wrap -> p.hint -> a - Target : here is href =’#’
- Bubbling : it goes against capturing
Flow behaves like this after an event – most cases: Capturing > target > bubbling
Event Delegation
Delegation means that when we create an event for the parent class, the inner child classes also receive that event.
1 2 3 4 5 6 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ul</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> taskList <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> 1 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Task 1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> 2 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Task 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> 3 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Task 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ul</span> <span class="token punctuation">></span></span> |
We proceed to attach events to taskList
1 2 3 4 5 6 7 8 | document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'taskList'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">'click'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> event <span class="token punctuation">.</span> target <span class="token punctuation">.</span> tagName <span class="token operator">===</span> <span class="token string">'LI'</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> event <span class="token punctuation">.</span> target <span class="token punctuation">.</span> classList <span class="token punctuation">.</span> value <span class="token punctuation">)</span> <span class="token comment">// Handle the click event on a list item </span> <span class="token comment">// event.target.classList.toggle('completed');</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
If you’re lazy, go here and copy and paste the code quickly, this one has a prompt to type happily, type
clgto console.log(), typedivout full syntax, but if you type a lot it tellsthêm tiền đi em iu: https:// playcode.io/new
When we click any li , it console.log the corresponding class. Authorization – delegation (from parent to child) here means that we only need to attach 1 event to the parent tag. No matter how many li tags inside the event is received.
Event Bubbling
Example 1: There is code as follows
1 2 3 4 5 6 7 8 9 10 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> form</span> <span class="token special-attr"><span class="token attr-name">onclick</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> <span class="token value javascript language-javascript"><span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">'form'</span> <span class="token punctuation">)</span></span> <span class="token punctuation">"</span></span></span> <span class="token punctuation">></span></span> form tag <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token special-attr"><span class="token attr-name">onclick</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> <span class="token value javascript language-javascript"><span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">'div'</span> <span class="token punctuation">)</span></span> <span class="token punctuation">"</span></span></span> <span class="token punctuation">></span></span> div tag <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token special-attr"><span class="token attr-name">onclick</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> <span class="token value javascript language-javascript"><span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">'p'</span> <span class="token punctuation">)</span></span> <span class="token punctuation">"</span></span></span> <span class="token punctuation">></span></span> p tag <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> form</span> <span class="token punctuation">></span></span> |
When we proceed to click the p tag it will alert all p > div > form
When we proceed to click the div tag it will alert all div > form . Then it’s easy to understand.
Clicking on the child means you also click on the parent element!!!
Example 2:
1 2 3 4 5 6 7 8 9 10 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> 1 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> div 1 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> 2 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> div 2 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> 3 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> div 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 | <span class="token keyword">const</span> divs <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">querySelectorAll</span> <span class="token punctuation">(</span> <span class="token string">'div'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// dom hết thẻ div</span> <span class="token keyword">function</span> <span class="token function">logClassName</span> <span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> classList <span class="token punctuation">.</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// log class ra</span> <span class="token punctuation">}</span> divs <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> <span class="token parameter">div</span> <span class="token operator">=></span> div <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">'click'</span> <span class="token punctuation">,</span> logClassName <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
When we click on div3 it logs out 3 -> 2 -> 1 just like the guy above.
event.stopPropagation – stop bubbling
1 2 3 4 5 6 7 | <span class="token keyword">const</span> divs <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">querySelectorAll</span> <span class="token punctuation">(</span> <span class="token string">'div'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">logClassName</span> <span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> event <span class="token punctuation">.</span> <span class="token function">stopPropagation</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// ngăn việc cá hồi bơi ngược dòng</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> classList <span class="token punctuation">.</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> divs <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> <span class="token parameter">div</span> <span class="token operator">=></span> div <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">'click'</span> <span class="token punctuation">,</span> logClassName <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Now click on any div it will only log the class of that div !!!
summary
It’s almost all about Propagation in js. Have a nice day bro.