• 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('我是事件委托弹出的');

         }

       }

     }


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

  • 相关阅读:
    Python3+PyMysql
    Python3 pip
    Python日志模块封装
    SVN状态图标无法显示
    添加修改数据库表以及字段描述信息
    群晖 6 控制面板信息中心 空白解决
    nextcloud迁移后报权限问题
    ESXI中第三方sata卡遇到的问题“对 CDROM 映像文件 执行操作失败”
    网站推荐 印章制作大师
    转 黑群晖7.0.1和6.0 中Active Backup for Business套件激活方法
  • 原文地址:https://www.cnblogs.com/zion0707/p/3889385.html
Copyright © 2020-2023  润新知