• 前端学习——实现事件代理


    事件代理

      事件代理/委托:顾名思义,自己的事情让别人代做,主要原理是利用事件冒泡,下图

    DOM2事件处理又分为三个阶段:一、事件捕获阶段,二、事件目标阶段,三、事件冒泡阶段。详情讲解我会另外开一篇文章

        

    <ul class='ul-li'>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    	<li>6</li>
    	<li>7</li>
    	...
    	<li>1000</li>
    </ul>
    <script type="text/javascript">
    	var lis=document.getElementsByTagName("li");
    	        for(var i in lis){
    			lis[i].onclick=function(){
    				alert(this.innerHTML);
    			}
    		}
    </script>
    

      这样绑定事件不仅仅是后添加的元素无法绑定这个事件,而且性能大大的降低,同时也会照成浏览器崩溃或者内存泄漏的事情。

      事件代理这时候就非常有用了。它把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。它主要利用事件冒泡来实现的,在冒泡过程通过判断元素是否是我们需要绑定的。

      

    var aul=document.getElementById("cl");
    aul.onclick = function(event) {
        e = event || window.event;
        var eve = e.target || e.srcElement;
        if (eve.nodeName=='LI') {
    	 console.log(eve);
        }
    };

      jQuery 有多种方法可以实现事件代理  .on() .bind() .delegate

     

    
    
    $(".ul-li").on("li", "click", function(){
      // "$(this)" 指向当前li
      console.log($(this));
    });
    
    
    $(".ul-li li").bind("click", function(){
      // "$(this)" 指向当前li
      console.log($(this));
    });

    $(".ul-li").delegate("li", "click", function(){ // "$(this)" 指向当前li console.log($(this)); });

     事件代理带来了很多好处:那些需要创建的以及驻留在内存中的事件处理器少了。提高了性能,并降低了浏览器崩溃的风险。在DOM更新后无须重新绑定事件处理器了。

  • 相关阅读:
    bzoj3380+3381+3382+3383 Usaco2004 Open
    浅谈树链剖分(C++、算法、树结构)
    小学奥数 最大公约数与最小公倍数
    小学奥数 质数的和与积
    小学奥数 分苹果
    小学奥数 连乘积末尾0的个数
    小学奥数 李白的酒
    小学奥数 回文数个数
    小学奥数 等差数列末项计算
    小学奥数 地球人口承载力估计
  • 原文地址:https://www.cnblogs.com/ychl/p/5614133.html
Copyright © 2020-2023  润新知