Event Bubbling

 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Bubbling</title>
    <link rel="stylesheet" href="EventBubbling.css">
</head>
<body>
    <div>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>

</ul>
    </div>
    <script src="EventBubbling.js"></script>
</body>
</html>

CSS

div{
    height: 400px;
width: 500px;
background-color: pink;
}
ul{
    background-color: blue;
}
li{
    background-color: greenyellow;
}

JS

let div = document.querySelector("div");
let ul = document.querySelector("ul");
let lis = document.querySelectorAll("li");

div.addEventListener("click", function () {
  console.log("div clicked");
});
ul.addEventListener("click", function () {
  console.log("ul clicked");
});

for (li of lis) {
  li.addEventListener("click", function () {
    console.log("list clicked");
  });
}

AFTER StopPropogation
let div = document.querySelector("div");
let ul = document.querySelector("ul");
let lis = document.querySelectorAll("li");

div.addEventListener("click", function (event) {
    event.stopPropagation();
  console.log("div clicked");
});
ul.addEventListener("click", function (event) {
    event.stopPropagation();
  console.log("ul clicked");
});

for (li of lis) {
  li.addEventListener("click", function (event) {
    event.stopPropagation();
    console.log("list clicked");
  });
}






Comments

Post a Comment

Popular posts from this blog

Callback Hell

Image
      < h1 > call Hell Demo </ h1 > let h1 = document . querySelector ( "h1" ); function changeColor ( color , delay , NextchangeColor ) {   setTimeout (() => {     h1 . style . color = color ;     if ( NextchangeColor ) NextchangeColor ();   }, delay ); } changeColor ( "red" , 1000 ,() => {     changeColor ( "blue" , 1000 ,() => {         changeColor ( "orange" , 1000 ,() => {             changeColor ( "green" , 1000 ,() => {                 changeColor ( "yellow" , 1000 );             })         })     }) });
Read more

TODO list with DOM

Image
 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > TODO List with DOM </ title > </ head > < body >     < h1 > TODO List </ h1 >     < input placeholder = "Enter Task" >     < button > Add Task </ button >     < ul >         < li > Eat < button class = "delbtn" > delete </ button ></ li >         < li > Sleep < button class = "delbtn" > delete </ button ></ li >     </ ul >     < script src = "TODOwithDOM.js" ></ script > </ body > </ html > JS let btn = document . querySelector ( "button" ); let inp = document . querySelector ( "input" ); let ul = do...
Read more

Refactoring callback hell code

Image
  let h1 = document . querySelector ( "h1" ); function changeColor ( color , delay ) {   return new Promise (( resolve , reject ) => {     setTimeout (() => {       h1 . style . color = color ;       resolve ( "color changed" );     }, delay );   }); } changeColor ( "red" , 1000 )   . then (() => {     console . log ( "Color changed to Red" );     return changeColor ( "orange" , 1000 );   })   . then (() => {     console . log ( "color changed to orange" );     return changeColor ( "green" , 1000 );   })   . then (() => {     console . log ( "color changed to green" );     return changeColor ( "blue" , 1000 );   })   . then (() => {     console . log ( "color changed to blue" );   });
Read more