javascript event bubbling and capturing code example

Example 1: how to prevent event capturing in javascript

how to prevent event button click capturing to tag/div/icon
easiest way OPTION 1 with CSS:
button > * {
  pointer-events: none;
}

OPTION 2 with javascript:
use e.currentTarget.children ;

OPTION 3 with Javascript:
use e.target.closest('selector') to locate the child, not e.currentTarget;

Example 2: 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 3: 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;
}