[JQUERY] JQuery와 이벤트 처리기 - "최고"방법은 무엇

JQuery와 이벤트 처리기 - "최고"방법은 무엇

해결법

1. ---

   1.내 생각 엔 당신의 페이지에 일부 개체가 동적으로 추가 / 제거 및 자동 새로 추가 된 객체에 대한 이벤트를하기 위해 이벤트 처리를 위임 필요가되기 때문에 당신은 행동의 차이를보고있는 것입니다.

   내 생각 엔 당신의 페이지에 일부 개체가 동적으로 추가 / 제거 및 자동 새로 추가 된 객체에 대한 이벤트를하기 위해 이벤트 처리를 위임 필요가되기 때문에 당신은 행동의 차이를보고있는 것입니다.

   당신의 다양한 예 중, 여기에 행동의 두 가지 기본 유형이 있습니다 :

   $('button').click(function () {
       console.log(this) + " - 1";
   });
   
   $('button').on('click', function () {
       console.log(this) + " - 2";
   });
   
   $body.find('button').on('click', function () {
       console.log(this) + " - 5";
   });
   

   세 위의 모든 코드가 처음 실행되는 시간에 페이지에있는 각 버튼 객체에 직접 클릭 핸들러를 연결합니다. 이들은 기본적으로 동일하다. .click () 구문은 바로 가기입니다. $ body.find ( '버튼') 본문에 모든 버튼을 모두 선택부터 $ ( '버튼')와 동일한 기능을합니다.

   참고 :이 이벤트 핸들러는이 코드가 처음 실행될 때 존재하는 버튼 객체에 첨부됩니다. 이후 문서에 추가 된 버튼 개체는 그들에게 연결된 이벤트 핸들러가되지 않습니다.

   $(document).on('click', 'button', function () {
       console.log(this) + " - 3";
   });
   
   $(document.body).on('click', 'button', function () {
       console.log(this) + " - 4";
   });
   

   이 두 가지를 사용 위임 이벤트 처리는 클릭을 볼 수있는 문서 또는 몸 객체에 거품까지 그. 이들은 마찬가지로 유사하다. 다음은 버튼 태그에 발생한 모든 클릭 이벤트를 처리합니다. 이벤트 처리기가 버튼 객체에 직접 부착되지 않기 때문에, 버튼 와서 페이지와이 핸들러의 동작을 얻을 것이다 언제든지 존재하는 모든 버튼 객체에 갈 수 있습니다.

   그것은 일반적으로 문서 또는 몸 객체에 바인드 바인드 위임 방법에 권장되지 않습니다. 사실, 이것은 그게했고,이 성능 문제가 발생할 수있는 일이기 때문에 .live ()가 사용되지 않습니다 이유입니다. 문제는 당신이 모두 같은 개체에 바인딩 위임 이벤트를 많이 얻을 수 있다면, 때마다 이벤트가 발생하고이 객체까지 거품, JQuery와에있는 핸들러를보고 다른 선택기의 많은에 원래의 선택을 비교한다는 것이다 요구.

   이 바인딩 실제 목표에 근접 가능한 객체로하는 상위 개체에 이벤트를 위임하지만, 분명히 제거 추가되지 않습니다 부모 개체 / (당신이 페이지에 끊임없이 일을해야 할 선택해야하는 것이 훨씬 낫다 ).

   당신의보다 구체적인 코드 예제에서는 bxRetrieveCustomer의 사업부를 가정하는 것은 동적으로 생성되지 않습니다, 당신은이를 변경해야합니다 :

   $(document).on("click", ".tag-open", function (event) {
       // DO SOMETHING
   }); 
   

   이에:

   $("#bxRetrieveCustomer").on("click", ".tag-open", function (event) {
       // DO SOMETHING
   }); 
   

   어떤 여전히 이벤트 처리를 위임 할 것이다, 그러나 더 효율적으로 작동 할 수 있도록 실물에 가까운 다량 이벤트 처리기를 바인딩합니다.

   있는 가장 좋습니다, 그것은 의존한다 :

   당신은 당신이에 바인딩 이벤트를 원하는 코드를 바인딩 이벤트를 실행 한 후 생성 된 개체가있는 경우에, 당신은 동적으로 사후 만들어지지 않습니다 가장 가까운 조상 객체에 위임 이벤트 처리를 사용하는 것이 좋습니다.

   당신은 객체 (그들은 정적 인 경우에도)이 매우 많은 경우 각 개별 개체에 대한 그들 모두보다는 수천 하나의 이벤트 핸들러를 설치하기 때문에, 다음 위임 이벤트 처리는 훨씬 더 효율적으로 설치됩니다.

   당신이 중간 또는 정적 객체의 소수가있는 경우 다음 그들에게 직접 이벤트 핸들러를 바인딩 것이 가장 효율적입니다. 그것은 처음에 바인드 각 개체에 이벤트 핸들러에 작은 조금 더 시간이 걸릴하지만 이벤트의 시간에 가장 효율적입니다.

2. ---

   2.가장 원한다면 난 당신이 너무 인수를 전달하여 다른 이벤트를 재사용 할 수있는 일반적인 방법의 어떤 종류를 만들 수 있기 때문에) (CSTE 연구진 사용하는 것이 좋습니다 수 있습니다 (즉. 이벤트 이름) .I 보통 (CSTE 연구진 사용)

   가장 원한다면 난 당신이 너무 인수를 전달하여 다른 이벤트를 재사용 할 수있는 일반적인 방법의 어떤 종류를 만들 수 있기 때문에) (CSTE 연구진 사용하는 것이 좋습니다 수 있습니다 (즉. 이벤트 이름) .I 보통 (CSTE 연구진 사용)

from https://stackoverflow.com/questions/9730277/jquery-event-handlers-whats-the-best-method by cc-by-sa and MIT license