事件传播及事件代理实例

html&css

发布日期: 2021-11-06

文章字数: 347

阅读时长: 1 分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        div {
            padding: 50px;
        }

        .div1 {
            background-color: violet;
        }

        .div2 {
            background-color: pink;
        }

        .div3 {
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">
            <div class="div3">

            </div>
        </div>
    </div>

    <ul id="emoji">
        <li id="emo1"><a href="http://www.baidu.com">😁</a></li>
        <li>😂</li>
        <li>🤣</li>
        <li>😃</li>
        <li>😄</li>
    </ul>


</body>

<script>


    let div1 = document.querySelector('.div1');
    let div2 = document.querySelector('.div2');
    let div3 = document.querySelector('.div3');
    div1.addEventListener('click', function (e) {
        console.log('div1事件捕获', e.eventPhase);
    }, true)
    div2.addEventListener('click', function (e) {
        console.log('div2事件捕获', e.eventPhase);
    }, true)
    div3.addEventListener('click', function (e) {


        console.log('div3事件捕获', e.eventPhase);

        //会阻止div3的时间冒泡
        // e.stopPropagation()
        e.preventDefault()


    }, true)


    div1.addEventListener('click', function (e) {
        console.log('div1事件冒泡', e.eventPhase);
    })
    div2.addEventListener('click', function (e) {
        console.log('div2事件冒泡', e.eventPhase);
    })
    div3.addEventListener('click', function (e) {
        console.log('div3事件冒泡', e.eventPhase);
        //阻止后续冒泡
        // e.stopPropagation()
    })



    //事件代理（冒泡）
    emoji.addEventListener('click', (event) => {
        console.log(`事件代理${event.eventPhase}`, event.target.innerHTML);

        //阻止默认行为
        event.preventDefault();
    }, false)

    //JQuery可以使用return false
    // $('#emo1').on('click', function (e) {
    //     //jq可以阻止行为和冒泡
    //     return false;
    // })



    // console.log(liNodes);

</script>

</html>