jQuery 이벤트 기본 사항

소개

jQuery 문서에 오신 것을 환영합니다! 이 랩에서는 jQuery 이벤트에 대한 소개를 제공합니다.

jQuery 는 선택 항목에 이벤트 핸들러를 연결하는 간단한 메서드를 제공합니다. 이벤트가 발생하면 제공된 함수가 실행됩니다. 함수 내부에서 this는 이벤트를 시작한 DOM 요소를 참조합니다.

이벤트 처리 함수는 이벤트 객체를 받을 수 있습니다. 이 객체는 이벤트의 특성을 결정하고 이벤트의 기본 동작을 방지하는 데 사용될 수 있습니다.

DOM 요소에서 이벤트 응답 설정하기

index.html은 이미 VM 에 제공되어 있습니다.

jQuery 는 페이지 요소에서 이벤트 기반 응답을 설정하는 것을 간단하게 만들어줍니다. 이러한 이벤트는 텍스트가 양식 요소에 입력되거나 마우스 포인터가 이동하는 경우와 같이 최종 사용자의 페이지 상호 작용에 의해 자주 트리거됩니다. 페이지 로드 및 언로드 이벤트와 같은 경우, 브라우저 자체가 이벤트를 트리거합니다.

jQuery 는 대부분의 네이티브 브라우저 이벤트에 대한 편의 메서드를 제공합니다. .click(), .focus(), .blur(), .change() 등을 포함하는 이러한 메서드는 jQuery 의 .on() 메서드의 축약형입니다. on 메서드는 동일한 핸들러 함수를 여러 이벤트에 바인딩하려는 경우, 이벤트 핸들러에 데이터를 제공하려는 경우, 사용자 정의 이벤트를 사용하는 경우 또는 여러 이벤트와 핸들러의 객체를 전달하려는 경우에 유용합니다.

// 편의 메서드를 사용한 이벤트 설정
$("p").click(function () {
  console.log("You clicked a paragraph!");
});

// `.on()` 메서드를 사용한 동등한 이벤트 설정
$("p").on("click", function () {
  console.log("click");
});

웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

새로운 페이지 요소로 이벤트 확장하기

.on()은 리스너를 설정하는 시점에 존재하는 요소에 대해서만 이벤트 리스너를 생성할 수 있다는 점을 기억하는 것이 중요합니다. 예를 들어:

$(document).ready(function () {
  // Now create a new button element with the alert class.
  $("<button class='alert'>Alert!</button>").appendTo(document.body);
  // Sets up click behavior on all button elements with the alert class
  // that exist in the DOM when the instruction was executed
  $("button.alert").on("click", function () {
    console.log("A button with the alert class was clicked!");
  });
});

이벤트 리스너가 설정된 후에 유사한 요소가 생성되면, 이전에 설정한 이벤트 동작을 자동으로 가져오지 않습니다.

Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

여러 이벤트 응답 설정하기

응용 프로그램의 요소는 여러 이벤트에 바인딩되는 경우가 많습니다. 여러 이벤트가 동일한 핸들링 함수를 공유해야 하는 경우, .on()에 공백으로 구분된 이벤트 유형 목록을 제공할 수 있습니다.

// Multiple events, same handler
$("div").on(
  "click change", // Bind handlers for multiple events
  function () {
    console.log("An input was clicked or changed!");
  }
);

각 이벤트가 자체 핸들러를 갖는 경우, 이벤트 이름이 키이고 이벤트 처리를 위한 함수가 값인 하나 이상의 키/값 쌍을 사용하여 객체를 .on()에 전달할 수 있습니다.

// Binding multiple events with different handlers
$("div").on({
  click: function () {
    console.log("clicked!");
  },
  mouseover: function () {
    console.log("hovered!");
  }
});

Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! jQuery 이벤트 기본 사항 랩을 완료했습니다. jQuery API 에 대해 자세히 알아보려면 공식 jQuery 문서를 참조하십시오.