<del id="2gqcw"></del>

簡(jiǎn)簡(jiǎn)單單學(xué)習(xí)js事件代理

liujs 發(fā)布于2019-08-22 10:53 / 2342人閱讀

摘要：事件代理事件委托簡(jiǎn)述事件代理就是在我們?yōu)橐慌靥砑邮录臅r(shí)候，可以將事件委托給父元素來觸發(fā)事件。代碼如下新添加所以我們需要利用到事件代理因?yàn)槲覀冃枰嫒荩晕覀冃枰@種兼容的寫法這樣我們就解決了上面的問題。

事件代理（事件委托）

簡(jiǎn)述 事件代理就是在我們?yōu)橐慌靥砑邮录臅r(shí)候，可以將事件委托給父元素來觸發(fā)事件。 優(yōu)點(diǎn)

節(jié)省內(nèi)存

可以對(duì)所有父元素下的子元素添加事件（包括原有的和后來添加的）

實(shí)例


    
        我是第一個(gè)li
        我是第二個(gè)li
        我是第三個(gè)li
        我是第四個(gè)li
        我是第五個(gè)li

當(dāng)我們想為 li標(biāo)簽添加一個(gè)鼠標(biāo)劃上某一個(gè) li 時(shí)改變背景顏色這一事件的時(shí)候，我們有許多種方法，我們可以利用css的hover可以實(shí)現(xiàn)：

    li{
        background:yellow;
        border-bottom:3px solid blue;
    }
    li:hover{
        background:red;
    }

但是此方法在 ie6 并不適用，由于我們需要兼容所有瀏覽器，所以我們將其棄用，然后我們可以采用 js 方法進(jìn)行實(shí)現(xiàn)：

我們利用 js 為 li標(biāo)簽添加事件


    var lis = document.getElementsByTagName("li");

    for(var i=0,l=lis.length;i

云服務(wù)器 GPU云服務(wù)器事件代理 Javascript事件代理表單單選框 js 事件分發(fā)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91397.html

相關(guān)文章

jQuery入門筆記之（三）事件詳解

摘要：可以傳遞三個(gè)參數(shù)表示一個(gè)或多個(gè)事件類型，比如。表示綁定到指定元素的處理函數(shù)。我們稱它為簡(jiǎn)寫事件。必須在中，并且使用作為事件觸發(fā)元素，不然無效。和表示鼠標(biāo)移入和移出的時(shí)候觸發(fā)。按下返回按下返回和分別表示光標(biāo)激活和丟失，事件觸發(fā)時(shí)機(jī)是當(dāng)前元素。轉(zhuǎn)自個(gè)人博客在JavaScript 有一個(gè)非常重要的功能，就是事件驅(qū)動(dòng)。如果你的網(wǎng)頁需要與用戶進(jìn)行交互的話，就不可能不用到事件。它在頁面完全加...

GitCafe 2019-08-19 17:17 評(píng)論0 收藏0
2018年騰訊前端一面總結(jié)（面向2019屆學(xué)生）

摘要：前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預(yù)定時(shí)間，這也給了我們這些面試者去準(zhǔn)備的時(shí)間。其實(shí)閉包也就是指有權(quán)訪問另一個(gè)函數(shù)作用域的函數(shù)而已。常用的創(chuàng)建閉包的方法就是在函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預(yù)定時(shí)間，這也給了我們這些面試者去準(zhǔn)備的時(shí)間。但是也正是因?yàn)檫@種確定性，也有在等待電話的時(shí)候的心情的忐忑。背景我是一名大三學(xué)生，大一...

Kosmos 2019-08-22 15:17 評(píng)論0 收藏0
簡(jiǎn)簡(jiǎn)單單認(rèn)識(shí)js里的Bom對(duì)象

摘要：里面的對(duì)象是什么是瀏覽器對(duì)象，全拼為都有什么對(duì)象是中的頂級(jí)對(duì)象，所有定義在全局作用域中的變量函數(shù)都會(huì)變成對(duì)象的屬性和方法，在調(diào)用的時(shí)候可以省略。 js里面的Bom對(duì)象 showImg(https://segmentfault.com/img/remote/1460000010691602); Bom是什么？ Bom是瀏覽器對(duì)象，全拼為Browser Object Model Bom都有...

CoffeX 2019-08-20 18:53 評(píng)論0 收藏0
簡(jiǎn)簡(jiǎn)單單學(xué)習(xí)gulp的入門與使用

摘要：的使用首先，我們需要在官網(wǎng)下載插件，地址如下在這個(gè)網(wǎng)站我們可以尋找到自己需要的插件以為例，然后在項(xiàng)目下打開命令提示行，輸入以下命令然后我們?cè)诶镙斎胍幌麓a引入插件調(diào)用插件輸出位置 gulp的入門與使用安裝使用 gulp的入門安裝安裝gulp需要使用到nodo.js,安裝鏈接如下：http://jingyan.baidu.com/arti... 安裝完成之后我們以全局安裝gu...

meteor199 2019-08-22 10:54 評(píng)論0 收藏0
React 導(dǎo)讀（三）

摘要：場(chǎng)景為了更清晰的安排年前年后的工作和值班，現(xiàn)在要對(duì)過年期間人員請(qǐng)假的情況進(jìn)行統(tǒng)計(jì)，并且進(jìn)行一個(gè)簡(jiǎn)單的管理。我們現(xiàn)在來訂閱一個(gè)名為的事件，用來表示表格中需要展示每條數(shù)據(jù)。前言 React 導(dǎo)讀（一）React 導(dǎo)讀（二）在之前 2 篇文章中中學(xué)習(xí)到了寫第一個(gè) Web 組件以及常用的生命周期函數(shù)的使用，這篇文章將繼續(xù)之前的目錄，開始新的知識(shí)點(diǎn)補(bǔ)充： [x] React 如何編寫 He...

zzir 2019-08-22 15:35 評(píng)論0 收藏0