jquery on 예제

jQuery는 위임된 이벤트를 필터링하는 데 사용될 때 양식 태그#id.class의 간단한 선택기를 매우 빠르게 처리할 수 있습니다. 따라서 “#myForm”, “a.external”및 “버튼”은 모두 빠른 선택기입니다. 더 복잡한 선택기, 특히 계층적 선택기를 사용하는 위임된 이벤트는 대부분의 응용 프로그램에서 충분히 빠르지만 몇 배 더 느릴 수 있습니다. 계층적 선택기는 문서의 보다 적절한 지점에 처리기를 연결하는 것만으로 피할 수 있습니다. 예를 들어 $( “body” ).on(“클릭”, “#commentForm .addNew”, addComment) 대신 $(“#commentForm” ).on(“클릭”, “.addNew”, addComment)을 사용합니다. 다음 코드 조각에는 하루 중 시간에 따라 사이트에 “Good morning”(또는 “오후”) 메시지를 표시하는 데 사용할 수 있는 Javascript가 표시됩니다. (분명히 이것은 기본적인 예이며 실제로 일부 서버 쪽 스크립팅 언어에서 달성 될 것입니다). 처리기 인수는 함수(또는 false 값, 아래 참조)이며 이벤트 인수에 대한 개체를 전달하지 않는 한 필요합니다. 예제에서 수행한 것처럼 .on() 호출 지점에서 익명 처리기 함수를 제공하거나 명명된 함수를 선언하고 이름을 전달할 수 있습니다.

즉, 사용자가 페이지의 특정 부분을 클릭하거나 마우스를 양식 요소 위로 이동할 때 실행되는 코드를 작성할 수 있습니다. 예를 들어 이 코드는 사용자가 페이지의 li 요소를 클릭하도록 수신 대기합니다. 예를 들어 클릭 이벤트의 기본 동작은 링크를 따르는 것입니다. 모든 브라우저 이벤트에 기본 작업이 있는 것은 아니며 모든 기본 작업을 취소할 수 있는 것은 아닙니다. 자세한 내용은 W3C 이벤트 사양을 참조하십시오. jQuery 1.4에서 동일한 이벤트 처리기를 요소에 여러 번 바인딩할 수 있습니다. 이 기능은 event.data 기능을 사용중이거나 다른 고유 데이터가 이벤트 처리기 함수 주변의 클로저에 있는 경우에 특히 유용합니다. 예: 올바르게 사용하면 jQuery를 사용하면 웹 사이트를 보다 상호 작용적이고 흥미롭고 흥미진진하게 만들 수 있습니다. 이 문서에서는 인기 있는 Javascript 프레임워크를 사용하여 눈에 거슬리지 않고 액세스 가능한 DOM 스크립팅 효과를 만드는 몇 가지 모범 사례와 예제를 공유합니다. 이 문서에서는 Javascript와 관련하여 모범 사례를 구성하는 것이 무엇인지, 또한 jQuery가 모범 사례를 구현하는 프레임워크의 좋은 선택인 이유를 살펴봅습니다.

이벤트를 .trigger() 하면 JavaScript로 바인딩된 이벤트 처리기만 트리거하면 이벤트의 기본 동작이 트리거되지 않습니다. 예를 들어 요소의 클릭 이벤트를 트리거하면 해당 요소의 href으로 자동으로 이동하지 않습니다(그렇게 하는 코드를 작성할 수 있음). 아직 생성되지 않은 하위 요소의 이벤트를 처리하는 기능 외에도 위임된 이벤트 처리기의 또 다른 장점은 많은 요소를 모니터링해야 할 때 오버헤드가 훨씬 낮아질 수 있다는 점입니다. tbody에 행이 1,000개있는 데이터 테이블에서 이 예제에서는 처리기를 1,000개의 요소에 연결합니다. 위임된 이벤트 처리기가 연결될 때 존재하도록 보장된 요소를 선택하면 위임된 이벤트 처리기를 사용하여 이벤트 처리기를 자주 연결하고 제거할 필요가 없습니다. 이 요소는 예를 들어 Model-View-Controller 디자인에서 뷰의 컨테이너 요소이거나 이벤트 처리기가 문서의 모든 버블링 이벤트를 모니터링하려는 경우 문서일 수 있습니다.