1. DOM 요소에 함수 직접 연결하기
- 이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결 가능
- 이미지를 클릭하면 알림 창 표시하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지를 클릭하면 알림창 표시하기 </title>
<style>
#container {
width:300px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images/cup-1.png" id="cup">
</div>
<script>
var cup = document.querySelector("#cup"); //id=cup 요소를 가져옴
cup.onclick = function(){
alert("이미지를 클릭했습니다");
}
</script>
</body>
2. 함수 이름을 사용해 연결하기
-이벤트가 발생했을 때 실행할 함수를 따로 정의해놓았다면 함수 이름을 사용해 연결할 수 있음
- 이 경우에는 함수 이름 다음에 괄호(())를 추가하지 않음
-이미지를 클릭하면 함수 실행하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지를 클릭하면 알림창 표시하기 </title>
<style>
#container {
width:300px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images/cup-1.png" id="cup">
</div>
<script>
var cup = document.querySelector("#cup"); //id=cup 요소를 가져옴
cup.onclick = changePic; //cup을 클릭하면 changePic 함수를 실행
function changePic() {
cup.src ="images/cup-2.png"; //cup 요소의 경로를 다른 이미지 경로로 바꿈
}
</script>
</body>
</html>
3. DOM의 event 객체 알아보기
- DOM에는 이밴트 정보를 저장하는 event 객체가 있음
- event 객체의 프로퍼티와 메서드
| 프로퍼티 | altKey | 이벤트가 발생할 떄 Alt를 눌렀는지 여부를 boolean값으로 반환 |
| button | 마우스에서 누른 버튼의 키값을 반환 | |
| charCode | keypress 이벤트가 발생했을 때 어떤 키를 눌렀는지 유니코드값으로 반환 | |
| clientX | 이벤트가 발생한 가로위치 반환 | |
| clientY | 이벤트가 발생한 세로위치 반환 | |
| ctrlKey | 이벤트가 발생했을때 Ctrl 를 눌렀는지 여부를 boolean값으로 반환 | |
| pageX | 현재 문서 기준으로 이벤트가 발생한 가로위치를 반환 | |
| pageY | 현재 문서 기준으로 이벤트가 발생한 세로위치 반환 | |
| screenX | 현재 화면 기준으로 이벤트가 발생한 가로위치 반환 | |
| screenY | 현재 화면 기준으로 이벤트가 발생한 세로 위치 반환 | |
| shiftKey | 이벤트가 발생할때 shift를 눌렀는지 여부를 boolean값으로 반환 | |
| target | 이벤트가 최초로 발생한 대상을 반환 | |
| timeStamp | 이벤트가 발생한 시간을 반환 | |
| type | 발생한 이벤트 이름을 반환 | |
| which | 키보드와 관련된 이벤트가 발생할 때 키의 유니코드값을 반환 | |
| 메서드 | preventDefault() | 이벤트를 취소할 수 있는 경우에 취소 |
-이미지에서 클릭한 위치 알아내기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지에서 클릭한 위치 알아내기</title>
<style>
#container {
width:300px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images/cup-1.png" id="cup">
</div>
<script>
var cup = document.querySelector("#cup");
cup.onclick = function(event){
//event 객체를 함수의 인수로 사용
alert("이벤트 유형:"+event.type+"이벤트 발생 위치:"+event.pageX+","+event.pageY);
}
</script>
</body>
</html>
- event 객체에는 이벤트 정보만 들어 있음
- 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지에서 클릭한 위치 알아내기</title>
<style>
#container {
width:300px;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images/cup-1.png" id="card">
</div>
<script>
var card = document.querySelector("#card");
card.onclick = function(event) {
alert("클릭한 이미지 파일 :"+ this.src);
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 17장 실습 (2) | 2023.04.14 |
|---|---|
| 17장 예제 - DOM에서 이벤트 처리하기 (2) (0) | 2023.04.14 |
| 17장 예제 - DOM 요소에 접근하고 속성 가져오기 (3) (0) | 2023.04.13 |
| 17장 예제 - DOM 요소에 접근하고 속성 가져오기 (2) (2) | 2023.04.13 |
| 17장 예제 - DOM 요소에 접근하고 속성 가져오기(1) (0) | 2023.04.13 |
