javascript的7个技巧 3

最新推荐文章于 2024-08-13 07:20:51 发布

android小猪

最新推荐文章于 2024-08-13 07:20:51 发布

阅读量683

点赞数

分类专栏： JAVA WEB 文章标签： JavaScript

本文链接：https://blog.csdn.net/S04103037/article/details/8850974

版权

JAVA WEB 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

事件委派

Web应用都是由事件驱动运转的。我喜欢事件处理，尤其喜欢自己定义事件。它能使你的产品可扩展，而不用改动核心代码。有一个很大的问题（也可以说是功能强大的表现），是关于页面上事件的移除问题。你可以对某个元素安装一个事件监听器，事件监听器就开始运转工作。但页面上没有任何指示说明这有个监听器。因为这种不可表现的问题(这尤其让一些新手头疼)，以及像IE6这样的”浏览器“在太多的使用事件监听时会出现各种的内存问题，你不得不承认尽量少使用事件编程是个明智的做法。

于是事件委托就出现了。

当页面上某个元素上的事件触发时，而在 DOM继承关系上，这个元素的所有子元素也能接收到这个事件，这时你可以使用一个在父元素上的事件处理器来处理，而不是使用一堆的各个子元素上的事件监听器来处理。究竟是什么意思？这样说吧，页面上有很多超链接，你不想直接使用这些链接，想通过一个函数来调用这个链接，HTML代码是这样的：

     ·········10········20········30········40········50········60········ 
   
    01. 
    Great Web resources 
   
02. 
     "resources"> 
    
    03. 
    "external nofollow" class="external" target="_blank"href="http://opera.com/wsc">OperaWeb Standards Curriculum
 
    04. 
    "external nofollow" class="external" target="_blank"href="http://sitepoint.com">Sitepoint
 
    05. 
    "external nofollow" class="external" target="_blank"href="http://alistapart.com">AList Apart
 
    06. 
    "external nofollow" class="external" target="_blank"href="http://yuiblog.com">YUIBlog
 
    07. 
    "external nofollow" class="external" target="_blank"href="http://blameitonthevoices.com">Blameit on the voices
 
    08. 
    "external nofollow" class="external" target="_blank"href="http://oddlyspecific.com">Oddlyspecific
 
    09.

常见的做法是通过循环这些链接，将每个链接上附加一个事件处理器：

     ·········10········20········30········40········50········60········ 
   
    01. 
    //典型的事件处理例子 
   
    02. 
    (function(){ 
   
    03. 
    var resources= document.getElementByIdx_x('resources'); 
   
    04. 
    var links= resources.getElementsByTagName_r('a'); 
   
    05. 
    var all= links.length; 
   
    06. 
    for(var i=0;i 
   
    07. 
    //Attach a listener to each link 
   
    08. 
    links[i].addEventListener('click',handler,false); 
   
    09. 
    }; 
   
    10. 
    function handler(e){ 
   
    11. 
    var x= e.target; //Get the link that was clicked 
   
    12. 
    alert(x); 
   
    13. 
    e.preventDefault(); 
   
    14. 
    }; 
   
    15. 
    })();

我们用一个事件处理器也能完成这项任务：

     ·········10········20········30········40········50········60········ 
   
    01. 
    (function(){ 
   
    02. 
    var resources= document.getElementByIdx_x('resources'); 
   
    03. 
    resources.addEventListener('click',handler,false); 
   
    04. 
    function handler(e){ 
   
    05. 
    var x= e.target; //get the link tha 
   
    06. 
    if(x.nodeName.toLowerCase()=== 'a'){ 
   
    07. 
    alert('Eventdelegation:' +x); 
   
    08. 
    e.preventDefault(); 
   
    09. 
    } 
   
    10. 
    }; 
   
    11. 
    })();