[JQUERY] 모든 JQuery와 이벤트는 $ (문서)에 결합해야 하는가?

모든 JQuery와 이벤트는 $ (문서)에 결합해야 하는가?

해결법

1. ---

   1.아니오 - 당신은 바인딩 모든 문서 객체에 이벤트 핸들러를 위임해서는 안됩니다. 그건 아마 당신이 만들 수있는 최악 수행하는 시나리오입니다.

   아니오 - 당신은 바인딩 모든 문서 객체에 이벤트 핸들러를 위임해서는 안됩니다. 그건 아마 당신이 만들 수있는 최악 수행하는 시나리오입니다.

   첫째는, 이벤트 위임은 항상 더 빠른 코드를하지 않습니다. 어떤 경우에는, 그것의가 유리하고 어떤 경우에는 없습니다. 당신이 혜택을 때 당신이 실제로 이벤트 위임을 필요로 할 때 당신은 이벤트 위임을 사용합니다. 그렇지 않으면, 당신은이 일반적으로 더 효율적입니다 같은 이벤트가 발생하는 객체에 직접 이벤트 처리기를 바인딩합니다.

   둘째로 떨어져, 당신은 바인딩 모든 문서 수준에서 사건을 위임해서는 안됩니다. 당신은 많은 이벤트가이 방법을 결합이있을 때 이것은 매우 비효율적이기 때문에 .live ()가 사용되지 않습니다 이유는 정확히이다. 이벤트 처리를 위임의 경우는 동적이지 가장 가까운 부모에 바인딩하는 것이 훨씬 더 효율적입니다.

   셋째 오프, 모든 이벤트는 작업 또는 모든 문제 위임으로 해결 될 수있다. 당신이 입력 컨트롤에 차단 키 이벤트에 원하는 입력 컨트롤에 입력되는 유효하지 않은 키를 차단하면 예를 들어, 위임 된 이벤트는 이벤트가 위임 핸들러까지 거품 시간에 의해 때문에 처리로, 이미 가지고 할 수 없어 입력 제어에 의해 처리하고 그 동작에 영향을 늦기되었다.

   다음은 이벤트 위임이 필요하거나 유리한되는 시간은 :

   jQuery를 이벤트 핸들러 작업을 위임하는 방법을 이해하기 위해, 좀 더 한 요구를이 이해합니다. 때이 같은 것을 전화 :

   $("#myParent").on('click', 'button.actionButton', myFn);
   

   그것은 #myParent 개체의 일반적인 jQuery를 이벤트 처리기를 설치합니다. 클릭 이벤트가이 위임 된 이벤트 핸들러까지 거품 때, jQuery를이 객체에 부착 위임 이벤트 처리기의 목록을 통해 이동 및 이벤트의 원래 요소가 위임 된 이벤트 핸들러의 선택기 중 하나를 일치하는지 확인한다.

   선택기는 상당히 관련 될 수 있기 때문에, 각 JQuery와 선택기를 파싱하는 것이이 방법은 다음 각 셀렉터 일치하는지 원래 이벤트 대상의 특성을 비교한다. 이 싼 작동하지 않습니다. 단지 그들 중 하나가 있다면 그것은 별거 아니,하지만 당신은 문서 객체에 대한 모든 선택기를 넣어 모든 단일 버블 이벤트에 비교 선택기의 수백이 있다면,이 심각하게 처리 성능 거리다 이벤트를 시작할 수 있습니다.

   위임 된 이벤트 핸들러가 실제와 같은 대상 객체에 가까운, 그래서 이러한 이유로, 당신은 당신의 위임 이벤트 핸들러를 설정합니다. 이 방법은 적은 수의 이벤트, 따라서 성능을 각각 위임 된 이벤트 핸들러를 통해 거품이 개선됩니다. 모든 버블 이벤트가 모두 위임 된 이벤트 핸들러를 통해 이동하고 가능한 모든 위임 된 이벤트 선택자에 대해 평가받을 가지고 있기 때문에 문서 객체의 모든 위임 이벤트를 두는 것은 최악의 실적이다. 이것은이 ()했고, 매우 비효율적 인 것으로 판명 .live 무엇 때문에 사용되지 않습니다 이유를 정확하게 .live ()입니다.

   따라서, 최적화 된 성능을 달성하기 위해 :

