首頁常見問題正文

DOM事件委托的原理和作用是什么?

更新時(shí)間:2023-06-15 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

事件冒泡本身的特性,會(huì)帶來的壞處,也會(huì)帶來的好處,需要我們靈活掌握。生活中有如下場(chǎng)景:

班級(jí)中有100個(gè)學(xué)生, 快遞員有100個(gè)快遞, 如果一個(gè)個(gè)的送花費(fèi)時(shí)間較長(zhǎng)。同時(shí)每個(gè)學(xué)生領(lǐng)取的時(shí)候,也需要排隊(duì)領(lǐng)取,也花費(fèi)時(shí)間較長(zhǎng),何如?

解決方案: 快遞員把100個(gè)快遞,委托給班主任,班主任把這些快遞放到辦公室,同學(xué)們下課自行領(lǐng)取即可。

優(yōu)勢(shì): 快遞員省事,委托給班主任就可以走了。 同學(xué)們領(lǐng)取也方便,因?yàn)橄嘈虐嘀魅巍?/p>

程序中也有如此場(chǎng)景:

<ul>
        <li>知否知否,應(yīng)該有彈框在手</li>
        <li>知否知否,應(yīng)該有彈框在手</li>
        <li>知否知否,應(yīng)該有彈框在手</li>
        <li>知否知否,應(yīng)該有彈框在手</li>
        <li>知否知否,應(yīng)該有彈框在手</li>
  </ul>

點(diǎn)擊每個(gè) li 都會(huì)彈出對(duì)話框,以前需要給每個(gè) li 注冊(cè)事件,是非常辛苦的,而且訪問 DOM 的次數(shù)越多,這就會(huì)延長(zhǎng)整個(gè)頁面的交互就緒時(shí)間。

事件委托也稱為事件代理, 在 jQuery 里面稱為事件委派。

事件委托的原理:不是每個(gè)子節(jié)點(diǎn)單獨(dú)設(shè)置事件監(jiān)聽器,而是事件監(jiān)聽器設(shè)置在其父節(jié)點(diǎn)上,然后利用冒泡原理影響設(shè)置每個(gè)子節(jié)點(diǎn)。

以上案例:給 ul 注冊(cè)點(diǎn)擊事件,然后利用事件對(duì)象的 target 來找到當(dāng)前點(diǎn)擊的 li,因?yàn)辄c(diǎn)擊 li,事件會(huì)冒泡到 ul 上, ul 有注冊(cè)事件,就會(huì)觸發(fā)事件監(jiān)聽器。

事件委托的作用:事件委托中我們只操作了一次 DOM ,便提高了程序的性能。


分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!