Chrome 'onclick'이벤트 문제

Question

좋아요 (Chrome (* 확장 프로그램이 아님) 용) 애플리케이션을 만들고 페이지에 반복되는 요소가 있습니다. 그래서 동적과 같이, 루프를 사용하여 이러한 요소를 구축하기로 결정 : 그것은 onclick 이벤트에 내 기능을 첨부하려고 할 때

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

내 문제가 발생합니다. ... 그리고

elem.onclick = "doSomething()" 

내가 다시 단계로 아무것도 지금까지 나는 함께 시도했다 : 나는 요소를 보면 거기에는 온 클릭 속성은 내가 라인을 얻을 수 있습니다 통해 내가 단계에도 ...입니다 따옴표없이 .onclick과 .onClick ...

감사합니다.

Answer 1

모든 종류의 문자열이 아닌 함수 자체를 항상 전달해야합니다.

elem.onclick = doSomething; 

이렇게하면 doSomething이 클릭 처리기로 설정됩니다.

• 문자열을 사용하면 내부적으로 eval이 호출되며 속도가 느리고 불안전 할 수 있습니다 (후자는 여기에 적용되지 않음).
• 함수를 직접 전달하는 것이 더 간단합니다.
• onclick을 HTML로 설정 한 경우에만 문자열이 필요합니다.

Answer 2

"addEventListener"는 더 나은 방법입니다 (나중에 바인딩을 해제하거나 더 많은 이벤트를 바인딩하려는 경우).

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 : 또한, 내가 그렇게

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); 

목록의 크기에 따라 같은 부모 요소에 대한 참조를 캐싱 추천 할 것입니다, 당신은 이벤트 위임 고려할 수 있습니다 "는 완전히 임의적 임)

편집 :이 두 예제는 루프 내에서 DOM에 추가되는 OP의 트랩에 빠졌습니다. 가능하면 DOM을 만지면 비용이 많이 듭니다. 예제가 업데이트되어 대신 채워지고 부모 요소에 추가되는 문서 조각을 만들 수 있습니다. 이렇게하면 첫 번째 예제에서 불필요한 부모에 대한 참조를 캐싱하지 않아도됩니다.