반응형
preventDefault();
preventDefault함수는 기본이벤트를 제거하는 역할을한다.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
* {
margin: 5px;
padding: 5px;
border: 2px solid black;
}
</style>
<script type ="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type ="text/javascript">
$(document).ready(function(){
$('a').click(function(e){
$(this).css('background','blue');
e.preventDefault(); // preventDefault함수는 기본이벤트를 제거하는 역할을한다. 여기서는 a태그의 기본이벤트를 제거시켜준다.
});
$('h1').click(function){
$(this).css('background','red');
})
});
</script>
</head>
<body>
daum
</body>
</html>
stopPropagation()
stopPropagation()은 이벤트 전파를 막기위한 함수
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
* {
margin: 5px;
padding: 5px;
border: 2px solid black;
}
</style>
<script type ="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type ="text/javascript">
$(document).ready(function(){
$('a').click(function(e){
$(this).css('background','blue');
e.preventDefault(); // preventDefault함수는 기본이벤트를 제거하는 역할을한다. 여기서는 a태그의 기본이벤트를 제거시켜준다.
e.stopPropagation();//이벤트 전파를 막기위한 함수.
});
$('h1').click(function){
$(this).css('background','red');
})
});
</script>
</head>
<body>
daum
</body>
</html>
return false;
return false; 는 preventDefault() + stopPropagation. 기본이벤트와 이벤트전파하는 것을 모두 막아줌.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
* {
margin: 5px;
padding: 5px;
border: 2px solid black;
}
</style>
<script type ="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type ="text/javascript">
$(document).ready(function(){
$('a').click(function(e){
$(this).css('background','blue');
return false; // preventDefault() + stopPropagation. 기본이벤트와 이벤트전파하는 것을 모두 막아줌.
});
$('h1').click(function){
$(this).css('background','red');
})
});
</script>
</head>
<body>
daum
</body>
</html>
반응형
'wEb > javascript' 카테고리의 다른 글
| CommonJS(커먼JS) (0) | 2018.12.19 |
|---|---|
| jquery .css 변수 사용 (0) | 2013.09.29 |
| keydown(), keyup(), keypress() (0) | 2013.09.28 |
| .live() 와 .bind() (0) | 2013.09.28 |
| mouseenter와 mouseleave를 동시에 쓰는 함수 hover() (0) | 2013.09.28 |
| $(document).ready (0) | 2013.08.16 |
| jQuery API .nextAll() test (0) | 2013.06.07 |
| 제이쿼리 트래버싱_jquery traversing API (0) | 2013.06.06 |
| 자바스크립트 배열작성 방식 3가지 (0) | 2013.03.25 |
| jquery를 이용한 필요없는 셀지우기 (0) | 2012.04.20 |