javascript事件代理

在編程中，如果我們不想或不能夠直接操縱目標對象，我們可以利用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';

  }

});

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

<ulid="nav">

      <li><ahref="http://www.cnblogs.com/">博客園</a></li>

      <li><ahref="http://www.w3school.com.cn/">W3School</a></li>

      <li><ahref="http://study.163.com/">網易雲課堂</a></li>

      <li><ahref="http://www.willspace.cn/">WILLSpace</a></li>

      <li><ahref="http://blog.csdn.net/willspace/">CSDN_WILLSpace</a></li>

</ul>

現在我們要點擊列表中鏈接，取出裏面的內容，傳統的方法，我們需要遍歷添加所有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會大大提高我們程序的性能。

附上一些有用的鏈接：

文章轉自：

http://www.cnblogs.com/rubylouvre/archive/2009/08/09/1542174.html

感謝作者

javascript事件代理

servlet+json+ajax集成

使用dom4j將xml文件轉換成project.properties文件

使用C++語言模擬實現貪喫蛇小遊戲

VMWare10.0虛擬機安裝Mac OS X

JAVA-Hibernate-SQL類型映射表及Hibernate標識生成策略

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結