this 키워드
이벤트 처리 함수에서 this 키워드는 이벤트가 발생된 태그(Element 객체)를 표현한다.
[html 태그]
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
ul li {
font-size: 1.2em;
margin: 10px;
}
div {
font-size: 1.5em;
}
#menu {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<h1>jQuery Event Handle</h1>
<hr>
<h2>점심 메뉴를 선택해 주세요.</h2>
<ul>
<li>가정식 백반</li>
<li>짜장면</li>
<li>짬뽕</li>
<li>설렁탕</li>
<li>순대국</li>
<li>삼계탕</li>
<li>쌀국수</li>
<li>돈까스</li>
</ul>
<div>선택한 점심 메뉴는 <span id="menu">???</span>입니다.</div>
</body>
</html>
$(selector).click(callback)
: 선택자로 검색된 태그에서 click 이벤트가 발생될 경우 콜백함수(이벤트 처리 함수)를 호출하는 메소드
<script>
$("ul li").click(function() {
//이벤트 처리 함수에서 this 키워드는 이벤트가 발생된 태그(Element 객체)를 표현
var choice=$(this).text();//이벤트가 발생된 태그의 태그내용을 반환받아 변수에 저장
$("#menu").text(choice);//선택자로 검색된 태그의 태그내용 변경
});
</script>
선택자로 검색된 태그의 내용이 변경되는 동적인 페이지를 구현할 수 있다.
on 메소드
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
div {
width: 350px;
margin: 0 auto;
padding: 50px;
font-size: 1.2em;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>jQuery Event Handle</h1>
<hr>
<div>마우스를 클릭하거나 이동해 보세요.</div>
</body>
</html>
선택자로 검색된 태그에서 click 이벤트가 발생된 경우 콜백함수를 호출한다. → 단축형
//div 태그를 클릭하면 글자색이 빨간색으로 변경
$("div").click(function() {
$(this).css("color", "red");
});
$(selector).mouseover(callback)
: 선택자로 검색된 태그에 마우스 커서가 진입한 경우 콜백함수(이벤트 처리 함수)를 호출하는 메소드
//div 태그에 마우스 커서가 진입하면 배경색이 노란색으로 변경
$("div").mouseover(function() {
$(this).css("background", "yellow")
});
$(selector).mouseout(callback)
: 선택자로 검색된 태그에 마우스 커서가 벗어날 경우 콜백함수(이벤트 처리 함수)를 호출하는 메소드
//div 태그에서 마우스 커서가 벗어날 경우 원래상태(글자색 검정, 배경색 흰색)로 변경
$("div").mouseout(function() {
$(this).css({"color":"black","background":"white"})
});
$(selector).on(type, callback)
: 선택자로 검색된 태그에서 발생되는 이벤트에 대한 이벤트 처리 함수를 등록하는 메소드 → 일반형
예시)
$("div").on("click", function() {
$(this).css("color", "red");
});
선택자로 검색된 태그에서 발생되는 다수의 이벤트에 대한 이벤트 처리 함수를 등록할 경우 on() 메소드를 이용하는 것을 권장한다.
on() 메소드 매개변수에 JSON 형식으로 표현된 Object 객체를 전달하여 속성명으로 이벤트명을 전달하고 속성값으로 이벤트 처리 함수를 등록할 수 있다.
$("div").on({
"click":function() {
$(this).css("color", "red");
},
"mouseover":function() {
$(this).css("background", "yellow")
},
"mouseout":function() {
$(this).css({"color":"black","background":"white"})
}
});
Off메소드
$(selector).off(event)
: 선택자로 검색된 태그에 등록된 이벤트에 대한 이벤트 처리 함수를 삭제하는 메소드
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>jQuery Event Handle</h1>
<hr>
<button type="button" id="eventOn">이벤트 처리 함수 등록 버튼</button>
<button type="button" id="eventOff">이벤트 처리 함수 제거 버튼</button>
<hr>
<button type="button" id="btn">버튼을 눌러보세요.</button>
<div id="displayDiv"></div>
</body>
</html>
//이벤트 처리 함수 등록 및 실행
$("#eventOn").click(function() {
$("#displayDiv").text("이벤트 처리 함수 등록 성공");
$("#btn").click(function() {
$("#displayDiv").text("이벤트 처리 함수의 명령 실행");
});
});
//이벤트 처리 함수 제거
$("#eventOff").click(function() {
$("#displayDiv").text("이벤트 처리 함수 제거 성공");
$("#btn").off("click");
});
이벤트 처리 함수에서 [false]를 반환해 태그의 기본 이벤트 명령이 제거되고 이벤트 전달이 중지될 수 있도록 만들 수 있다.
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
div {
width: 300px;
margin: 0 auto;
padding: 20px;
text-align: center;
border: 3px solid blue;
}
a, a:visited {
text-decoration: none;
padding: 10px;
border: 3px solid red;
}
</style>
</head>
<body>
<h1>jQuery Event Handle</h1>
<hr>
<div>
<a href="https://www.daum.net">다음(Daum)</a>
</div>
</body>
</html>
$("div").click(function() {
$(this).css("background", "aqua");//부모에 적용된 스타일은 자식에게 상속된다.
$(this).find("a").css("background", "white");//a 태그에는 배경색 적용되지 않도록 설정
});
$("div").find("a").click(function() {
$(this).css("background", "yellow ");
//이벤트 처리 함수에서 [false]를 반환하면 태그의 기본 이벤트 명령이 제거되고 이벤트 전달이
//중지되며 이벤트 처리 함수가 종료
return false;
});
'학원 > 복기' 카테고리의 다른 글
| [jQuery] Form 이벤트 / Submit 이벤트 (0) | 2023.06.14 |
|---|---|
| [jQuery] 마우스(mouse) 이벤트 / 키(key) 이벤트 / 스크롤(scroll) 이벤트 (0) | 2023.06.14 |
| [jQuery] 태그의 추가와 삭제 / 이동 (0) | 2023.06.12 |
| [jQuery] 메소드 (each, css, text, html) (0) | 2023.06.12 |
| [jQuery] 선택자(Selector) (0) | 2023.06.12 |
