Javascript 单击div上的侦听器与元素上的onclick（函数闭包与对象索引查找）

我将有大量javascript中的对象，它们在页面上的视觉表示将是div，div的显示和隐藏取决于鼠标位置

为了和对象交互，我试图决定是添加元素还是使用onclick属性添加其他元素，还是使用click侦听器添加其他元素

将s与click侦听器一起使用的优点是，回调函数（即click handler函数）将在与其视觉表示形式父div相对应的对象上具有闭包。因此，当我单击时，它知道我正在与哪个对象交互

使用具有onclick属性的元素或其他DOM元素的优点是，页面注册的侦听器会更少。但是使用元素的缺点是它的click handler函数在对象上没有闭包，因此引用正确对象的唯一方法是通过某种索引，其中每个对象都有一个唯一的名称。一个仅包含2个对象的示例，我的页面中将包含更多对象：

var arrayOfObjects = [];

var anObj = {
    // some info about object
    this.indxInArray = arrayOfObjects.push(this);
    this.clickFunction = function() {
        // insert logic for click listener...
    };
    var that = this;
    this.theButton = $("<button type='button' onclick='arrayOfObjects["that.indxInArray"].clickFunction");
    $('anObj').append(that.theButton);
}

var anotherObj = {
    // some info about object
    this.indxInArray = arrayOfObjects.push(this);
    this.clickFunction = function() {
        // insert logic for click listener...
    };
    var that = this;
    this.theButton = $("<button type='button' onclick='arrayOfObjects["that.indxInArray"].clickFunction");
    $('anotherObj').append(that.theButton);
}


// ... HTML stuff:
<div id='anObj'>
</div>

<div id='anotherObj'>
</div>

按钮方式似乎是引用DOM中javascript对象的一种肮脏而乏味的方式，但它确实节省了大量的单击侦听器

---

我的问题是：有许多注册的事件侦听器会显著降低性能吗？当包含已注册元素的父元素被隐藏时，这种性能影响会消失吗？

编辑：因为我不确定您谈论的侦听器数量：如果您的侦听器不到10个，我会同意。否则，它可能会降低浏览器性能，所以我会选择按钮方法

---

但是如果你在听点击，你不能用onclick做你想做的吗？这肯定是最快的方法。

你真的应该发布工作代码。据我所知，这里是您实际想要对按钮执行的操作：

哦，您正在将一个不正确的数组索引放入一个在线侦听器中

var arrayOfObjects = [];
var oButton = document.createElement('button');

var anObj = {
    // some info about object
    // Push returns the new legnth of the array, so your indexes will be out by 
    // one unless you subtract 1.
    this.indxInArray = arrayOfObjects.push(this) - 1;
    this.clickFunction = function() {
        // insert logic for click listener...
    };

    // Clone is a (better in my view) alternative to innerHTML
    this.theButton = oButton.cloneNode(false);
    this.theButton.onclick = arrayOfObjects[this.indxInArray].clickFunction;
    document.getElementById9('anObj').appendChild(this.theButton);
}

---

但我不明白你为什么要用这种方法。只需将侦听器放在div上，如果有很多侦听器，则对性能没有影响，唯一的开销是首先附加它们。

我使用的是带按钮的onclick，它不会关闭对象。如果在其他元素（如div）上使用onclick，也会出现同样的问题。