예제 9-5. 이벤트 리스너에서 이벤트 객체 전달 받기
WEB/JAVASCRIPT-CONCEPT 2017. 10. 31. 16:49 |2. 이벤트 객체
이벤트 객체란?
이벤트가 발생하면, 브라우저는 발생한 이벤트에 관련된 다양한 정보를 담은 이벤트 리스너에 전달한다.
예를 들어
mousedown 이벤트의 경우 이벤트 객체에 담겨지는 정보는 마우스 좌표와 버튼 번호 등이며
keydown 이벤트의 경우 키 코드값, <shift> 키가 눌러졌는지, <Alt> 키가 함께 눌러졌는지 등의 정보이다.
이벤트가 처리되고 나면 이벤트 객체는 소멸된다.
이벤트가 연이어 발생할 수 있지만, 브라우저는 한 개의 이벤트를 완전히 처리한 후 다음 이벤트를 처리하므로, 이벤트 리스너의 실행 중에는 오직 한개의 이벤트 객체만 존재한다.
이벤트 객체 전달받기
1. 이름을 가진 이벤트 리스너 함수의 경우
1 2 3 4 5 | function f(e) // 매개변수 e로 event 객체를 전달받음. e는 생략 가능 { ... } obj.onclick = f; | cs |
2. 익명 함수의 경우
1 2 3 4 | obj.onclick = fuction(e) // 매개변수 e에 이벤트 객체를 전달받음. e는 생략 가능 { ... } | cs |
3. HTML 태그의 리스너 경우
HTML 태그에 리스너를 만드는 경우 이벤트 객체는 event라는 이름으로 전달된다.
1 2 3 4 5 6 | function f(e) // 매개변수 e로 event 객체를 전달받음. { ... } <button onclick="f(event)">버튼</button> <div onclick="alert(event.type)"></div> | cs |
예제 9-5. 이벤트 리스너에서 이벤트 객체 전달 받기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>이벤트 객체 전달받기</title> </head> <body> <p id="p">마우스를 올려 보세요</p> <button onclick="f(event)">클릭하세요</button> <script> function f(e) { // e는 현재 발생한 이벤트 객체 alert(e.type); // 이벤트 종류 출력 } document.getElementById("p").onmouseover = f; </script> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 9-7. 이벤트의 디폴트 행동 취소 (0) | 2017.10.31 |
|---|---|
| 예제 9-6. 이벤트 객체의 프로퍼티 출력 (0) | 2017.10.31 |
| 예제 9-1. HTML 태그 내에 이벤트 리스너 작성. 예제 9-2. DOM 객체의 이벤트 리스너 프로퍼티에 리스너 등록. 예제 9-3. addEventListener() 사용. 예제 9-4. 익명 함수로 이벤트 리스너 작성 (0) | 2017.10.31 |
| 예제 8-10. HTML 태그의 동적 추가 및 삭제 (0) | 2017.10.31 |
| 예제 8-9. HTML 문서 작성 연습 페이지 만들기 (0) | 2017.10.31 |