JQuery_jquery의 DOM 이벤트 바인딩 사용법에 대한 자세한 설명

이 기사의 예에서는 JQuery의 DOM 이벤트 바인딩 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

문서가 로드된 후 특정 작업을 완료하기 위해 이벤트를 요소에 바인딩하려는 경우 bin() 메서드를 사용하여 특정 이벤트를 일치하는 요소에 바인딩할 수 있습니다.

bind( type [, data] , fn);

bind() 메소드에는 아래에 설명된 3개의 매개변수가 있습니다.

첫 번째 매개변수는 다음을 포함한 이벤트 유형입니다. 흐림, 초점, 로드, 크기 조정, 스크롤, 언로드, 클릭, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, 변경, 선택, 제출, keydown , keypress, keyup, error 등은 물론 이름을 사용자 정의할 수도 있습니다.
두 번째 매개변수는 선택적 매개변수이며 event.data 속성 값으로 이벤트 객체에 전달되는 추가 데이터 객체입니다.
세 번째 매개변수는 미터와 결합된 처리 함수입니다.

jQuery의 이벤트 바인딩 유형은 일반적인 JavaScript 이벤트 바인딩 유형에 비해 "on"이 적은 것을 확인할 수 있습니다. 예를 들어 마우스 클릭 이벤트는 jQuer의 click 이벤트에 해당하고 JavaScript의 onclick() 함수에 해당합니다.

요구 사항에 따라 다음 단계를 완료해야 합니다.

1. DOM이 로드될 때까지 기다립니다.
2. "제목"이 있는 요소를 찾아 클릭 이벤트를 바인딩합니다.
3. "content" 요소를 찾아 "content" 요소를 표시합니다.

$(function(){
 $("#panel h5.head").bind("click",function(){
   var $content = $(this).next();
   if($content.is(":visible")){
      $content.hide();
    }else{
      $content.show();
    }
  })
})

ready() 메서드와 마찬가지로 바인딩() 메서드도 여러 번 호출할 수 있습니다.

위의 jQuery 코드에는 JavaScript와 동일한 기능을 갖는 키워드 this가 있습니다. 이는 해당 동작을 전달하는 DOM 요소를 나타냅니다. 이 DOM 요소가 jQuery에서 메소드를 사용하도록 하려면 $(this)를 사용하여 jQuery 객체로 변환할 수 있습니다.

요소 표시 여부를 확인하려면 jQuery에서 is() 메서드를 사용할 수 있습니다. 코드에서는 $(this).next("div.content")가 여러 번 사용되므로 $content에 대한 지역 변수를 정의할 수 있습니다.

위의 예에서는 요소에 바인딩된 이벤트 유형이 클릭입니다. 사용자가 클릭하면 바인딩된 이벤트가 트리거되고 해당 이벤트의 함수 코드가 실행됩니다. 이제 이벤트 유형을 mouseover 및 mouseout으로 변경합니다. 즉, 커서가 위로 미끄러지면 이벤트가 트리거됩니다. 다음 단계가 필요합니다.

1. DOM이 로드될 때까지 기다립니다.
2. "제목"이 위치한 요소를 찾아 마우스 오버 이벤트를 바인딩합니다.
3. "콘텐츠" 요소를 찾아 "콘텐츠"를 표시합니다.
4. "제목"이 있는 요소를 찾아 mouseout 이벤트를 바인딩합니다.
5. "콘텐츠" 요소를 찾아 "콘텐츠"를 숨깁니다.

코드 실행 후 "제목" 링크 위로 커서를 이동하면 해당 "콘텐츠"가 표시됩니다. 커서가 "제목" 링크 밖으로 슬라이드되면 해당 "콘텐츠"가 숨겨집니다.

코드는 다음과 같습니다.

$(function(){ 
 $("#panel h5.head").bind("mouseover",function(){ 
  $(this).next().show(); 
 }); 
  $("#panel h5.head").bind("mouseout",function(){ 
   $(this).next().hide(); 
 }) 
})

위의 예에서는 click 이벤트, mouseover 이벤트 및 mouseout 이벤트를 각각 "제목"에 바인딩하는 데 바인딩() 메서드가 사용됩니다. 또한, bin0 메서드는 다른 모든 JavaScript 이벤트도 바인딩할 수 있습니다.

click, mouseover, mouseout과 같은 이벤트는 프로그램에서 자주 사용됩니다. jQuery는 이를 위한 축약된 메소드 세트도 제공합니다. 약어 메서드는 바인딩() 메서드와 유사하며 동일한 효과를 얻습니다. 유일한 차이점은 코드 양을 줄일 수 있다는 것입니다.

예를 들어 약어를 사용하여 이벤트를 바인딩하도록 위의 예를 다시 작성하면 코드는 다음과 같습니다.

$(function(){
 $("#panel2 h5.head").mouseover(function(){
   $(this).next().show();
  });
  $("#panel2 h5.head").mouseout(function(){
    $(this).next().hide();
  })
})

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.