** 기본 이벤트 제거
- 일부 htm 태그는 이미 이벤트 핸들러가 존재한다.
- a태그는 다른페이지로 이동하는 이벤트가 존재. a태그의 기본 이벤트.
예) 입력 폼양식에서 유효성 검사에서 submit 기본 이벤트 제거
고전모델
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
window.onload = function(){
document.getElementById('my_form').onsubmit = function(){
//변수 선언
var pass = document.getElementById('pass').value;
var pass_check = document.getElementById('pass_check').value;
//비교
if(pass == pass_check){
alert("성공");
}else{
alert("다시 입력하세요.");
return false;
}
}
}
</script>
</head>
<body>
<form id="my_form" >
<label for="name">이름</label><br>
<input type="text" name="name" id="name" /><br>
<label for="pass">비밀번호</label><br>
<input type="password" name="pass" id="pass" /><br>
<label for="pass_check">비밀번호확인</label><br>
<input type="password" name="pass_check" id="pass_check" /><br>
<input type="submit" value="send" /><br>
</form>
</body>
</html>
인라인 모델인 경우는
<script>
function check(){
//검사
..
return false;
}
</script>
<form onsubmit ='return check()' >
...
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
*{
border: 1px solid black;
}
#outer_div{ background-color: red;}
#inner_div{ background-color: orange;}
#h1{ background-color: yellow;}
#paragraph{ background-color: green;}
</style>
</head>
<body>
<div onclick="alert('outer_div')" id="outer_div">
<div onclick="alert('inner_div')" id="inner_div">
<h1 onclick="alert('h1')" id="h1">
<p onclick="alert('paragraph')" id="paragraph">paragraph</p>
</h1>
</div>
</div>
</body>
</html>
; 안에서 밖으로 경고창이 발생한다.
이벤트 버블링 : 자식노드에서 부모노드순으로 이벤트가 발생
* 이벤트가 전달되는것을 막는 기능
예)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
window.onload = function(){
//이벤트 연결
document.getElementById('header').onclick = function(){
alert("header clicked!");
}
document.getElementById('paragraph').onclick = function(){
alert("<p> tag is clicked!");
}
}
</script>
</head>
<body>
<h1 id="header">
<p id="paragraph">paragraph</p>
</h1>
</body>
</html>
; <p> 태그를 클릭하면 버블링이 발생해서 경고창이 두번 뜬다.(p, h1)
이벤트 버블링을 막는 방법
익스플로러 : 이벤트 객체의 cancelBubble속성을 true
그외 : 이벤트 객체의 stopPropagation()사용.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
window.onload = function(){
//이벤트 연결
document.getElementById('header').onclick = function(){
alert("header clicked!");
}
document.getElementById('paragraph').onclick = function(e){
//이벤트 객체 처리
var event = e || window.event;
alert("<p> tag is clicked!");
//이벤트 전달 제거
event.cancelBubble = true;
if ( event.stopPropagation ){
event.stopPropagation();
}
}
}
</script>
</head>
<body>
<h1 id="header">
<p id="paragraph">paragraph</p>
</h1>
</body>
</html>
; 경고창이 한번만 발생한다.
; var event = e || window.event
- e가 존재하면 event에 넣고, e가 undefined이면 window.event속성을 event에 넣어라.
- 익스플로러8이하 버전은 이벤트가 발생하면 이벤트객체를 window.event속성으로 전달하지만 , 그외는 이벤트 핸들러의 매개변수로 전달한다.
'WEB > Javascript' 카테고리의 다른 글
| 14. 이벤트 (0) | 2013.04.16 |
|---|---|
| 13.DOM - 문서객체 스타일 조작 및 제거 (0) | 2013.04.16 |
| 12. DOM - 문서 객체 가져오기 (0) | 2013.04.16 |
| 11. DOM - 객체생성 (0) | 2013.04.15 |
| 10.브라우저 객체 모델과 html페이지 실행순서 (0) | 2013.04.15 |