更新時間:2023-06-15 來源:黑馬程序員 瀏覽量:
事件冒泡本身的特性,會帶來的壞處,也會帶來的好處,需要我們靈活掌握。生活中有如下場景:
班級中有100個學(xué)生, 快遞員有100個快遞, 如果一個個的送花費時間較長。同時每個學(xué)生領(lǐng)取的時候,也需要排隊領(lǐng)取,也花費時間較長,何如?
解決方案: 快遞員把100個快遞,委托給班主任,班主任把這些快遞放到辦公室,同學(xué)們下課自行領(lǐng)取即可。
優(yōu)勢: 快遞員省事,委托給班主任就可以走了。 同學(xué)們領(lǐng)取也方便,因為相信班主任。
程序中也有如此場景:
<ul> <li>知否知否,應(yīng)該有彈框在手</li> <li>知否知否,應(yīng)該有彈框在手</li> <li>知否知否,應(yīng)該有彈框在手</li> <li>知否知否,應(yīng)該有彈框在手</li> <li>知否知否,應(yīng)該有彈框在手</li> </ul>
點擊每個 li 都會彈出對話框,以前需要給每個 li 注冊事件,是非常辛苦的,而且訪問 DOM 的次數(shù)越多,這就會延長整個頁面的交互就緒時間。
事件委托也稱為事件代理, 在 jQuery 里面稱為事件委派。
事件委托的原理:不是每個子節(jié)點單獨設(shè)置事件監(jiān)聽器,而是事件監(jiān)聽器設(shè)置在其父節(jié)點上,然后利用冒泡原理影響設(shè)置每個子節(jié)點。
以上案例:給 ul 注冊點擊事件,然后利用事件對象的 target 來找到當(dāng)前點擊的 li,因為點擊 li,事件會冒泡到 ul 上, ul 有注冊事件,就會觸發(fā)事件監(jiān)聽器。
事件委托的作用:事件委托中我們只操作了一次 DOM ,便提高了程序的性能。
【AI設(shè)計】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設(shè)計連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運營】深圳跨境電商運營畢業(yè)22個工作日,就業(yè)率91%+,最高薪資達(dá)13500元
2025-09-19【AI運維】鄭州運維1期就業(yè)班,畢業(yè)14個工作日,班級93%同學(xué)已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開發(fā)】上海校區(qū)AI鴻蒙開發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開發(fā)-Python】畢業(yè)33個工作日,就業(yè)率已達(dá)到94.55%,班均薪資20763元
2025-09-19【AI智能應(yīng)用開發(fā)-Java】畢業(yè)當(dāng)天offer率91%,薪資1W+占比54.2%,班級均薪12k+
2025-09-19