web前端入門到實戰(zhàn)：JavaScript事件冒泡與事件委托-創(chuàng)新互聯(lián)

事件冒泡

IE的事件流叫做事件冒泡。顧名思義當事件發(fā)生后，事件就開始從里向外傳播，查看下方代碼：

創(chuàng)新互聯(lián)建站長期為上1000家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為白堿灘企業(yè)提供專業(yè)的成都網站建設、網站制作，白堿灘網站改版等技術服務。擁有10余年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="myDiv"></div>
    </body>
</html>

如果點擊頁面中的 <div> 元素，那么這個 chick 事件就會按照如下順序傳播：

web前端入門到實戰(zhàn)：JavaScript 事件冒泡與事件委托

click 事件在直系DOM 樹的每一級節(jié)點都會發(fā)生（自下而上），直到 document 對象。

事件委托

又稱事件代理。對“事件處理程序過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個父類事件處理程序，就可以管理某一類型的所有子類元素事件。

<ul id="myList">
    <li id="goSth"></li>
    <li id="doSth"></li>
    <li id="sayHi"></li>
</ul>
專門建立的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和需要注意的小細節(jié)，不停更新最新的教程和學習技巧（從零基礎開始到前端項目實戰(zhàn)教程，學習工具，全棧開發(fā)學習路線以及規(guī)劃）

三個<li> 被單擊，按照傳統(tǒng)方式，會給他們單獨添加事件：


    document.getElementById('sayHi').onClick(function(){...})

點擊事件不多的情況下還好，若是所有元素都采用這樣的方式，結果就會有數不清的代碼用于添加事件處理。就好比一萬個人全擠到公司前臺去拿快遞，那場面，蔚為壯觀啊！但是把快遞放到前臺，前臺接收，然后分批次派送，就會舒服很多：


    document.getElementById('myList').onClick(function(ev){
        var e = ev || window.event;
        var target = e.target;
        switch (target.id) {
            case 'goSth':
                ...
                break;
            case 'doSth':
                ...
                break;
            ...
        }
    })

上面是用事件委托的方式，子元素是帶有事件效果的，我們可以發(fā)現，當用事件委托的時候，根本就不需要去遍歷元素的子節(jié)點，只需要給父級元素添加事件就好了，子元素點擊，會通過以事件冒泡的方式激活父元素已添加的相同事件，減少了很多 js 對于 dom 的事件操作，占用更少的內存，這大概是事件委托的精髓所在。

所有用到按鈕的事件（多數鼠標和鍵盤事件）都適合采用事件委托。

當前標題：web前端入門到實戰(zhàn)：JavaScript事件冒泡與事件委托-創(chuàng)新互聯(lián)
本文地址：http://www.rwnh.cn/article0/ceooio.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站制作、商城網站、企業(yè)建站、移動網站建設、云服務器、外貿建站

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

web前端入門到實戰(zhàn)：JavaScript事件冒泡與事件委托-創(chuàng)新互聯(lián)

事件冒泡

事件委托