我所明白的JavaScript 事宜托付

2024年5月7日 171次阅读 来源: Wayne

当初学C#时，学到托付观点的时刻，有点手足无措，在事情后应用了许多后才发明真的好用。在JavaScript内里也有事宜托付的观点，那在JavaScript中，事宜托付又是什么样的道理以及什么应用场景呢？

事宜托付的道理

事宜托付，浅显地来说，就是把一个元素相应事宜（click、keydown……）的函数托付到另一个元素；
对一个手艺点的相识的更深，就能对这个手艺应用的更好。

1：事宜的冒泡，所以才能够在父元夙来监听子元素触发的事宜。
2：DOM的遍历，一个父级元素包括的子元素过量，那末当一个事宜被触发时，是不是触发了某一种范例的元素呢？

这是事宜托付的两个中心，跟事宜托付相干的手艺点，假如遇到什么题目，都能够在这两个点举行切入，来追求解决计划。
事宜的冒泡这个要讲一下，在 document.addEventListener 的时刻我们能够设置事宜模子：事宜冒泡、事宜捕捉，一般来说都是用事宜冒泡的模子。

事宜托付的优瑕玷

长处

  1. 削减内存斲丧
  2. 动态绑定事宜

瑕玷
1 消耗机能

事宜托付的应用
运用jQuery

$("父标签").delegate("子标签","click",function(){
      var target = $(event.target);
      console.log(target);
});

或许新版本的

 $("父标签").on("click","子标签",function(){
      var target = $(event.target);
      console.log(target);
});

原生JavaScript

 document.getElementById('父标签').addEventListener('click', function (e) {
      // 兼容性处置惩罚
      var event = e || window.event;
      var target = event.target || event.srcElement;
      if (target.nodeName.toLocaleLowerCase === '子标签') {
        console.log('the node is: ', target.innerHTML);
      }
    });

其他须要注重的点

关于父级须要托付的对象可能有多个，须要逐一举行绑定事宜；
关于须要绑定的事宜范例可能有多个，须要逐一绑定事宜；
在实行所绑定的函数的时刻须要传入准确的参数以及考虑到 this 关键字的题目；
**别的 事宜托付也是有肯定局限性的；
比方 focus、blur 这些事宜没有事宜冒泡机制，所以没法举行托付绑定事宜；
而mousemove、mouseout 鼠标操纵之类的事宜，只管有事宜冒泡，然则如今的计划都是去不停经由过程位置去盘算定位，对机能斲丧高，因而也是不适合于事宜托付的；**

    原文作者：Wayne
    原文地址: https://segmentfault.com/a/1190000018424640
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