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

事件冒泡

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

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

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

如果點(diǎn)擊頁(yè)面中的 <div> 元素，那么這個(gè) chick 事件就會(huì)按照如下順序傳播：

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

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

事件委托

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

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

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


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

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


    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ā)現(xiàn)，當(dāng)用事件委托的時(shí)候，根本就不需要去遍歷元素的子節(jié)點(diǎn)，只需要給父級(jí)元素添加事件就好了，子元素點(diǎn)擊，會(huì)通過以事件冒泡的方式激活父元素已添加的相同事件，減少了很多 js 對(duì)于 dom 的事件操作，占用更少的內(nèi)存，這大概是事件委托的精髓所在。

所有用到按鈕的事件（多數(shù)鼠標(biāo)和鍵盤事件）都適合采用事件委托。

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

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

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

猜你還喜歡下面的內(nèi)容