溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

冒泡事件與事件委托

發(fā)布時(shí)間：2020-07-18 22:45:49 來(lái)源：網(wǎng)絡(luò) 閱讀：385 作者：扉亦般先生 欄目：開(kāi)發(fā)技術(shù)

事件發(fā)生:任何一次操作,都會(huì)產(chǎn)生相應(yīng)的事件
事件監(jiān)聽(tīng):程序中是寫(xiě)了代碼對(duì)關(guān)注事件進(jìn)行捕捉和處理

冒泡事件:子元素觸發(fā)的事件會(huì)向上傳遞,如果父類(lèi)有監(jiān)聽(tīng)同類(lèi)型事件,會(huì)被激活

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>冒泡事件</title>
    <style>
        .red{
            width: 400px;
            height: 400px;
            margin: 10px;
            background-color: red;
        }
        .green{
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .blue{
            width: 200px;
            height: 200px;
            background-color:blue;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('.blue').click(function(){
                alert('blue');
            });

            $('.green').click(function(){
                alert('green');
            });

            $('.red').click(function(){
                alert('red');
            });

            $(window).click(function(){
                alert('window');
            });

        })

    </script>
</head>
<body>
    <div class="red">
        <div class="green">
            <div class="blue">
            </div>
        </div>
    </div>    
</body>
</html>

效果如下:
事件冒泡:子元素事件向上傳遞
點(diǎn)擊藍(lán)色方塊--->綠色-->紅色-->window
冒泡事件與事件委托

事件委托:利用冒泡原理,把一些事件集中處理
jquery中使用delegate和 on方法:
使用樣列:
1.
$('獲取父類(lèi)元素').delegate('子元素','事件',function(){
})
2.
$('獲取父類(lèi)元素').on('事件','子元素',function(){
})

<head>
<title>jquery事件的委托</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 事件委托使用delegate, 將子元素事件委托給父類(lèi)元素處理
            // 好處是我們不需要循環(huán)綁定每一個(gè)子元素事件.提升性能
            $('.list').delegate('li','click',function(){

                $(this).css({'color':'red'})
            })

        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手