2. 程式人生 > >javascript事件代理

javascript事件代理

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

在程式設計中，如果我們不想或不能夠直接操縱目標物件，我們可以利用delegate建立一個代理物件來呼叫目標物件的方法，從而達到操縱目標物件的目的。毋庸置疑，代理物件要擁有目標物件的引用。我們來看一下javascript的一個最簡單實現：

vardelegate =function(client,clientMethod ){
returnfunction() {returnclientMethod.apply(client,arguments); }
}
varagentMethod = delegate(client, client.method )
agentMethod();
 
<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script type="text/javascript">
      var ClassA = function(){
        var _color = "red";
        return {
          getColor : function(){
            document.write("<p>ClassA的例項的私有屬性_color目前是<span style='color:"+_color+"' >"+_color+"</span></p>");
          },
          setColor:function(color){
            _color = color;
          }
        };
      };
      var delegate = function (client,clientMethod ){
        return function() { return clientMethod.apply(client,arguments); }
      }
      window.onload = function(){
        var a = new  ClassA();
        a.getColor();
        a.setColor("green");
        a.getColor();
        //alert(a._color);
        document.write("<p>執行代理！</p>")
        var d = delegate(a,a.setColor);
        d("blue");
        document.write("<p>執行完畢！</p>")
        a.getColor();
      };
    </script>
    <title>delegate</title>
  </head>
  <body>
  </body>
</html>



或者我們改變一下第二個引數，傳個字串進去：

vardelegate =function(client,clientMethod ){
returnfunction() {returnclient[clientMethod].apply(client,arguments); }
}
/****************略*******************/
vard = delegate(a,"setColor");

我們還可以搞一些很好玩的東西，下面的例子取自一個日本部落格。

<script type="text/javascript">
     Function.prototype.delegate = function(delegateFor){
    return delegateFor.apply(null, arguments);
};

var Hoge = function(){
    this.open = function (){
        return 'this is Hoge#open';
    };
    this.close = function (){
        return 'this is Hoge#close';
    };
};
var Foo = function (){
    this.name = 'foo';
    this.open = function (){
        return 'this is Foo#open';
    };
    this.close = function (){
        return 'this is Foo#close';
    };
};

var hoge = new Hoge;
var foo = new Foo;

alert(hoge.open()); // this is Hoge#open
alert(hoge.open.delegate(foo.open)); // this is Foo#open
alert(foo.open.delegate(hoge.open)); // this is Hoge#open
</script>

由於delegate實現目標物件的隱藏，這對於我們保護一些核心物件是非常有用的。不過，說實在javascript的delegate基本算是call與apply的傀儡，因為js中只有這2個方法提供了改變當前函式內部this作用域的功能。不過，要實現對類的委託而不是例項的委託，這就複雜得多。Prototype.js，YUI與JQuery都有相應的實現。具體自己可去參考它們的原始碼。接著下來，我將講述delegate在事件上的應用，這可是個無以倫比的東東，就是改變偵聽器的位置（改變事件的繫結物件）。或者說，它得益於javascript獨特的事件傳播機制，因此實現起來非常容易，大家要好好執行它，我以前也在富文字編輯器中用過。

$.addEvent(colorPicker,'click',function(){
vare = arguments[0] || window.event,
td = e.srcElement ? e.srcElement : e.target,
nn = td.nodeName.toLowerCase();
if(nn =='td'){
varcmd = colorPicker.getAttribute("title");
varval = td.bgColor;
_format(cmd,val);
e.cancelBubble =true;
colorPicker.style.display ='none';
}
});

上面就是我在富文字編輯器擷取前景色與背景色的程式碼，注意，我是把事件繫結在顏色面板上，而不是面板上的那一個個格子上。為了直觀起見，便於大家操作，我改用下面這個例子：

現在我們要點選列表中連結，取出裡面的內容，傳統的方法，我們需要遍歷新增所有a元素：

