Chrome "onclick" событие выпуск

Question

Хорошо, я создаю приложение (для Chrome (* не расширение)) и на странице есть несколько повторяющихся элементов.Поэтому я решил построить эти элементы динамически, используя цикл, например так:

for(var i = 1; i <= 64; i++){
    var elem = document.createElement('div');
    elem.id = "element"+i;  
    elem.onclick = "doSomething()"
    $("parentElement").appendChild(elem);
}

Моя проблема возникает, когда он пытается присоединить мою функцию к событию onclick.Когда я смотрю на элемент, на нем нет атрибута onclick ... Даже когда я прохожу, я могу добраться до строки:

elem.onclick = "doSomething()"

Затем я снова наступаю и ничего ... Пока у меня естьпробовал с кавычками и без них, а также .onclick и .onClick ...

Заранее спасибо!

Answer 1

Вы должны всегда передавать саму функцию, а не какую-либо строку.

elem.onclick = doSomething;

Это установит doSomething в качестве обработчика кликов.

• Использование строк вызовет eval внутри, что является медленным и, возможно, небезопасным (последнее здесь не применимо).
• Передача функции напрямую более проста.
• Строки необходимы, только если вы задали onclick через HTML.

Answer 2

«addEventListener» - лучший подход (на случай, если вы захотите позже отменить привязку / связать больше событий). Кроме того, я бы рекомендовал кэшировать ссылку на родительский элемент, например,

var docFrag = document.createDocumentFragment(),
    elem;
for(var i = 1; i <= 64; i++){
    elem = document.createElement('div');
    elem.id = "element"+i;  
    elem.addEventListener('click', doSomething);
    docFrag.appendChild(elem);
}
$("parentElement").appendChild(docFrag);

В зависимости от размера списка, вы можете рассмотреть делегирование события:

var docFrag = document.createDocumentFragment(),
    elem,
    parent = $("parentElement");
for(var i = 1; i <= 64; i++){
    elem = document.createElement('div');
    elem.id = "element"+i;
    elem.className = "clickMe";
    docFrag.appendChild(elem);
}
parent.appendChild(docFrag);
parent.addEventListener('click', function( event ) {
    if( event.target.class === 'clickMe' ) {
        doSomething(event);
    }
});

(имя класса "clickMe" полностью произвольно)

Редактировать: оба эти примера попали в ловушку ОП, добавляя их в DOM в цикле. Этого следует избегать всякий раз, когда это возможно, поскольку касание DOM стоит дорого. Примеры были обновлены, чтобы вместо этого создать фрагмент документа, который заполняется и затем добавляется к родительскому элементу. Это делает кеширование ссылки на родителя ненужным в первом примере.