JavaScript--事件委托--冒泡

阿新 • • 發佈：2017-10-22

-- order case click pointer list win logs document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            border: 1px solid #ddd;
            cursor: pointer;
        }
    </style>
    <script>
        /**
         *    事件委托：
         *      事件委托添加事件，其實並不是直接添加給目標元素，
         *          而是往往給父元素添加事件，
         *          再通過event.target找到目標元素，
         *          判斷event.target是否為我們要查找的元素，滿足條件執行代碼
         *
         *  
*/
        window.onload = function () {
            var list = document.getElementById(‘list‘);
            /*1) 普通for循環註冊事件*/
            console.time("for循環綁定");
            for(var i = 0 ; i < list.length; i++ ) {
                list.children[i].index = i;
                list.children[i].onclick  
= function () {
                    alert("給到全部li註冊事件"+this.index)
                }
            }
            console.timeEnd("for循環綁定");
            /*  2)   事件委托註冊事件
            *           事件委托綁定事件其實並不是直接綁定給目標元素
            *           而是往往綁定給父元素
            * */
            console.time( 
‘事件委托綁定‘);
            list.onclick = function (event) {
                if(event.target.nodeName.toLowerCase() == "li") {
                    alert("給到全部li註冊事件")
                }
            }
            console.timeEnd("事件委托綁定");
        }
    </script>
</head>
<body>
<ul id="list">
    <li>這個是第001個列表</li>
    <li>這個是第002個列表</li>
    <li>這個是第003個列表</li>
    <li>這個是第004個列表</li>
    <li>這個是第005個列表</li>
    <li>這個是第006個列表</li>
    <li>這個是第007個列表</li>
    <li>這個是第008個列表</li>
    <li>這個是第009個列表</li>
    <li>這個是第010個列表</li>
    <li>這個是第011個列表</li>
    <li>這個是第012個列表</li>
    <li>這個是第013個列表</li>
    <li>這個是第014個列表</li>
    <li>這個是第015個列表</li>
    <li>這個是第016個列表</li>
    <li>這個是第017個列表</li>
    <li>這個是第018個列表</li>
    <li>這個是第019個列表</li>
    <li>這個是第020個列表</li>
    <li>這個是第021個列表</li>
    <li>這個是第022個列表</li>
    <li>這個是第023個列表</li>
    <li>這個是第024個列表</li>
    <li>這個是第025個列表</li>
    <li>這個是第026個列表</li>
    <li>這個是第027個列表</li>
    <li>這個是第028個列表</li>
    <li>這個是第029個列表</li>
    <li>這個是第030個列表</li>
    <li>這個是第031個列表</li>
    <li>這個是第032個列表</li>
    <li>這個是第033個列表</li>
    <li>這個是第034個列表</li>
    <li>這個是第035個列表</li>
    <li>這個是第036個列表</li>
    <li>這個是第037個列表</li>
    <li>這個是第038個列表</li>
    <li>這個是第039個列表</li>
    <li>這個是第040個列表</li>
    <li>這個是第041個列表</li>
    <li>這個是第042個列表</li>
    <li>這個是第043個列表</li>
    <li>這個是第044個列表</li>
    <li>這個是第045個列表</li>
    <li>這個是第046個列表</li>
    <li>這個是第047個列表</li>
    <li>這個是第048個列表</li>
    <li>這個是第049個列表</li>
    <li>這個是第050個列表</li>
    <li>這個是第051個列表</li>
    <li>這個是第052個列表</li>
    <li>這個是第053個列表</li>
    <li>這個是第054個列表</li>
    <li>這個是第055個列表</li>
    <li>這個是第056個列表</li>
    <li>這個是第057個列表</li>
    <li>這個是第058個列表</li>
    <li>這個是第059個列表</li>
    <li>這個是第060個列表</li>
    <li>這個是第061個列表</li>
    <li>這個是第062個列表</li>
    <li>這個是第063個列表</li>
    <li>這個是第064個列表</li>
    <li>這個是第065個列表</li>
    <li>這個是第066個列表</li>
    <li>這個是第067個列表</li>
    <li>這個是第068個列表</li>
    <li>這個是第069個列表</li>
    <li>這個是第070個列表</li>
    <li>這個是第071個列表</li>
    <li>這個是第072個列表</li>
    <li>這個是第073個列表</li>
    <li>這個是第074個列表</li>
    <li>這個是第075個列表</li>
    <li>這個是第076個列表</li>
    <li>這個是第077個列表</li>
    <li>這個是第078個列表</li>
    <li>這個是第079個列表</li>
    <li>這個是第080個列表</li>
    <li>這個是第081個列表</li>
    <li>這個是第082個列表</li>
    <li>這個是第083個列表</li>
    <li>這個是第084個列表</li>
    <li>這個是第085個列表</li>
    <li>這個是第086個列表</li>
    <li>這個是第087個列表</li>
    <li>這個是第088個列表</li>
    <li>這個是第089個列表</li>
    <li>這個是第090個列表</li>
    <li>這個是第091個列表</li>
    <li>這個是第092個列表</li>
    <li>這個是第093個列表</li>
    <li>這個是第094個列表</li>
    <li>這個是第095個列表</li>
    <li>這個是第096個列表</li>
    <li>這個是第097個列表</li>
    <li>這個是第098個列表</li>
    <li>這個是第099個列表</li>
</ul>
</body>
</html>

技術分享

JavaScript--事件委托--冒泡

-- order case click pointer list win logs document <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

javascript事件委托和jQuery事件綁定on、off 和one

