簡簡單單學習js事件代理

liujs 發布于2019-08-22 10:53 / 2349人閱讀

摘要：事件代理事件委托簡述事件代理就是在我們為一批元素添加事件的時候，可以將事件委托給父元素來觸發事件。代碼如下新添加所以我們需要利用到事件代理因為我們需要兼容，所以我們需要這種兼容的寫法這樣我們就解決了上面的問題。

事件代理（事件委托）

簡述 事件代理就是在我們為一批元素添加事件的時候，可以將事件委托給父元素來觸發事件。 優點

節省內存

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

實例


    
        我是第一個li
        我是第二個li
        我是第三個li
        我是第四個li
        我是第五個li

當我們想為 li標簽添加一個鼠標劃上某一個 li 時改變背景顏色這一事件的時候，我們有許多種方法，我們可以利用css的hover可以實現：

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

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

我們利用 js 為 li標簽添加事件


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

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

云服務器 GPU云服務器事件代理 Javascript事件代理表單單選框 js 事件分發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91397.html

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

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

GitCafe 2019-08-19 17:17 評論0 收藏0
2018年騰訊前端一面總結（面向2019屆學生）

摘要：前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預定時間，這也給了我們這些面試者去準備的時間。其實閉包也就是指有權訪問另一個函數作用域的函數而已。常用的創建閉包的方法就是在函數內部創建另一個函數。前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預定時間，這也給了我們這些面試者去準備的時間。但是也正是因為這種確定性，也有在等待電話的時候的心情的忐忑。背景我是一名大三學生，大一...

Kosmos 2019-08-22 15:17 評論0 收藏0
簡簡單單認識js里的Bom對象

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

CoffeX 2019-08-20 18:53 評論0 收藏0
簡簡單單學習gulp的入門與使用

摘要：的使用首先，我們需要在官網下載插件，地址如下在這個網站我們可以尋找到自己需要的插件以為例，然后在項目下打開命令提示行，輸入以下命令然后我們在里輸入一下代碼引入插件調用插件輸出位置 gulp的入門與使用安裝使用 gulp的入門安裝安裝gulp需要使用到nodo.js,安裝鏈接如下：http://jingyan.baidu.com/arti... 安裝完成之后我們以全局安裝gu...

meteor199 2019-08-22 10:54 評論0 收藏0
React 導讀（三）

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

zzir 2019-08-22 15:35 評論0 收藏0