Javascript 使用addEventListener和绑定函数获取元素

当结合使用绑定函数（）和addEventListener（）时，获取事件所附加到的元素的最佳方法是什么

下面是一个潜在场景的示例。每个LI都有一个单击事件侦听器，然后触发模块中的一个方法。为了避免不必要的匿名函数/this/that（），将模块作用域传递给事件处理程序。在典型的事件处理程序

中，此
将是附加了事件的元素；但是，在这种情况下，
此
将引用模块
e.target
指单击的元素，不一定指带有事件的元素。有没有比像下面的代码那样通过事件传递元素更好的方法

HTML

<ul>
  <li><a href="#" class="link">Link 1</a></li>
  <li><a href="#" class="link">Link 2</a></li>
</ul>






Javascript

function Module() {
    this.element = document.querySelectorAll("li");

  for(var i=0; i<this.element.length; i++) {
    this.element[i].addEventListener("click", this.link.bind(this, this.element[i]));
  }
}

Module.prototype.link = function(el, e) {
  //How to get the current element with the associated listener? Normally "this" would be the element.
  //e.target is the A tag, not the LI tag with the attached event listener
  //Passing the el variable seems less than optimal. Better solution?
};

var instance = new Module();

功能模块（）{
this.element=document.queryselectoral（“li”）；
对于（var i=0；i我不认为将其作为参数传入有任何错误。我以前在一些非常流行的库中见过它。我相信主干网对.on方法的实现将作为参数之一传入事件上下文

jQuery将“this”关键字的上下文绑定到作为事件上下文的元素。在您的情况下，如果这样做，您将失去对模块实例的任何引用的访问

QQuery还创建了一个自定义事件对象，该对象保存对所有额外的潜在有用对象的引用，例如ReleDebug和CueAdTeTARGET。您可以考虑这样的方法。

内存泄漏：
此实现的另一个实际问题是，由于没有存储对此处理程序的引用，您将无法解除绑定此处理程序。这将导致内存泄漏，因为处理程序将维护对事件上下文的内部引用，导致事件上下文保留在内存中。垃圾回收器将看到该引用，并且不会清理它
 找到了一个解决方案。事件处理程序所附加到的原始元素作为
e.currentTarget
传递到事件元素中。这是试图重新创建jQuery？jQuery解决了您所采用的方法中的几个问题。也许您应该使用该库，或者至少查阅它的des就目前而言，我建议进行重构，而不是将其整合在一起。