Нажмите прослушиватель в элементе div вместо onclick для элемента (закрытие функции или поиск по индексу объекта)

Question

У меня будет большое количество объектов в javascript, визуальное представление которых на странице будет выглядеть как div (div будут появляться и скрываться в зависимости от положения мыши).

Чтобы взаимодействовать с объектами, я пытаюсь выбрать между добавлением <button> элементов (или других элементов с атрибутом onclick) или <div> s с прослушивателями щелчков.

Преимущество использования <div> s с прослушивателями щелчков состоит в том, что функция обратного вызова (то есть функция обработчика щелчков) будет иметь замыкание на объекте, соответствующем его визуальному представлению (родительский div). Таким образом, когда я нажимаю, он знает, с каким объектом я взаимодействую.

Преимущество использования элементов <button> (или других элементов DOM с атрибутом onclick) состоит в том, что на странице будет зарегистрировано меньше слушателей. Но недостаток использования <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>

Пуговичный способ выглядит грязным и утомительным способом обращения к объектам javascript в DOM, но он сохраняет целую кучу слушателей щелчков.

Мой вопрос: много ли зарегистрированных слушателей событий значительно замедляют производительность? Исчезнет ли это влияние на производительность, пока родительский элемент, содержащий зарегистрированный элемент, будет скрыт?

Answer 1

Вы действительно должны опубликовать рабочий код.Насколько я могу судить, вот что вы на самом деле хотите сделать с кнопками:

(О, и вы помещаете неверный индекс массива в встроенный слушатель).

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, это не повлияет на производительность, если их много, единственные накладные расходы заключаются в их прикреплении.

Answer 2

РЕДАКТИРОВАТЬ: (так как я не уверен, сколько слушателей вы говорите :) Если у вас есть менее 10 слушателей, я бы пошел с этим.В противном случае это может замедлить работу браузера, поэтому я бы использовал подход с использованием кнопок.

Но если вы слушаете клики, не могли бы вы сделать то, что вы хотите, с помощью "onclick"?Это определенно был бы самый быстрый способ.