[jQuery] 이벤트

DOM 이벤트

웹 페이지가 응답할 수 있는 모든 방문자의 행동을 이벤트라고 한다.

이벤트는 어떤 일이 발생하는 정확한 순간을 나타낸다.

예:

• 요소 위로 마우스 이동
• 라디오 버튼 선택
• 요소 클릭

"fires/fired" 라는 용어는 종종 이벤트와 함께 사용된다. 예: "키를 누르는 순간 키 누르기 이벤트가 발생한다."

몇 가지의 일반적인 DOM 이벤트

이벤트 메소드 문법

jQuery에서 대부분의 DOM 이벤트에는 동등한 jQuery 메서드가 있다.

페이지의 모든 단락에 클릭 이벤트를 할당하려면 다음과 같이 사용한다.

$("p").click();

다음 단계는 이벤트가 발생할 때 발생해야 하는 작업을 정의하는 것이다. 이벤트에 함수를 전달해야 한다.

$("p").click(function(){
  // action goes here!!
});

일반적으로 사용되는 jQuery 이벤트 메소드

$(document).ready()

$(document).ready()메소드를 사용하면 문서가 완전히 로드되었을 때 함수를 실행할 수 있다.

click()

click() 메소드는 사용자가 HTML 요소를 클릭하면 콜백함수를 실행시키는 이벤트 핸들러 함수다.

클릭 이벤트가 <p>요소에서 실행될 때 현재 <p>요소 숨기기:

$("p").click(function(){
  $(this).hide();
});

dblclick()

dblclick() 메소드는 사용자가 HTML 요소를 더블클릭하면 콜백함수를 실행시키는 이벤트 핸들러 함수다.

$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()

mouseenter() 메소드는 마우스 포인터가 HTML 요소에 들어가면 콜백함수를 실행시키는 이벤트 핸들러 함수다.

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

mouseleave()

mouseleave() 메소드는 마우스 포인터가 HTML 요소를 벗어나면 콜백함수를 실행시키는 이벤트 핸들러 함수다.

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

mousedown()

mousedown() 메소드는 마우스가 HTML 요소 위에 있는 동안 왼쪽, 가운데 또는 오른쪽 마우스 버튼을 누르면 콜백함수를 실행시키는 이벤트 핸들러 함수다.

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

mouseup()

mouseup() 메소드는 마우스가 HTML 요소 위에 있는 동안 왼쪽, 가운데 또는 오른쪽 마우스 버튼을 놓으면 콜백함수를 실행시키는 이벤트 핸들러 함수다.

$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});

hover()

hover() 는 mouseenter() mouseleave()이 두 가지 기능을 조합하여 사용하는 방법이다 .

첫 번째 함수는 마우스가 HTML 요소에 들어갈 때 실행되고 두 번째 함수는 마우스가 HTML 요소를 떠날 때 실행된다.

$("#p1").hover(function(){
  alert("You entered p1!"); // 첫 번째 함수
},
function(){
  alert("Bye! You now leave p1!"); // 두 번째 함수
});

focus()

focus()메소드는 이벤트 핸들러 함수를 HTML Form 영역에 연결하고 포커스를 받으면 콜백함수가 실행된다.

$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

blur()

blur()메소드는 이벤트 핸들러 함수를 HTML Form 영역에 연결하고 포커스를 잃으면 콜백함수가 실행된다.

$("input").blur(function(){
  $(this).css("background-color", "#ffffff");
});

on() 메서드

on()메서드는 선택한 요소에 대해 하나 이상의 이벤트 처리기를 연결한다.

클릭 이벤트를 <p>요소에 연결하기:

$("p").on("click", function(){
  $(this).hide();
});

<p>요소에 여러 이벤트를 연결하기:

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

반응형