예제 9-1. HTML 태그 내에 이벤트 리스너 작성. 예제 9-2. DOM 객체의 이벤트 리스너 프로퍼티에 리스너 등록. 예제 9-3. addEventListener() 사용. 예제 9-4. 익명 함수로 이벤트 리스너 작성

WEB/JAVASCRIPT-CONCEPT 2017. 10. 31. 16:18 |

이벤트 종류


주요 이벤트 리스너

메소드

설명

onkeydown

사용자가 아무 키가 누르는 순간

onkeypress

사용자가 알파뉴메릭 키를 누르는 순간

onkeyup

사용자가 누른 키를 놓는 순간

onclick

사용자가 객체에 클릭할 때

oncontextmenu

객체에 오른쪽 마우스 버튼이 클릭될 때. 컨텍스트 메뉴를 출력하고자 할 때

onblcklick

객체에 더블 클릭될 때

onmousedown

객체에 마우스 버튼이 눌러지는 순간

onmouseenter

마우스 커서가 객체 영역 안으로 들어가는 순간

onmouseleave

마우스 커서가 객체 영역에서 벗어나는 순간

onmousemove

객체 위에서 마우스가 움직이는 동안 계속 발생

onmouseover

마우스 커서가 객체 영역(자식들도 포함) 안으로 들어가는 순간

onmouseout

마우스 커서가 객체 영역(자식들도 포함)에서 벗어나는 순간

onmouseup

눌러진 마우스 버튼을 놓는 순간

onwheel

마우스 훌을 굴리는 매 순간. onmousewheel은 폐기되었음.

onabort

이미지나 문서의 로딩이 중단된 경우

onerror

문서나 이미지. 리소스 로딩 시 오류가 발생할 때

onload

문서나 이미지의 로딩이 완료된 직 후

onresize

윈도우. 프레임 혹은 객체의 크기가 변경될 때

onunload

웹 페이지가 언로드된 후

onbeforeprint

웹 페이지 프린트나 미리보기를 시작하기 직전

onafterprint

웹 페이지 프린트를 끝냈거나 미리보기를 마치고 돌아갈 때

onfocus

객체가 포커스를 가지게 되었을 때

onblur

객체가 포커스를 잃을 때

onchange

<input>,<keygen>,<select>,<textarea>의 텍스트나 선택된 내용. 체크 상태 등이 변할 때

onreset

사용자가 폼의 reset 버튼을 누르거나 자바스크립트 코드로 폼을 리셋시켰을 때, 폼의 모든 요소들이 초기 상태로 리셋될 때

onsearch

<input type="search">에 검색 텍스트를 입력하고 <Enter> 키를 누를 때

onselect

<textarea>나 <input type="text|password">에 입력된 텍스트를 사용자가 선택할 때(예를 들어 마우스로 긁어 선택하는 )

onsubmit

사용자가 submit 버튼을 클릭하여 폼을 전송할 때. 자바스크립트 코드 form 객체의 submit() 메소드를 호출할 때는 이벤트 발생 않음


* 이벤트 리스너 만들기

첫번째 방법 : HTML 태그 내에 작성

두번째 방법 : DOM 객체의 이벤트 리스너 프로퍼티에 작성

세번째 방법 : addEventListener() 메소드 이용


1. HTML 태그 내에 이벤트 리스너 작성


예제 9-1. HTML 태그 내에 이벤트 리스너 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 태그에 리스너 작성</title>
</head>
<body>
<h3>HTML 태그에 리스너 작성</h3>
<hr>
<p onmouseover="this.style.backgroundColor='orchid'"
   onmouseout="this.style.backgroundColor='white'"> // 리스너코드
마우스 올리면 orchid 색으로 변경</p>
</body>
</html>
 
cs




2. DOM 객체의 이벤트 리스너 프로퍼티에 리스너 등록


예제 9-2. DOM 객체의 이벤트 리스너 프로퍼티에 리스너 등록

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</title>
<script>
var p;
function init() { // 문서가 완전히 로드되었을 때 호출
    p = document.getElementById("p");
    p.onmouseover = over; // over() 함수를 onmouseover 리스너로 등록, 함수의 이름만 등록해야한다. p.onmouseover = over(); (X)
    p.onmouseout = out; // out() 함수를 onmouseout 리스너로 등록
}
function over() {
    p.style.backgroundColor="orchid";
}
function out() {
    p.style.backgroundColor="white";
}
</script></head>
<body onload="init()">
<h3>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</h3>
<hr>
<p id="p">마우스 올리면 orchid 색으로 변경</p>
</body>
</html>
 
