zoukankan      html  css  js  c++  java
  • javascript 事件委托(代理)

    事件委托(代理):就是利用事件冒泡机制,在最顶层触发事件的dom对象上绑定一个处理函数。在当有需要很多dom对象要绑定事件的情况下,可以使用事件委托。

    事件委托的好处是:节省资源 和 新增的元素也会有事件处理机制(这是项目中比较常见的问题)

    简要的用两个例子来解释一下事件委托这回事...

    先说说要产生的效果:我的想法是利用按钮点击新增li标签,而且新增的li标签也要有点击事件...

    HTML 代码

    <ul id="ul1">

      <li>1111</li>

    </ul>

    <input type="button" value="新增li元素" id="btn">


    JAVASCRIPT 代码

     

    *普通的事件处理 

    var oUl1 = document.getElementById('ul1');

     var oBtn = document.getElementById('btn');

     var aLi = oUl1.getElementsByTagName('li');

     //遍历li元素 

     for(var i = 0 ; i < aLi.length ; i++){

      //利用li元素点击

      aLi[i].onclick=function(){

        alert('我是普通处理弹出的');

      }

     }

     var num = 1;

     //当点击按钮的时候创建新的 li 标签 然后添加到ul中 

      oBtn.onclick=function(){

      var oNewLi = document.createElement('li');

     //给新标签添加内容

      oNewLi.innerHTML = aLi[0].innerHTML * ++num;

     //添加到ul中,此时点击的时候你会发现新增的li的点击事件不起效了

      oUl1.appendChild(oNewLi);

     }

     //*事件委托处理

     var oUl1 = document.getElementById('ul1');

     var oBtn = document.getElementById('btn');

     var aLi = oUl1.getElementsByTagName('li');

      var num = 1;

      oBtn.onclick=function(){

      var oNewLi = document.createElement('li');

     //给新标签添加内容

      oNewLi.innerHTML = aLi[0].innerHTML * ++num;

     //添加到ul中,此时点击的时候你会发现新增的li的点击事件生效了

      oUl1.appendChild(oNewLi);

     }

    //利用父级元素点击

     oUl1.onclick=function(ev){

      var oEvent = ev || event;

     //事件源,要做兼容性处理 oEvent.target为IE的, oEvent.srcElement为W3C的

      var target = oEvent.target || oEvent.srcElement;

      //为了源的准确性,我们要做一下判断点击的是不是想要发生事件的元素,因为输出的是大写的字符串,那么我们就遵从用大写的字符串来做判断

      if(target.nodeName=='LI'){

          target.onclick=function(){

           alert('我是事件委托弹出的');

         }

       }

     }


    总结:其实就是在父级上绑定事件,然后用它的事件源来查找到相应的元素,那么对应的元素执行一些其它功能。从而达到新增的元素不会失去事件处理。

  • 相关阅读:
    sklearn的preprocessing模块--数据预处理
    [系列转载]一.建模前的数据清洗与处理
    2.2 数学科学的数学之矩阵-行列式
    4)函数极限与连续函数
    6)导数
    java编写基于netty的RPC框架
    购买阿里云 实现内网 穿透 仅86元/年,而且
    OAuth 2.0
    java中JVM内存管理(1)
    java实现,使用opencv合成全景图,前端使用krpano展示
  • 原文地址:https://www.cnblogs.com/zion0707/p/3889385.html
Copyright © 2011-2022 走看看