예제 9-7. 이벤트의 디폴트 행동 취소
WEB/JAVASCRIPT-CONCEPT 2017. 10. 31. 17:05 |type(프로퍼티) // 현재 발생한 이벤트의 종류를 나타내는 문자열(click,load 등)
target(프로퍼티) // 이벤트를 발생시킨 객체(DOM 객체 혹은 HTML 태그)
currentTarget(프로퍼티) // 현재 이벤트 리스너를 실행하고 있는 DOM 객체
defaultPrevented(프로퍼티) // 이벤트의 디폴트 행동이 취소되었는지를 나타내는 true/false 값
preventDefault()(메소드) // 이벤트의 디폴트 행동을 취소시키는 메소드
* 이벤트의 디폴트 행동 취소, preventDefault()
HTML 태그 중 몇몇은 특정 이벤트에 대해 디폴트 행동을 한다.
ex)
<a>태그를 클릭하면 웹 페이지를 로드하는것이나
submit 버튼을 클릭하면 폼 데이터를 웹 서버로 전송하는 것이나
reset 버튼을 클릭하면 폼을 초기화하는 것들이다.
자바스크립트로 이러한 디폴트 행동이 일어나지 않게 할 수 있는데 2가지 방법이 있다.
1. 이벤트 리스너에서 false를 리턴하면 디폴트 행동을 취소 시킬 수 있다.
ex) <a href="http://www.naver.com" onclick="return false">이동 안되는 링크</a>
ex) <input type="check box" onclick="return false">체크 안되는 체크 박스</a>
2. 이벤트 객체의 preventDefault()를 호출하면 된다.
ex) <a href="http://www.naver.com" onclick="event.preventDefault()">이동 안되는 링크</a>
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 28 29 30 31 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>이벤트의 디폴트 행동 취소</title> <script> function query() { var ret = confirm("네이버로 이동하시겠습니까?"); return ret; // confirm()의 리턴 값은 true 또는 false } function noAction(e) { e.preventDefault(); // 이벤트의 디폴트 행동 강제취소 } </script> </head> <body> <h3>이벤트의 디폴트 행동 취소</h3> <hr> <a href="http://www.naver.com" onclick="return query()"> 네이버로 이동할 지 물어보는 링크</a> <hr> <form> <input type="checkbox">빵(체크 됨)<br> <input type="checkbox" onclick="noAction(event)">술(체크 안됨) </form> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 9-9. onclick 리스너로 계산기 만들기 (0) | 2017.11.02 |
|---|---|
| 예제 9-8. 이벤트 흐름//수정해야됨 (0) | 2017.11.02 |
| 예제 9-6. 이벤트 객체의 프로퍼티 출력 (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 |