window.onload =function(){
varnav = document.getElementById("nav");
varlinks = nav.getElementsByTagName("a");
for(vari=0,l = links.length; i<l; i++) {
links[i].onclick =function() {
alert(this.innerHTML);
returnfalse;
}
}
} 
<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style type="text/css">
      body{background:#fff;}
      a { color:#8080C0;text-decoration:none;border-bottom:2px solid #fff;}
      a:hover {color:#336699;border-bottom-color:#B45B3E;}
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var nav = document.getElementById("nav");
        var links = nav.getElementsByTagName("a");
        for (var i=0,l = links.length; i <l; i++) {
          links[i].onclick = function () {
            alert(this.innerHTML);
            return false; 
          }
        }
      }    
    </script>
    <title>delegate</title>
  </head>
  <body>
    <ul id="nav">
      <li><a href="http://www.cnblogs.com/">部落格園</a></li>
      <li><a href="http://www.w3school.com.cn/">W3School</a></li>
      <li><a href="http://study.163.com/">網易雲課堂</a></li>
      <li><a href="http://www.willspace.cn/">WILLSpace</a></li>
      <li><a href="http://blog.csdn.net/willspace/">CSDN_WILLSpace</a></li>
    </ul>
  </body>
</html>


新的方法，用nav代理了它下面所有元素，讓它負責大家的onclick事件，包括它自己的，也不管是否為a元素，所以有時我們需要做一些判斷，但少了遍歷DOM樹，效率明顯提高。

window.onload =function(){
varnav = document.getElementById("nav");
nav.onclick =function() {
vare = arguments[0] || window.event,
target = e.srcElement ? e.srcElement : e.target;
alert(target.innerHTML);
returnfalse;
}
} 
 
<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style type="text/css">
      body{background:#fff;}
      a { color:#8080C0;text-decoration:none;border-bottom:2px solid #fff;}
      a:hover {color:#336699;border-bottom-color:#B45B3E;}
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var nav = document.getElementById("nav");
        nav.onclick = function () {
          var e = arguments[0] || window.event,
          target = e.srcElement ? e.srcElement : e.target;
          alert(target.innerHTML);
          return false;
        }
      }
    </script>
    <title>delegate</title>
  </head>
  <body>
    <ul id="nav">
      <li><a href="http://www.cnblogs.com/">部落格園</a></li>
      <li><a href="http://www.w3school.com.cn/">W3School</a></li>
      <li><a href="http://study.163.com/">網易雲課堂</a></li>
      <li><a href="http://www.willspace.cn/">WILLSpace</a></li>
      <li><a href="http://blog.csdn.net/willspace/">CSDN_WILLSpace</a></li>
    </ul>
  </body>
</html>

為什麼它會行得通呢？！因為DOM2.0的事件模型是這樣的，如果某個元素觸發一個事件，如onclick，頂層物件document就會發出一個事件流，隨著DOM樹往目標元素流去，這就是傳說中的捕獲階段，也就是原Netscape的事件執行模式，沿途的元素如果綁定了事件，它是不會執行的！第二階段，就是到達了目標元素，執行它上面的繫結事件，但如果onclick只是個空實現，當然是沒有效果啦!第三階級，就是起泡階級，原IE的事件執行模式，從目標元素往頂層元素折回，如果沿途有onclick事件，就隨個觸發！因此我們是點選了a元素，但它的onclick事件為空，當事件流上浮到ul元素時，發現ul元素綁定了onclick事件，就執行當中的函式。如果ul的祖先元素也綁定了onclick事件呢？！繼續執行！有多少執行多少！看下面的例子：

 
<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style type="text/css">
      body{background:#fff;}
      a { color:#8080C0;text-decoration:none;border-bottom:2px solid #fff;}
      a:hover {color:#336699;border-bottom-color:#B45B3E;}
    </style>
    <script type="text/javascript">
      var addEvent = (function () {
        if (document.addEventListener) {
          return function (el, type, fn) {
            el.addEventListener(type, fn, false);
          };
        } else {
          return function (el, type, fn) {
            el.attachEvent('on' + type, function () {
              return fn.call(el, window.event);
            });
          }
        }
      })();

      window.onload = function(){
        var nav = document.getElementById("nav");
        nav.onclick = function () {
          var e = arguments[0] || window.event,
          target = e.srcElement ? e.srcElement : e.target;
          alert(target.innerHTML);
          return false;
        }
        var wrapper = document.getElementById("wrapper");
        addEvent(wrapper,'click',function(){
          alert("冒泡過程連我也驚動了！");
        });
      }
    </script>
    <title>delegate</title>
  </head>
  <body>
    <div id="wrapper">
      <ul id="nav">
        <li><a href="http://www.cnblogs.com/">部落格園</a></li>
        <li><a href="http://www.w3school.com.cn/">W3School</a></li>
        <li><a href="http://study.163.com/">網易雲課堂</a></li>
        <li><a href="http://www.willspace.cn/">WILLSpace</a></li>
        <li><a href="http://blog.csdn.net/willspace/">CSDN_WILLSpace</a></li>
      </ul>
    </div>
  </body>
</html>

正由於這個特性，我們就可以利用ul的onclick去代理它下面所有元素的onclick事件。原來，我們需要給這些a元素準備五個偵聽器（EventListener），現在我們只需要1個，節省了4個，如果這個列表有一百行呢？就節省了99個！在商務應用，我們經過會遇到許多報表（grid，實質是用table做的），我們需要為每行新增懸浮變色效果與點選編輯功能，這就用到onmouseover 、 onmouseout 與 onclick事件，如果這個報表有五千行，我們也只需要三個偵聽器，節省了14997個！如果用傳統方法做這個grid，IE6這樣垃圾的遊覽器不卡到你吐血。因此，善用event delegation會大大提高我們程式的效能。

附上一些有用的連結：

文章轉自：

相關推薦

JavaScript事件代理和事件委托

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

JavaScript事件代理和委託

<ul id="parent-list"> <li id="post-1">Item 1</li> <li id="post-2">Item 2</li> <li id="post-3">Item 3</li>

javascript事件代理

在程式設計中，如果我們不想或不能夠直接操縱目標物件，我們可以利用delegate建立一個代理物件來呼叫目標物件的方法，從而達到操縱目標物件的目的。毋庸置疑，代理物件要擁有目標物件的引用。我們來看一下javascript的一個最簡單實現： vardelegate =function(client,cli

深入分析Javascript事件代理

很久很久以來，總感覺事件發生與事件代理到之間沒什麼鳥區別。 最近，又看了一下，感覺區別其實真不大！看怎麼理解吧。 要搞清楚什麼是事件代理，就需要先搞清楚什麼是代理。 從商業角度來講，代理就是：我有貨，你沒貨，但丫我沒時間、沒精力全部賣掉，而你一天閒的蛋疼，只剩下時間了。於是，我委託你幫我買，然後哥給你提成。

JavaScript事件代理（事件委託）

基本概念 事件代理（Event Delegation），又稱之為事件委託。是JavaScript中常用繫結事件的常用技巧。顧名思義，“事件代理”即是把原本需要繫結在子元素的響應事件（click、keydown......）委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件

JavaScript事件代理：尋找target目標元素、求結點深度

基礎知識儲備 本文的出彩之處在最後兩部分，前面只是基礎介紹。 JS中的事件代理，網上有很多大神已經介紹的非常完美了，這裡無需我的贅述。在學習事件代理之前，最好把事件模型學習了，就是捕獲階段、目標階段、冒泡階段 那些事情。這裡，我推薦兩篇別人的文章：

JavaScript事件代理和委託（Delegation）

<ul id="parent-list"> <li id="post-1">Item 1</li> <li id="post-2">Item 2</li> <li id="post-3">Item 3</li>

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

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

JavaScript事件模型及事件代理

監聽器 abort rop char 方便 listener 新版 media 事件處理 事件模型　　JavaScript事件使得網頁具備互動和交互性，我們應該對其深入了解以便開發工作，在各式各樣的瀏覽器中，JavaScript事件模型主要分為3種：原始事件模型、DOM2事

JavaScript中的事件代理

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

javascript的事件代理

如果你想給網頁新增點JavaScript的互動性，也許你已經聽過JavaScript的事件代理（event delegation），並且覺得這是那些發燒友級別的JavaScript程式設計師才會關心的什麼費解的設計模式之一。事實上，如果你已經知道怎麼新增JavaScript

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

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

JavaScript: 最簡單的事件代理（JS Event Proxy）原理程式碼

假設有HTML <ul id="parent-list"> <li id="post-1">Item 1</li> <li id="p

關於JavaScript中的事件代理

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

要小心 JavaScript 的事件代理

我們知道，如果給 form 裡面的 button 元素繫結事件，需要考慮它是否會觸發 form 的 submit 行為。除此之外，其它場合給 button 元素繫結事件，你幾乎不用擔心這個事件會有什麼非預期的附加效果，很自然地會這樣寫事件處理程式碼： ```js var button = document.

javascript事件處理程序

跨瀏覽器 包括 document 事件 else if asc 事件處理程序 瀏覽器 操作 javascript 事件處理程序 1、普通事件處理程序 <input type="button" value="click me" onclick="sh

JavaScript 事件

asc 失去焦點 eset nbsp 文檔 script abort style 屬性 屬性當以下情況發生時，出現此事件FFNIE onabort 圖像加載被中斷 1 3 4 onblur 元素失去焦點 1 2 3 on

javaScript事件綁定

java out 是否 常用 element 事件處理 tac 結構 tex 事件綁定，就是要對某一個東西進行操作。（因為你想讓他實現什麽效果，所以就得綁定他，哈哈哈！） 要想讓 JavaScript 對用戶的操作作出響應，首先要對 DOM 元素綁定事件處理函數。所謂事件處

javascript-事件冒泡、鼠標跟隨、鍵盤跟隨、鍵盤提交

事件冒泡、鼠標跟隨、鍵盤跟隨、鍵盤提交1、事件冒泡<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

javascript-事件綁定

javascript-事件綁定1、事件綁定與解除<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <s