JavaScript中怎么实现事件委托

JavaScript中怎么实现事件委托，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

事件是对象发送的消息，以发信号通知操作的发生。委托是可保存对方法的引用的类。下面介绍javascript中的事件和委托，供参考。

由于事件处理程序可以为现代Web应用程序提供交互能力，因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序，在创建GUI的语言（如#C）中，为GUI中的每个按钮添加一个onclick事件处理程序是司空见惯的事，而且这样做也不会导致什么问题。可是在JavaScript中，添加到页面上的事件处理程序数量关系到页面的整体运行性能。

导致这一问题的原因是多方面的。首页，每个都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致DOM访问次数，会延迟整个页面的交互就绪时间。事实上，从如何利用好事件处理程序的角度出发，还是有一些方法能够提升性能的。

对“事件处理程序过多”问题的解决方案是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。以下面的HTML代码为例：

<ul id="myLinks"> <li id="goSomewhere">Go somewhere</li> <li id="doSomething">Go somewhere</li> <li id="sayHi">Say hi</li> </ul>

其中包含3个被单击后会执行操作的列表项。按照传统的做法是，需要像下面这样为它们添加3个事件处理程序：

var item1=document.getElementById("goSomewhere");  var item1=document.getElementById("doSomething");  var item1=document.getElementById("sayHi");  EventUtil.addHandler(item1,"click",function(event){  location.href="http://www.yiiyaa.net";  });  EventUtil.addHandler(item2,"click",function(event){  document.title="I changed the document's title";  });  EventUtil.addHandler(item2,"click",function(event){  alert("Say hi");  });

如果在一个复杂的Web应用程序中，对所有可单击的元素都采用这种形式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件类型，只需在DOM树中尽量***的层次上添加一个事件处理程序，如下面的例子所示：

var list=document.getElementById("myLinks");  EventUtil.addHandler(list,"click",function(event){  event=EventUtil.getEvent(event);  var target=EventUtil.getTarget(event);  switch(target.id){  case "doSomething":  document.title="I changed the document's title";   break;  case "goSomewhere":  location.href="http://www.yiiyaa.net";  break;  case "sayHi":  alert("Say hi");  break;  }  });

在这段代码里，我们使用事件委托只为<ul>元素添加了一个onclick事件处理程序，由于所有列表项都是这个元素的子节点，而且它们的事件会冒泡，所以单击事件最终会被这个函数处理。我们知道，事件目标是被单击的列表项，故而可以通过检测id属性来决定采用适当的操作。与前面未使用事件委托的代码比一比，会发现这段代码的事前消耗更低，因为只取得了一个DOM元素，只添加了一个事件处理程序。虽然对用户来说最终的结果相同。但这种技术需要占用的内存更少。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术。

如果可行的话，也可以考虑为document对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。这样做与采取传统的做法相比具有如下优点：

1、document对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序（无需等待DOMContentLoaded或load事件）。换句话说，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。

2、在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少。

3、整个页面占用的内存空间更少，能够提升整体性能。

最适合采用事件委托技术的事件包括click,mousedown,mouseup,keydown,keyup和keypress,虽然mouseover和mouseout事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置（因为当鼠标从一个元素移到其他子节点时，或者当鼠标移出该元素时，都会触发mouseout事件）。

关于JavaScript中怎么实现事件委托问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。