요소에 jQuery 이벤트를 바인딩하는 가장 좋은 방법은 무엇입니까

현재 수천 줄의 jQuery 코드가있는 사이트에서 작업하고 있습니다. 특히 많은 클릭 이벤트가 있으며, 바인딩 이벤트 또는 이벤트를 항목에 바인딩하는 데있어 최선의 방법입니다.요소에 jQuery 이벤트를 바인딩하는 가장 좋은 방법은 무엇입니까

다양한 링크와 항목에서 30 회 이상의 클릭 이벤트가 발생하면 실적이 현저하게 좋지 않습니다. 새로운 jQuery 1.7 "on"함수가 사용되고 있습니다. 이벤트가 본문 요소 나 뭔가에 바인딩되어 있어야하고, 그런 다음 수표가 항목을 클릭 한 다음 거기에서 작업해야합니까? 또는 그것은 문제가되지 않고 많은 이벤트를 묶어서 현대적인 브라우저 나 퍼포먼스에서 실제로 문제가되지 않습니까?

출처

2011-12-18 Dwayne Charrington

분명히 이벤트 위임입니다. 정적 컨테이너 요소가 있고 그 요소에 핸들러를 주로 바인딩하고 싶습니다 ... 예를 들어, 단추가있는 도구 모음이있는 경우 도구 모음 자체에 하나의 클릭 처리기가 필요합니다. –

각 이벤트의 클릭 수는 얼마나 독특한가요? –

글쎄요. 일부 클릭 이벤트는 캐 러셀을위한 것이고, 일부는 팝업 모달 표시를위한 것이고, 다른 이벤트는 다른 요소로 전달하는 것입니다. 그래서 나는 각 이벤트가 매우 독특하다고 말할 것입니다. –

클릭 한 요소가 모두 포함 된 가장 낮은 DOM 요소에 요소를 바인딩해야합니다.

그래서 모든 단일 요소를 포함 foo라는 사업부가 있다면, 당신은 말할 것 :

$("#foo").on("click", "yourselector", function(){ 
});

을 당신의 요소가 페이지의 구석 구석에 분산하는 경우에, 당신은 매우에서 감상하는 것 상단 :

$(document).on("click", "yourselector", function(){ 
});

내가 제대로 질문을 이해 해요, 난 정말 정말 이전 개발자가하지 않았다 희망 뭔가 같은 :

$("#someButtonId").on("click", function(){ 
    //this defeats the whole purpose of on!!! 
});

출처

2011-12-18 02:22:10

이것은 항상 당신이 그것을해야한다고 생각하는 방법입니다. 주관적인 것 같아요, 확실히 도움이 됐습니다. 나는 대부분의 코드를 작성하지 않았으므로이를 수정하고보다 효율적으로 만들고 싶다. 바인딩하려는 모든 요소의 컨테이너에 대한 클릭 이벤트를 바인딩하는 것이 가장 좋은 방법입니다. –

슬프게도 Adam, 이전 개발자는 언급 한 것처럼 단일 요소를 사용하여 바인드 클릭을했기 때문에 그 이유를 고심하게 고쳐야합니다. 성능 악몽입니다. 또한 Magento 사이트인데, 인라인 이벤트 호출 및 기타 등등. –

필자는 $ (document) .on ("click", "yourselector", function() {을 사용하여 항목의 고유성으로 인해 코드를 생각할 수는 있었지만, –

요소에 동일한 이벤트를 두 번 이상 바인딩 할 수 있지만 동일한 링크에서 최대 30 번의 클릭 이벤트가있는 경우 다르게 수행해야합니다. 모든 작은 것을 스스로 바인딩하는 대신 하나의 이벤트 핸들러에서 원하는 모든 다른 액션에 대한 코드를 작성하십시오.

출처

2011-12-18 02:25:16 Guffa

요소에 jQuery 이벤트를 바인딩하는 가장 좋은 방법은 무엇입니까

답변

관련 문제