作用 clas title 現實調用指定更強 die() 停止一. 事件委托什麽是事件委托？用現實中的理解就是：有100 個學生同時在某天中午收到快遞，但這100 個學生不可能同時站在學校門口等，那麽都會委托門衛去收取，然後再逐個交給學生。而在jQuery 中，我們

JavaScript 事件委托詳解

通過 rdo ole -s list 實現 urn ret parent 基本概念事件委托，通俗地來講，就是把一個元素響應事件（click、focus……）的函數委托到另一個元素；一般來講，會把一個或者一組元素的事件委托到它的父層或者更外層元素上，真正綁定事件的是外層元

JavaScript事件委托原理及Jquery中的事件委托

and 就是傳播 break scrip lock -i 位置 dom 概念事件委托，通俗來說就是將元素的事件委托給它的父級或者更外級元素處理。事件流事件流描述的是從頁面中接收事件的順序。事件冒泡：事件開始由最具體的元素接收，然後逐級向上傳播到較為不具體的節點

javaScript事件委托

數組示例頁面 tor blog 發現種類數 html dom document 一、概念理解：1、事件：HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。比如點擊事件、鼠標移入/移出事件等。事件通常與函數配合使用，這樣就可以通過發生的事件來

JavaScript中冒泡與事件委托

目標 var color ace 函數 prevent 阻止默認行為 tor 事件委托冒泡事件觸發後事件流的三個階段按順序依次是：　　　　1、捕獲階段　　　　2、目標階段　　　　3、冒泡階段大盒子包裹小盒子，兩個盒子都分別添加點擊事件，當點擊小盒

JavaScript事件代理和事件委托

遍歷我們重繪 down 核心 on() his 事件代理 lur 一、概述：　　那什麽叫事件委托呢？它還有一個名字叫事件代理，JavaScript高級程序設計上講：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。那這是什麽意思呢？網上

JavaScript 從入門到放棄（一）事件委托和使用innerHTML添加元素

ont ntb innerhtml col 添加元素 pan div 基本開發一、使用事件委托一個簡單的需求，比如想給ul下面的li加上點擊事件，點擊哪個li，就顯示那個li的innerHTML。這個貌似很簡單！代碼如下！ <!DOCTYPE html>

javascript中的事件委托或是事件代理詳解

開始 reat 事件網上 html 比較移動由於 move 概述：那什麽叫事件委托呢？它還有一個名字叫事件代理，JavaScript高級程序設計上講：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。那這是什麽意思呢？網上的各位大牛們講

事件綁定，事件捕獲，事件冒泡以及事件委托，兼容IE

window t對象找到添加多個 src 階段之前事件監聽 hang ● 事件分為三個階段：事件捕獲 --> 事件目標 --> 事件冒泡 ● 事件捕獲：事件發生時（onclick,onmouseover……）首先發生在document上，然後依

Javascript中的事件委托機制

過程一次我們 over tar for 完成 tel em1 事件委托事件委托，顧名思義，就是將本來要觸發在A元素身上的事件，委托給B元素來觸發，例如像onclick，onmouseover等事件都可以通過事件委托去觸發。事件委托實際上是通過事件冒泡的原理，將事件綁

javascript舉例介紹事件委托的典型使用場景

代碼 eve 了解 console blog ext 點擊 osi cti 在了解什麽是DOM事件以及給DOM事件綁定監聽器的幾種方法後，我們來談談事件委托。1. e.target 和 e.currentTarget當我們給目標元素target 綁定一個事件監聽器targe

淺談JavaScript的事件（事件委托）

沒有 str 方法比較獲取 ack 使用點擊通過　　事件處理程序為Web程序提供了系統交互，但是如果頁面中的事件處理程序太多，則會影響頁面的性能。每個函數都是對象，都會占用內存，內存中對象越多，性能越差。需要事先為DOM對象指定事件處理程序，導致訪問DOM的次數增

事件冒泡，事件捕獲和事件委托

onclick .get function cli ren 技術分享 image html www <div id="parent" onclick="checkCookie()"> <div class="child" id="chil

冒泡事件與事件委托

冒泡事件事件委托 jquery 事件發生:任何一次操作,都會產生相應的事件事件監聽:程序中是寫了代碼對關註事件進行捕捉和處理冒泡事件:子元素觸發的事件會向上傳遞,如果父類有監聽同類型事件,會被激活 <!DOCTYPE html> <html lang="en"> &l

DOM事件機制(事件捕獲和事件冒泡和事件委托)

使用 tar web strong 事件所有 span click ner 內容： 1.事件復習 2.事件冒泡與事件捕獲 3.事件委托 1.事件復習 (1)事件事件是用來處理響應的一個機制，這個響應可以來自於用戶(點擊, 鼠標移動, 滾動), 也可以來自於瀏

js事件流之事件冒泡的應用----事件委托

mouseout 目標呵呵內存占用設計 onload end elements bre 什麽是事件委托？它還有一個名字叫事件代理。 JavaScript高級程序設計上講：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。用取快遞來解

js事件委托

html == logs click copy var over 按鈕 nload 1，什麽是事件委托：通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來

JS 事件綁定、事件監聽、事件委托詳細介紹

兼容性 log 查看 and == 常用提高監聽 live 事件綁定要想讓 JavaScript 對用戶的操作作出響應，首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數，就是處理用戶操作的函數，不同的操作對應不同的名稱。在JavaScript中，有三種常用的

jQuery事件委托

只需要 back nbsp nod function wrap 每一個 document dev 事件委托是通過事件冒泡的原理，利用父級去觸發子級的事件。如下html，如果不用事件委托，將每一個li都去添加click事件監聽，非常麻煩。另外就是如果通過js動態創

JavaScript--事件委托--冒泡

相關推薦