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

时间:2016-03-22 19:50:59

标签: javascript

绑定函数https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)与 addEventListener https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler)结合使用时,获取元素的最佳方法是什么?事件附在?

以下是潜在方案的示例。每个LI都有一个click事件监听器,而不是触发模块中的方法。为了避免不必要的匿名函数/ this / that(https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/#what-problem-are-we-actually-looking-to-solve),模块范围被传递给事件处理程序。在典型的事件处理程序中,log.SetOutput(&lumberjack.Logger{ Filename: "/var/log/myapp/foo.log", MaxSize: 500, // megabytes MaxBackups: 3, MaxAge: 28, //days }) 将是附加事件的元素;但是,compile ('com.facebook.android:audience-network-sdk:4.+') { exclude group: 'com.google.android.gms' } 在这种情况下会引用模块。 this指的是点击的元素,不一定是带有事件的元素。有没有比使用事件传递元素更好的方法,如下面的代码那样?

HTML

this

的Javascript

e.target

https://jsfiddle.net/1sj68d4n/

将事件监听器添加到A标签而不是Li可以解决这个利基环境中的问题。但是,在许多情况下,监听器可能附加到具有许多孩子的元素上。

2 个答案:

答案 0 :(得分:0)

我认为将其作为参数传递没有任何问题。我之前在一些非常受欢迎的图书馆看过它。我相信Backbone的.on方法实现会将事件上下文作为参数传递。

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

jQuery还会创建一个自定义事件对象,该对象保存对所有类型的额外可能有用的对象的引用,如relatedTarget和delegateTarget。你可以考虑这样的方法。

内存泄漏: 此实现的另一个实际问题是,您将无法取消绑定此处理程序,因为没有存储引用。这将创建内存泄漏,因为处理程序将维护对事件上下文的内部引用,从而使其保留在内存中。垃圾收集器将看到引用并且不会清理它。

答案 1 :(得分:0)

找出一个可靠的解决方案。事件处理程序附加到的原始元素在事件元素中作为e.currentTarget传递。