jQuery의 이벤트에 대해 알아보자
라이브러리 연결 후 진행
이벤트 핸들러 (이벤트 발생 시 실행할 function) 연결 방법 종류
방법 1. 이벤트 메소드를 통한 연결
[ 표현법 ]
$("선택자").이벤트메소드(function() {
해당 요소에 해당 이벤트 발생 시 실행할 내용;
});
![]() |
기본 상태 |
![]() |
한 번 클릭 |
![]() |
더블 클릭 |
<h4 id="test1">클릭해보세요</h4>
<script>
$(function() {
$("#test1").click(function() { // 클릭 이벤트
$(this).html("클릭되었습니다");
});
$("#test1").dblclick(function() { // 더블클릭 이벤트
$(this).css("color", "red");
});
$("#test1").click(function() { // 클릭 이벤트 중복이라도 둘 다 적용됨
$(this).css("backgroundColor", "yellow");
});
});
</script>
방법 2. on 메소드를 이용한 방법
[ 표현법 ]
$("선택자").on("이벤트명", function() {
해당 요소에 해당 이벤트 발생 시 실행할 내용;
});
![]() |
기본 상태 |
![]() |
마우스 올렸을 때 |
![]() |
마우스 뗐을 때 |
![]() |
클릭했을 때 |
<h4 id="test2">마우스 클릭 및 올려 보세요</h4>
<script>
$(function() {
/*
$("#test2").on("click", function() {
$(this).css("backgroundColor", "orangered").text("클릭됨")
});
$("#test2").on("mouseenter", function() {
$(this).css("color", "purple").text("마우스 올라감")
});
*/
// on 메소드를 통해 이벤트 연결 시
// 한 요소에 다중으로 이벤트 걸기가 가능해짐
$("#test2").on({click:function() {
$(this).css("backgroundColor", "orangered").text("클릭됨");
// click 이벤트가 발생하는 순간
// 기존의 mouseenter, mouseout 이벤트 제거
// 이벤트 부여할 때: on 메소드
// 이벤트 제거할 때: off 메소드
$(this).off("mouseenter").off("mouseout").text("이벤트 제거됨");
// 연달아서 이벤트 핸들러 제거 가능
}, mouseenter:function(){
$(this).css("backgroundColor", "yellowgreen").text("마우스 올라감");
}, mouseout:function(){
$(this).css("backgroundColor", "yellow").text("마우스 빠져나감");
}});
})
</script>
방법 3. on 메소드를 이용한 방법 2
[ 표현법 ]
$("상위요소선택자").on("이벤트명", "하위요소선택자", function() {
선택된 상위요소선택자 안에 존재하는 해당 하위요소에 해당 이벤트가 발생했을 때 실행할 내용;
});
<div id="wrap">
<h4>h4를 클릭하세요</h4>
<h5>h5를 입력하세요</h5>
<script>
$(function() {
$("#wrap h4").on("click", function() {});
$("#wrap").on("click", "h4", function() {
alert("클릭되었습니다.");
$(this).html("h4가 클릭됨");
});
// 이 문서의 전체 요소들 중에서 모든 h4, h5에 대해 클릭을 걸고 싶음
$("body").on("click", "h4, h5", function() {
$(this).css("backgroundColor", "purple").css("color", "pink");
});
});
</script>
단, 동적으로 만들어진 요소에도 동일한 이벤트를 걸고 싶다면 반드시 방법 3으로 진행
👉🏻 동적으로 만들어진 요소: 처음에 문서 로딩 시에는 없다가 나중에 새로이 만들어지는 요소
![]() |
기본 상태 |
![]() |
처음부터 만들어지는 놈을 눌렀을 때 (방법 1, 2, 3 동일) |
![]() |
방법 3에서만 진행 가능함 이 상태에서 클릭하면 만들어지는 놈을 눌렀을 때 (방법 1, 2에서는 먹히지 않음!) |
<div id="wrap2" style="border:1px solid red">
<h6>기존에 존재하는 요소 - 문서 로딩 시에 처음부터 만들어지는 놈</h6>
<!-- append로 새로운 요소를 동적으로 만들어 낼 공간 -->
</div>
<script>
$(function() {
// 방법 1. 이벤트 메소드를 호출 => 동적으로 만들어진 요소에 이벤트 적용 안 됨
/*
$("#wrap2>h6").click(function() {
$("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어지는 요소 - 클릭하면 만들어지는 놈");
});
// => 로딩되고 나서 단 한 번 이미 실행이 끝났기 때문에 새로 만들어진 애한테는 속성을 걸 수 없음
*/
// 방법 2. on 메소드 호출 1 => 동적으로 만들어진 요소에 이벤트 적용 안 됨
/*
$("#wrap2>h6").on("click", function() {
$("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어지는 요소 - 클릭하면 만들어지는 놈");
})
// => 이미 클릭 속성 부여된 후에 만들어진 요소이기 때문에 새로 만들어진 요소에는 클릭 속성이 없는 상태
*/
// 방법 3. on 메소드 호출 2 => 동적으로 만들어진 요소에 이벤트 적용이 잘됨
// 서버 수업 때 Ajax(응답 데이터를 "동적"으로 뿌려 줌)
$("#wrap2").on("click", "h6", function() {
$("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어지는 요소 - 클릭하면 만들어지는 놈");
});
// '상위 요소 선택 후, 그것의 하위 요소에 "h6"이 있다면 속성을 주겠다'라는 뜻이기 때문에 가능함
});
</script>
일회성 이벤트
✔️ 이벤트를 딱 한 번만 연결할 때 사용
$("선택자").one("이벤트명", function() { <br>
이벤트 발생 시 실행할 내용; <br>
});
<h6 id="test3">단 한 번만 실행할 것</h6>
<script>
$(function() {
$("#test3").one("click", function() {
alert("처음이자 마지막 이벤트 발생");
});
});
</script>
👉🏻 확인 후 다시 눌렀을 때는 alert창 뜨지 않음
키보드 관련 이벤트
👉🏻 keydown / keypress : 키보드 키가 눌려질 때 발생하는 이벤트
> keydown : 키보드의 모든 키가 눌러질 때 그냥 발생됨
> keypress : 키보드의 펑션키, 기능키, 한글을 제외한 나머지 키가 눌러질 때만 발생됨
👉🏻 keyup : 키가 떼어질 때 발생됨
<input type="text" id="test4">
<script>
$(function() {
// $("#test4").keydown(function() { // 모든 키에 적용
$("#test4").keypress(function() { // 일부 키(한글, 캡스락, ...)에는 적용 안 됨
// 두 이벤트 모두 키를 누르고 있으면 계속 숫자 올라감
console.log("눌러졌음");
});
});
</script>
<input type="text" id="test4">
<script>
$(function() {
$("#test4").keyup(function() {
console.log("눌러졌다가 떼어짐");
});
});
</script>
<input type="text" id="test4">
<script>
$(function() {
// $("#test4").keydown(function() { // 모든 키에 적용
$("#test4").keypress(function() { // 일부 키(한글, 캡스락, ...)에는 적용 안 됨
// 두 이벤트 모두 키를 누르고 있으면 계속 숫자 올라감
console.log("눌러졌음");
console.log($(this).val());
// 눌러지는 시점의 value값을 가지고 오기 때문에 글자 인덱스가 -1씩 밀림
console.log($(this).val().length);
});
});
</script>
<script>
$(function() {
$("#test4").keyup(function() {
// console.log("눌러졌다가 떼어짐");
console.log($(this).val());
// 눌러지고 값이 입력되고 난 후에 키가 떼어질 때 발생하기 때문에 글자 인덱스가 밀리지 않음
console.log($(this).val().length);
});
});
</script>
글자 수 세기 프로그램 만들기(동적으로 글자 수 세기)
![]() |
![]() |
이런 거를 만들어 봄 | 내가 해냄 |
<div>
150자 내로 작성하시오 <br>
<textarea id="content" cols="30" rows="10"
style="resize:none;" maxlength="150"></textarea> <br>
<span id="count">0</span> / 150
</div>
<script>
$(function() {
$("#content").keyup(function() { // 키보드가 튕겨 올라올 때마다 아이디값 content인 영역에
$("#count").text( $(this).val().length); // (그 영역에 입력된 글자의 길이)를 아이디값 count 영역에 나타내라
});
});
</script>