예제 9-6. 이벤트 객체의 프로퍼티 출력
WEB/JAVASCRIPT-CONCEPT 2017. 10. 31. 16:57 |이벤트 객체에 들어 있는 정보
* 이벤트 타겟과 target 프로퍼티
target 프로퍼티는 이벤트 타겟 객체를 가리킨다.
이벤트 타겟이란 이벤트를 유발시킨 객체(태그)이다.
예를들어)
브라우저 화면에서 <button> 태그를 클릭하였다면 click 이벤트의 타겟은 button 객체이다.
target과 유사한 것으로 currentTarget 프로퍼티는 이벤트가 흘러가는 경로 상에 있는 DOM 객체 중 현재 이벤트 리스너를 실행하고 있는 DOM 객체를 가리킨다.
예제 9-6. 이벤트 객체의 프로퍼티 출력
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> </head> <body> <h3>이벤트 객체의 프로퍼티 출력</h3> <hr> <p id="p">버튼을 클릭하면 이벤트 객체를 출력합니다.</p> <button onclick="f(event)">클릭하세요</button> <script> function f(e) { // e는 현재 발생한 이벤트 객체 var text = "type: " + e.type + "<br>" + "target: " + e.target + "<br>" + "currentTarget: " + e.currentTarget + "<br>" + "defaultPrevented: " + e.defaultPrevented; var p = document.getElementById("p"); p.innerHTML = text; // 이벤트 객체의 프로퍼티 출력 } </script> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 9-8. 이벤트 흐름//수정해야됨 (0) | 2017.11.02 |
|---|---|
| 예제 9-7. 이벤트의 디폴트 행동 취소 (0) | 2017.10.31 |
| 예제 9-5. 이벤트 리스너에서 이벤트 객체 전달 받기 (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 |