2. 程式人生 > >javascript-委託事件(事件代理)

javascript-委託事件(事件代理)

阿新 • • 發佈：2019-01-05

1.什麼是委託事件？

委託事件也叫做事件代理意思是一樣的,就好像精靈圖也叫 雪碧圖!!!只是不同叫法.
試想一下:假設公司裡每次收快遞的時候員工都跑到公司門口去收自己的快遞,如果同時多個人也同樣去收自己快遞這樣公司就秩序混輪了!如果委託給前臺妹子去收快遞然後由妹子去派發快遞這個過程就叫委託事件!(備註:冒泡思想也有點相仿只不過是由父節點往子節點傳遞資訊)

2.javascript委託事件的例子

1.通過冒泡事件來形象理解委託思想

<!DOCTYPE html>
<html>
    <head>
        <meta charset
 
='UTF-8'>
        <title>原生委託事件</title>
        <style type='text/css'>
            ul{background:#f40}
            ul li {background: #ccc;}
        </style>
    </head>
    <body>
        <ul id='ul'>
            <li>11312</li>
            <li>
 
23213</li>
            <li>33123</li>
        </ul>
        <button id='oBtn'>新增節點</button>
    </body>
    <script type='text/javascript'>
        var elm=document.getElementById('ul');
        //引發冒泡事件
        elm.onclick=function(eve){
        let evevts=eve||window.event;
        let
 
 ev=events.target||events.srcElements;
            alert(ev.nodeName.toLowerCase())
        }
    </script>
</html>

2.IE相容:window.event.srcElement而其他瀏覽器使用window.event.target

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>原生委託事件</title>
        <style type='text/css'>
            ul{background:#f40}
            ul li {background: #ccc;}
        </style>
    </head>
    <body>
        <ul id='ul'>
            <li>11312</li>
            <li>23213</li>
            <li>33123</li>
        </ul>
        <button id='oBtn'>新增節點</button>
    </body>
    <script type='text/javascript'>
        var elm=document.getElementById('ul');
        elm.onclick=function(event){
            var eve=event||window.event;
            //獲取到使用者點選中的dom結構體
            var targer=event.target||event.srcElement;
            //targer.nodeName.toLowerCase()獲取到節點
            if(targer.nodeName.toLowerCase()=='li'){
                alert(targer.innerHTML);//獲取結構裡面的引數
            }   
        }
    </script>
</html>

3.委託事件存在的問題

如果從dom中新增節點會出現問題,使用getElementsByTagName先進行對li遍歷然後對遍歷過的li進行了事件繫結然後再生成新的li節點然後發現這些新增的節點會沒有綁到事件.

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>原生委託事件</title>
        <style type='text/css'>
            ul{background:#f40}
            ul li {background: #ccc;}
        </style>
    </head>
    <body>
        <ul id='ul'>
            <li>11312</li>
            <li>23213</li>
            <li>33123</li>
        </ul>
        <button id='oBtn'>新增節點</button>
    </body>
    <script type='text/javascript'>
        var elm=document.getElementById('ul');
        var oBtn=document.getElementById('oBtn');
        var val=0;
        //新增元素
        var  lis=elm.getElementsByTagName('li');
        for(var i=0;i<lis.length;i++){
            lis[i].onmouseover=function(){
                this.style.background='red';
            }
            lis[i].onmouseout=function(){
                this.style.background='blue';
            }
        }
        //新新增的節點沒觸發到滑鼠移動事件
        oBtn.onclick=function(){
            val++;
            var oLi=document.createElement('li');
            oLi.innerHTML=666+val;
            elm.appendChild(oLi);
        }
    </script>
</html>

3.1解決方法

1.給公共的事件起個方法名字,當誰想要用到它就呼叫這個公共方法名

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>原生委託事件</title>
        <style type='text/css'>
            ul{background:#f40}
            ul li {background: #ccc;}
        </style>
    </head>
    <body>
        <ul id='ul'>
            <li>11312</li>
            <li>23213</li>
            <li>33123</li>
        </ul>
        <button id='oBtn'>新增節點</button>
    </body>
    <script type='text/javascript'>
        var elm=document.getElementById('ul');
        var oBtn=document.getElementById('oBtn');
        var val=0;
        //新增元素
        var  lis=elm.getElementsByTagName('li');
        function hover(){
            for(var i=0;i<lis.length;i++){
                lis[i].onmouseover=function(){
                    this.style.background='red';
                }
                lis[i].onmouseout=function(){
                    this.style.background='blue';
                }
            }
        }
        //新新增的節點也觸發了滑鼠移動時的事件了
        oBtn.onclick=function(){
            val++;
            var oLi=document.createElement('li');
            oLi.innerHTML=666+val;
            elm.appendChild(oLi);
            hover();//老子呼叫hover方法了
        }
    </script>
</html>

2.將事件都變成一個個小小的功能模組自己專職去做自己的事情

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title>原生委託事件</title>
        <style type='text/css'>
            ul{background:#f40}
            ul li {background: #ccc;}
        </style>
    </head>
    <body>
        <ul id='ul'>
            <li>11312</li>
            <li>23213</li>
            <li>33123</li>
        </ul>
        <button id='oBtn'>新增節點</button>
    </body>
    <script type='text/javascript'>
        var elm=document.getElementById('ul');
        var oBtn=document.getElementById('oBtn');
        var val=0;
        //新增元素
        var  lis=elm.getElementsByTagName('li');
        elm.onmouseover=function(event){
            var ev=event||window.event;
            var eve=ev.target||ev.srcElement;
            if(eve.nodeName.toLowerCase() == 'li'){
                eve.style.background='red';
            }
        }
        elm.onmouseout=function(event){
            var ev=event||window.event;
            var eve=ev.target||ev.srcElement;
            if(eve.nodeName.toLowerCase() == 'li'){
                eve.style.background='blue';
            }
        }
        //新新增的節點沒繫結委託
        oBtn.onclick=function(){
            val++;
            var oLi=document.createElement('li');
            oLi.innerHTML=666+val;
            elm.appendChild(oLi);

        }
    </script>
</html>

4.場景

適合用事件委託的事件：click，mousedown，mouseup，keydown，keyup，keypress。
不適合委託:focus，blur之類的，本身就沒用冒泡的特性

5.JQuery

1.on(繫結事件),off(用來移除事件繫結)
1.1on

function myHandler(event) {  
alert(event.data.foo);  
}  
$('p').on('click', {foo: 'bar'}, myHandler)

1.2off

$('body').off('click', 'p', foo);

2.live(方法為被選元素附加一個或多個事件處理程式，並規定當這些事件發生時執行的函式。)
地址:http://www.w3school.com.cn/jquery/event_live.asp
3.bind(同時繫結多個事件型別,同時繫結多個事件型別/處理程式,)
4.delegate(為了突破單一.bind()方法的侷限性，實現事件委託)

$('#info_table').delegate('td','click',function(){/*顯示更多資訊*/});

4.1 undelegate(移除delegate的繫結)
5.one(只執行一次)

相關推薦

javascript-委託事件(事件代理)

1.什麼是委託事件？ 委託事件也叫做事件代理意思是一樣的,就好像精靈圖也叫 雪碧圖!!!只是不同叫法. 試想一下:假設公司裡每次收快遞的時候員工都跑到公司門口去收自己的快遞,如果同時多個人也同樣去收自己快遞這樣公司就秩序混輪了!如果委託給前臺妹子去收快遞然後

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

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

理解Javascript中的事件繫結與事件委託（轉載）

最近在深入實踐js中，遇到了一些問題，比如我需要為動態建立的DOM元素繫結事件，那麼普通的事件繫結就不行了，於是通過上網查資料瞭解到事件委託，因此想總結一下js中的事件繫結與事件委託。 事件繫結 最直接的事件繫結：HTML事件處理程式 如下示例程式碼，通過節點屬性顯式宣

JS中的事件委託（事件代理）

一步一步來說說事件委託（或者有的資料叫事件代理） js中事件冒泡我們知道，子元素身上的事件會冒泡到父元素身上。 事件代理就是，本來加在子元素身上的事件，加在了其父級身上。 那就產生了問題：父級那麼多子元素，怎麼區分事件本應該是哪個子元素的？ 答案是：event物件裡記錄的有“事件源”，它就

JavaScript中的事件代理

首先，事件有三個階段：捕獲、目標、冒泡（不瞭解的自行搜尋）。 那麼，當我需要給ul下1000個li都要繫結點選事件，應該用for迴圈遍歷？答案當然no。就算可以，但是你要明白，這麼做是要承擔足夠大的效能風險，因為首先你得用getElementByTagName("li")

深刻理解事件委託或者事件代理

概述： 事件委託 是利用事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件。優勢（去快遞事件，新員工）。 原因： 在js中，新增到頁面上的事件處理程式數量關係到頁面的整體執行效能，用for迴圈遍歷所有li，給他們新增事件，不斷與dom節點進

關於JavaScript中的事件代理

今天面試某家公司Web前端開發崗位，前面的問題回答的都還算湊活，並且又問了一下昨天面試時做的一道陣列去重問題的解題思路（關於陣列去重問題，可以觀賞我前幾天寫的：http://www.cnblogs.com/craftsman-gao/p/4766223.html。幸好前幾

js中的事件委託或是事件代理詳解

起因： 1、這是前端面試的經典題型，要去找工作的小夥伴看看還是有幫助的； 2、其實我一直都沒弄明白，寫這個一是為了備忘，二是給其他的知其然不知其所以然的小夥伴們以參考； 概述： 那什麼叫事件委託呢？它還有一個名字叫事件代理，JavaScript高階程式設計上講：事件委託就是利用事件冒泡，只指定一個事件

js事件委託（事件代理）

起因： 1、這是前端面試的經典題型，要去找工作的小夥伴看看還是有幫助的； 2、其實我一直都沒弄明白，寫這個一是為了備忘，二是給其他的知其然不知其所以然的小夥伴們以參考； 概述： 那什麼叫事件委託呢？它還有一個名字叫事件代理，JavaScript高階程式設計上講：事

例項分析JavaScript中的事件委託和事件繫結

　我們在學習JavaScript中，難免都會去網上查一些資料。也許偶爾就會遇到“事件委託”（也有的稱我“事件代理”，這裡不評論誰是誰非。以下全部稱為“事件委託”），尤其是在查JavaScript的事件處理的時候。但是，大多數時說的是“事件繫結”，對於“事件委託”，或是

JavaScript中的事件委託機制跟深淺拷貝

今天聊下JavaScript中的事件委託跟深淺拷貝 # 一、事件委託 ## 首先呢，介紹一下事件繫結 ```html //方法一：通過onclick 點選 //方法二：通過addEventListener 點選 ``` 說下其中的區別 onclick只能繫結一個事件，而addEventListen

【JavaScript】讓事件支持先發布後訂閱

class 問題 想要 png trigger 很快 9.png area ++ 之前寫過一個的事件管理器，就是普通的先訂閱後發布模式。但實際場景中我們需要做到後訂閱的也能收到發布的消息。比如我們關註微信公眾號，還是能看到歷史消息的。類似於qq離線消息，我先發給你，你登錄了

JavaScript HTML DOM 事件

pan 代碼 inner date load ntb 用戶 按鈕 scrip 對事件做出反應 我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。 如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代

CSS偽類選擇器active模擬JavaScript點擊事件

css一、說明設置元素在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式。IE7及更早瀏覽器只支持a元素的:active，從IE8開始支持其它元素的:active。另：如果需要給超鏈接定義：訪問前，鼠標懸停，當前被點擊，已訪問這4種偽類效果，而又沒有按照一致的書寫順序，不同的瀏覽器可能會有不同的表現。超鏈

JavaScript筆記5-事件

沒有 執行指定 load 新的 產生 lur 所有 鼠標移出 段落 一.概述: 事件是可以被JavaScript偵測到的行為。網頁中的每個元素都可以產生某些可以觸發JavaScript函數的事件。相當於讓標簽在滿足某種條件的時候,調用指定的方法. 二.常用事件 1:onl

JavaScript學習——JS事件總結

單擊 png 鼠標移動 方式 比較 chang 使用 購物網站 bmi 回顧之前已經使用過的事件 (onsubmit、onclick、onload、onfocus、onblur、onmouseover、onmouseout) onfocus/onblur：聚焦離焦事件，用

javascript自定義事件

事件模型 java 鼠標 nbsp .com org .org spa detail javascript自定義事件 Javascript中的事件包括click、mouseover、submit、change等等，它們分別在元素被點擊、鼠標滑過、表單提交、域的

javascript中的事件問題的總結

att list 原型鏈 font n) 交互 函數 onclick 定義 一.什麽是事件？ 　　事件就是DOM和瀏覽器之間的交互行為(只要觸發了這個行為，也就相當於觸發了事件)，我們可以通過事件監聽來綁定事件，例如：box.onclick=function(){}，如果我

JavaScript HTML DOM事件

splay nbsp onload style blog div 提交 cookies cti HTML DOM 使javaScript有能力對HTML事件作出反應。 HTML事件的例子： 當用戶點擊鼠標時 當網頁已加載時 當圖像已加載時 當鼠標移動到元素上時 當輸入字段

javaScript--Dom 二級事件

add 區別 dom query selector document 程序 () 例子 1、Dom2級事件定義了兩個方法，用於處理指定刪除事件處理程序事件：addEventListener() 和 removeEventListener()。 2、這兩個方法有三個參數，（處