Question

我将在javascript中拥有大量对象，其在页面上的可视化表示形式为div（div将根据鼠标位置显示和隐藏）。

要与对象进行交互，我试图决定在点击侦听器中添加<button>元素（或其他具有onclick属性的元素）或<div>。

将<div>与click侦听器一起使用的优点是回调函数（即单击处理函数）将在对应于其可视表示（父div）的对象上具有闭包。因此，当我点击时，它知道我正在与哪个对象进行交互。

使用<button>元素（或具有onclick属性的其他DOM元素）的优点是页面将注册更少的侦听器。但是使用<button>元素的缺点是它的点击处理函数不在对象上有闭包，因此引用正确对象的唯一方法是通过某种索引，其中每个对象都拥有一个唯一的名称。只有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对象的肮脏和乏味的方式，但它确实保存了一大堆点击侦听器。

我的问题是：是否有许多注册的事件监听器会显着降低性能？保持注册元素的父元素被隐藏时，这种性能影响是否会消失？

Answer 1

编辑:(因为我不确定你有多少听众在谈论:)如果你有10个以下的听众，我会继续这样做。否则，它可能会降低浏览器的性能，所以我会选择按钮方式。

但是，如果你正在聆听点击，那么你就无法做你想做的事情＆＃34; onclick＆＃34;？那肯定是最快的方式。

Answer 2

你真的应该发布工作代码。据我所知，你实际上想要用按钮做什么：

（哦，你把一个不正确的数组索引放入一个内联监听器）。

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上，如果有很多，它对性能没有影响，唯一的开销就是首先将它们附加到它们身上。

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

2 个答案: