event bubbling and capturing w3schools code example

Example 1: javascript onclick event listener

document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});

Example 2: event listener javascript

const element = document.querySelector(".class__name");

element.addEventListener("click", () => {
	console.log("clicked element");
});

Example 3: javascript eventlistener

document.addEventListener('click', () => {
    
});

Example 4: event listener javascript

document.querySelector('div').addEventListener('click', () => {
  console.log('div clicked');
});

Example 5: what is event bubbling in javascript with example

<div>1
    <div>2
        <div>3
            <div>4
                <div>5</div>
            </div>
        </div>
    </div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>

Example 6: what is event bubbling in javascript with example

p {
    line-height: 0;
}

div {
    display:inline-block;
    padding: 5px;

    background: #fff;
    border: 1px solid #aaa;
    cursor: pointer;
}

div:hover {
    border: 1px solid #faa;
    background: #fdd;
}