2. ---

   2.이벤트 대표단은 요소가 실제로 DOM에 존재하기 전에 핸들러를 작성하는 기술이다. 이 방법은 자신의 단점을 가지고 있으며,이 같은 요구 사항이있는 경우에만 사용해야합니다.

   이벤트 대표단은 요소가 실제로 DOM에 존재하기 전에 핸들러를 작성하는 기술이다. 이 방법은 자신의 단점을 가지고 있으며,이 같은 요구 사항이있는 경우에만 사용해야합니다.

   당신은 이벤트 위임을 사용해야합니까?

   왜 이벤트 위임을 사용하지 않겠습니까?

   PS : 심지어 동적 컨텐츠에 대한 당신은 당신이 바인드 내용 후 처리기가 DOM에 삽입받을 경우, 이벤트 위임 방법을 사용할 필요가 없습니다. (동적 컨텐츠가 추가 될 경우 자주 제거되지 / 재 부가)

3. ---

   3.분명히, 이벤트 위임 실제로 지금 좋습니다. 바닐라 JS에 대한 최소한.

   분명히, 이벤트 위임 실제로 지금 좋습니다. 바닐라 JS에 대한 최소한.

   https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/

   "웹 성능 # 그것은 성능을 위해 나쁜 것 문서의 모든 클릭을 듣고 같은 느낌,하지만 실제로 개별 항목에 대한 이벤트 리스너의 무리를하는 것보다 더 확대됨입니다. "

4. ---

   4.나는 jfriend00의 대답에 약간의 발언과 반론을 추가하고 싶습니다. (대부분 그냥 내 의견을 내 직감 기준)

   나는 jfriend00의 대답에 약간의 발언과 반론을 추가하고 싶습니다. (대부분 그냥 내 의견을 내 직감 기준)

   당신 만 등록하고 하나의 요소에 대한 이벤트 위하여려고하는 경우에 성능이 약간 더있을 것이 사실이지만, 나는 그것을 위임이 제공하는 확장 성 혜택에 대해 최대 무게하지 않습니다 믿습니다. 또한 브라우저 (될 것) 나는이의 증거가 없음에도 불구하고, 효율적이 점점 더 처리하는 믿습니다. 제 생각에는, 이벤트 위임 길을 가야하는 것입니다!

   나는 종류의 이것에 동의합니다. 100 % 확신 이벤트는 컨테이너 내부에서 일어날 것입니다 경우,이 컨테이너에 이벤트를 바인딩하는 의미가 있습니다,하지만, 난 여전히 직접 트리거링 요소에 이벤트를 바인딩에 대해 주장 할 것이다.

   이것은 단순히 사실이 아니다. 참조하시기 바랍니다이 codePen : https://codepen.io/pwkip/pen/jObGmjq

   document.addEventListener('keypress', (e) => {
       e.preventDefault();
   });
   

   그것은 당신이 문서에 키 입력 이벤트를 등록하여 입력에서 사용자를 방지 할 수있는 방법을 보여줍니다.

   나는 https://ehsangazar.com/optimizing-javascript-event-listeners-for-performance-e28406ad406c에서이 인용과 함께 답변하고 싶습니다

   각 이벤트 핸들러는 메모리를 필요로하기 때문에 이벤트 위임이 가능한 몇 DOM 이벤트 핸들러로 바인딩을 추진하고 있습니다. 예를 들어, 우리가에 바인드 이벤트 핸들러에 우리가하려는 HTML 정렬되지 않은 목록을 가지고 있다고 가정 해 봅시다. 대신에 (우리가 알고있는 모든 수백 할 수있다) 각 목록의 항목에 대한 클릭 이벤트 처리기를 바인딩, 우리는 부모 정렬되지 않은 목록 자체가 하나의 클릭 핸들러를 바인딩합니다.

   또한, 이벤트 위임의 성능 비용에 대한 인터넷 검색을하는 것은 반환에게 이벤트 위임에 찬성 더 많은 결과를 구글.

   이 어디 설명되어 있습니다? 그게 사실이라면, jQuery를 매우 비효율적 인 방법으로 위임을 처리하는 것, 그리고 나의 반론은 바닐라 JS 적용해야합니다.

   아직 : 나는이 주장을 지원하는 공식 소스를 찾을 싶습니다.

   :: 편집하다 ::

   (그들은 IE8을 지원하기 때문에) jQuery를 실제로 매우 비효율적 인 방법으로 이벤트 버블 링을하고있는 것 같다 https://api.jquery.com/on/#event-performance

   그래서 내 주장의 대부분은 여기에만 바닐라 JS 및 최신 브라우저에 true를 누르고 있습니다.

from https://stackoverflow.com/questions/12824549/should-all-jquery-events-be-bound-to-document by cc-by-sa and MIT license