• 事件绑定和事件委托区别


    事件绑定:顾名思义就是给页面上的元素绑定事件(处理程序),分为动态绑定和静态绑定。

    静态绑定,也是最直接的事件绑定【通过事件属性,直接显示的给元素绑定事件,例如

    <div onlick="myfunc()" onmouseover="myfunc2()" >
    <script>
      function myfunc(){}
      function myfunc2(){}
    </script>
    、、、、、、、
    该方式缺点:当页面多元素都要添加事件时,定义繁琐。函数名称定义改变,一次要修改两个地方。

    动态绑定:

    <div id="mydiv">
    <script>
      var funcname1 = function(){}
      mydiv.onclick = funcname1 //直接对dom元素的onclick属性赋值函数
      mydiv.onclick = null //移除绑定事件
      
      《通过事件监听方式》
      mydiv.addEventListener('click',funcname1); //注意这里除了直接传递一个函数,还可以传递一个callback除了传递一个函数之外,还可以传递一个属性带有 HandleEvent 方法【名字必须是 HandleEvent】的对象obj,
                                 系统会自动去调用这个HandleEvent 方法!!!
      mydiv.removeEventListener('click', callback)
      《移除事件监听》
    </script>

    关于事件监听的适配:因为IE 有自己的事件监听 【attachEvent()detachEvent() 分别用于事件监听
         oBtn.attachEvent('onclick',funcname1); //IE 添加 监听
         oBtn.detachEvent('onclick',funcname1); ////IE 移除 监听
     
      所以添加监听之前可以先判断一下 dom元素是否存在属性 attachEvent ,有就走 使用 attachEvent()添加监听逻辑,没有就 addEventListener() 

     事件委托:顾名思义就是事件的处理不自己躬行,委托给他人帮忙处理。

     要了解实现委托,就必须先了解事件捕获和事件冒泡,别人网上有很多总结 【https://www.jianshu.com/p/c88c15c6074c,可以看看这篇,图文并茂,比较好理解】

    事件委托应用场景: 如果一类元素数量多且都需要加上js事件时,通过循环一个一个的为每个元素单独添加js事件显然造成内存的浪费。这样的场景就适合用事件委托。

    事件委托本质时事件冒泡的应用。

    大致流程:为父元素添加事件,点击子元素是由于事件冒泡,添加的会传递的会向上传递到父元素,父元素捕获到事件就进行 源头判断【 ev.target 】

    在进行相应处理就好了。

    ex:

    <ul id="parent">
        <li>c1</li>
        <li>c2</li>
        <li>c3</li>
    </ul>
    
    <script>
    (function(){
       
        parent.addEventListener('click',func); //id属性 可以直接拿来用 
        function func(e){
            e = e || window.event;
            var src = e.target;
            if(src && src.nodeName.toLowerCase() === 'li'){ //判断事件发起的源头
                alert(src.innerHTML);
            }
        }
    })();
    </script>

    事件委托优点:

    减少冗余重复代码的书写,对于同一个父节点下面类似的子元素,可以通过委托给父元素的监听函数来处理每个子节点的事件。

    不会因为元素的变动而改变事件的绑定

    对dom元素的引用少了,有效避免内存泄露问题。

  • 相关阅读:
    MDK中编译程序后Program Size详解
    win10快速访问的文件夹无法删除的解决方法
    stm32类型cl、vl、xl、ld、md、hd的含义
    史上最全软件测试工程师常见的面试题总结(四)【多测师_王sir】
    基于PO和单例设计模式用python+selenium进行ui自动化框架设计【多测师】
    经典的Python编程题【多测师_王sir】
    Java中的泛型【多测师_王sir】【软件测试】
    Java设计模式之单例模式、工厂模式、PO模式【多测师_王sir】
    Java+Selenium做UI自动化中@FindBy和@CacheLookup用法【多测师_王sir】
    postman中接口的入参为图片的处理方式【多测师_王sir】
  • 原文地址:https://www.cnblogs.com/Hijacku/p/14786129.html
Copyright © 2020-2023  润新知