jQuery 이벤트 메서드
jQuery는 HTML 페이지의 이벤트에 응답하도록 맞춤 제작되었습니다.
이벤트란 무엇입니까?
웹 페이지가 응답할 수 있는 다양한 방문자의 모든 작업을 이벤트라고 합니다.
이벤트는 어떤 일이 발생하는 정확한 순간을 나타냅니다.
예:
- 요소 위로 마우스 이동
- 라디오 버튼 선택
- 요소를 클릭
"fire/fired" 라는 용어 는 종종 이벤트와 함께 사용됩니다. 예: "키를 누르는 순간 키 누르기 이벤트가 발생합니다."
다음은 몇 가지 일반적인 DOM 이벤트입니다.
Mouse Events | Keyboard Events | Form Events | Document/Window Events |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
이벤트 메서드에 대한 jQuery 구문
jQuery에서 대부분의 DOM 이벤트에는 동등한 jQuery 메서드가 있습니다.
페이지의 모든 단락에 클릭 이벤트를 할당하려면 다음과 같이 하십시오.
$("p").click();
다음 단계는 이벤트가 발생할 때 발생해야 하는 일을 정의하는 것입니다. 이벤트에 함수를 전달해야 합니다.
$("p").click(function(){
// action goes here!!
});
일반적으로 사용되는 jQuery 이벤트 메서드
$(문서).ready()
이 $(document).ready()
메서드를 사용하면 문서가 완전히 로드되었을 때 함수를 실행할 수 있습니다. 이 이벤트는
jQuery 구문 장에서 이미 설명되어 있습니다.
딸깍 하는 소리()
이 click()
메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.
사용자가 HTML 요소를 클릭하면 함수가 실행됩니다.
다음 예는 다음과 같습니다. <p>
요소에서 클릭 이벤트가 발생하는 경우; 현재 <p>
요소 숨기기:
예시
$("p").click(function(){
$(this).hide();
});
dblclick()
이 dblclick()
메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.
사용자가 HTML 요소를 두 번 클릭하면 함수가 실행됩니다.
예시
$("p").dblclick(function(){
$(this).hide();
});
마우스 입력()
이 mouseenter()
메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.
이 함수는 마우스 포인터가 HTML 요소에 들어갈 때 실행됩니다.
예시
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
마우스 놓기()
이 mouseleave()
메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.
이 함수는 마우스 포인터가 HTML 요소를 떠날 때 실행됩니다.
예시
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
마우스다운()
이 mousedown()
메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.
HTML 요소 위에 마우스가 있는 동안 왼쪽, 가운데 또는 오른쪽 마우스 버튼을 누르면 함수가 실행됩니다.
예시
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
마우스업()
이 mouseup()
메서드는 이벤트 핸들러 함수를 HTML 요소에 연결합니다.
HTML 요소 위에 마우스가 있는 동안 왼쪽, 가운데 또는 오른쪽 마우스 버튼을 놓으면 함수가 실행됩니다.
예시
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
호버()
hover()
메서드는 두 가지 기능을 사용하며 및 메서드의 조합 mouseenter()
입니다 mouseleave()
.
첫 번째 함수는 마우스가 HTML 요소에 들어갈 때 실행되고 두 번째 함수는 마우스가 HTML 요소를 떠날 때 실행됩니다.
예시
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
집중하다()
이 focus()
메서드는 이벤트 핸들러 함수를 HTML 양식 필드에 연결합니다.
이 함수는 양식 필드에 포커스가 있을 때 실행됩니다.
예시
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
흐림()
이 blur()
메서드는 이벤트 핸들러 함수를 HTML 양식 필드에 연결합니다.
이 함수는 양식 필드가 포커스를 잃을 때 실행됩니다.
예시
$("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");
}
});
jQuery 연습
jQuery 이벤트 메서드
전체 jQuery 이벤트 참조를 보려면 jQuery 이벤트 참조로 이동 하십시오 .