91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

web前端入門到實戰:JavaScript 事件冒泡與事件委托

發布時間:2020-08-07 23:42:07 來源:網絡 閱讀:249 作者:前端向南 欄目:web開發

事件冒泡

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

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

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

web前端入門到實戰:JavaScript 事件冒泡與事件委托

click 事件 在 直系DOM 樹的每一級節點都會發生(自下而上),直到 document 對象。

事件委托

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

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

三個<li> 被單擊,按照傳統方式,會給他們單獨添加事件:


    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;
            ...
        }
    })

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

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

思南县| 化德县| 磐石市| 三穗县| 定西市| 马公市| 石首市| 大丰市| 河北区| 靖西县| 唐海县| 石台县| 彝良县| 西乡县| 阜城县| 丰城市| 策勒县| 峨山| 长子县| 衡南县| 丘北县| 凤山市| 方正县| 柳林县| 额济纳旗| 高碑店市| 买车| 岐山县| 华阴市| 马山县| 乌拉特前旗| 天祝| 罗源县| 拜泉县| 大港区| 钦州市| 昌黎县| 天门市| 涞水县| 南阳市| 文昌市|