cs
eneeeee




3. DOM 객체의 addEventListener() 메소드 사용


1
2
3
4
5
6
7
addEventListener(eventName,listener,userCapture)
* listener 함수를 eventName의 이벤트를 처리할 리스너로 등록한다.
eventName : 이벤트 타입을 나타내는 문자열. click, load, keydown 등
listener : 이벤트 리스너로 등록할 함수 이름
useCapture : true이면 이벤트 흐름 중 캡쳐 단계에서 실행될 리스너(listener 함수) 등록.
             false이면 버블 단계에서 실행될 리스너 등록. 생략 가능하며 디폴트는 false.
 
cs

ex)
p.addEventListener("mouseover", over); // onmouseover 리스너로 over() 함수 등록, on 없이 이벤트 이름만 사용

addEventListener()를 사용하면 등록한 리스너를 removeEventListener() 메소드를 이용하여 제거할 수 있고,

동일한 이벤트 리스너에 여러 함수를 중복하여 등록할 수 있다.


예제 9-3. addEventListener() 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addEventListener()를 이용한 리스너 등록</title>
<script>
var p;
function init() { // 문서가 완전히 로드되었을 때 호출
    p = document.getElementById("p");
    p.addEventListener("mouseover", over); // 이벤트 리스너 등록
    p.addEventListener("mouseout", out); // 이벤트  리스너 등록
}
function over() {
    p.style.backgroundColor="orchid";
}
function out() {
    p.style.backgroundColor="white";
}
</script>
</head>
<body onload="init()">
<h3>addEventListener()를 이용한 리스너 등록</h3>
<hr>
<p id="p">마우스 올리면 orchid 색으로 변경</p>
</body>
</html>
 
cs


* addEventListener()로 여러 리스너 함수 등록
addEventListener()의 이름에 add가 사용된 이유는 동일한 이벤트에 대해 여러 개의 리스너를 중복 등록할 수 있기 때문이다. 리스너들은 등록된 순서대로 호출된다. 
다음 코드는 두 개의 함수를 onmouseover 리스너로 등록한 경우로, mouseover 이벤트가 발생하면 func1(),func2()가 순서대로 호출된다.

ex)
p.addEventListener("mouseover", func1); // 함수 func1()을 onmouseover 리스너로 등록
p.addEventListener("mouseover", func2); // 함수 func2()을 onmouseover 리스너로 추가등록

* 익명 함수로 이벤트 리스너 작성

익명 함수란 함수의 이름 없이 필요한 곳에 함수의 코드를 바로 작성하는 방법.
다음은 앞의 p 객체의 onmouseover에 등록한 리스너 코드를 익명 함수로 만든 사례이다.

예제 9-4. 익명 함수로 이벤트 리스너 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>익명 함수로 이벤트 리스너 작성</title>
<script>
var p;
function init() { // 문서가 완전히 로드되었을 때 호출
    p = document.getElementById("p");
    p.onmouseover = function () { // 익명 함수
        this.style.backgroundColor = "orchid";
    };
    p.addEventListener("mouseout",
        function () { this.style.backgroundColor="white"; } // 익명 함수
    );
}
</script>
</head>
<body onload="init()">
<h3>익명 함수로 이벤트 리스너 작성</h3>
<hr>
<p id="p">마우스 올리면 orchid 색으로 변경</p>
</body>
</html>
 
cs
















저작자표시 비영리 동일조건

'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글

예제 9-6. 이벤트 객체의 프로퍼티 출력  (0) 2017.10.31
예제 9-5. 이벤트 리스너에서 이벤트 객체 전달 받기  (0) 2017.10.31
예제 8-10. HTML 태그의 동적 추가 및 삭제  (0) 2017.10.31
예제 8-9. HTML 문서 작성 연습 페이지 만들기  (0) 2017.10.31
예제 8-8. document가 닫힌 후 document.write()를 잘못 사용하는 예  (0) 2017.10.31
Posted by 너래쟁이
:

티스토리툴바