Html | Mr.W's Blog

Event flow , capture, bubble and how to stop bubbling

Event Bubbling in JavaScript Event capturing is an event handling mechanism in JavaScript, contrasting with event bubbling. During the capturing phase, an event starts at the root node (usually the document object) and propagates down the DOM tree to the target element, where the event actually took place. The process of event capturing is as follows: Capturing Phase: When an event occurs, it is first captured at the topmost node of the DOM tree, then propagates downwards, level by level, until it reaches the target element. During this phase, only those event listeners set to use capturing mode are triggered. ...

Timer

Javascript timer function can make some code be excueted repeatedly over time. Syntax: // open setInterval(function,interaval-time) // close let t = setInterval(function,interaval-time) clearInterval(t) t: variable interaval-time unit: ms Example: <body> <button class="btn" disabled>aggree(5)</button> <script> const btn = document.querySelector('.btn') let i = 5 let timer = setInterval(function(){ i-- btn.innerHTML = `aggree(${i})` if (i === 0){ clearInterval(timer) btn.disabled = false btn.innerHTML = 'aggree' } },1000) </script> </body>

Control CSS using classList

ClassList can help reduce the redundancy of .style method and resolve the ClassName overwrite risk. Sytax: // add a class element.classList.add('className') // delete a class element.classList.remove('className') // switch a class element.classList.toggle('className') Example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px; height: 200px; color: #333; } .active { color: red; background-color: pink; } </style> </head> <body> <div class="box">text</div> <script> //get element const box = document.querySelector('.box') //change stylew by adding class box.classList.add('active') // delete class box.classList.remove('active') //switch class box.classList.toggle('active') </script> </body> </html> keep in mind that the running logic of toggle is run the detect if the class existed in the element, if yes, delete, if no, add up ...