자바스크립트에서 이벤트 수행 막기
event.preventDefault()
현재 요소에 직접 걸어준 이벤트는 처리하지만 태그의 기본 동작은 작동하지 않도록 막는다.
event.stopPropagation()
기본적으로 하위 요소에서 발생한 이벤트는 상위 요소에서도 캐치가 가능한데 이 함수는 현재 요소에서 발생한 이벤트가 상위 요소에서는 발생하지 않도록 막아준다.
event.stopImmediatePropagation()
현재 요소에 발생한 이벤트가 상위 요소에서 발생하지 않도록 막아주고, 현재 요소의 이벤트가 여럿일 경우 첫 번째 정의한 이벤트만 작동하도록 한다.
return false
jQuery에서 : event.preventDefault()와 event.stopPropagation() 동시 수행한다.
javascript에서 : event.preventDefault()와 같다.
ex) <a href="javascript:return false;">링크예시<a>
예제 소스
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
nav {background-color: gray; padding: 40px;}
div {background-color: yellow; padding: 40px;}
a {background-color: green; padding: 20px; display: inline-block;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("div").on("click",function() {
console.log("div 태그의 클릭 이벤트");
});
$("a").on("click",function(event) {
console.log("a 태그의 클릭 이벤트1");
event.preventDefault();
});
$("a").on("click",function(event) {
console.log("a 태그의 클릭 이벤트2");
event.preventDefault();
});
});
</script>
</head>
<body>
<nav>
<div>
<a href="http://www.daum.net" target="_blank">링크</a>
<a href="javascript:console.log('a 태그의 인라인 자바스크립트 호출');">alert</a>
</div>
</nav>
</body>
</html>
event.preventDefault()
$(function(){
$("div").on("click",function() {
console.log("div 태그의 클릭 이벤트");
});
$("a").on("click",function(event) {
console.log("a 태그의 클릭 이벤트1");
event.preventDefault();
});
$("a").on("click",function(event) {
console.log("a 태그의 클릭 이벤트2");
event.preventDefault();
});
});
스크립트 부분을 위 처럼 작성 후
1. <a> 클릭시 - a 태그의 링크 기능이 작동하지 않는다 - a 태그의 인라인 자바스크립트가 작동하지 않는다. - a 태그에 걸어둔 2개의 이벤트가 모두 작동한다. - 부모 요소인 div 태그에 걸어둔 이벤트도 함께 작동한다. 2. <div> 클릭시 - div 태그에 걸어둔 이벤트만 작동한다. 3. <nav> 클릭시 - 아무런 작동이 없다.
event.stopPropagation()
$(function(){
$("div").on("click",function() {
console.log("div 태그의 클릭 이벤트");
});
$("a").on("click",function(event) {
console.log("a 태그의 클릭 이벤트1");
event.stopPropagation();
});
$("a").on("click",function(event) {
console.log("a 태그의 클릭 이벤트2");
event.stopPropagation();
});
});
위 처럼 스크립트 사용시 자식 요소에서 클릭 이벤트가 발생하더라도 부모 요소에 걸어둔 이벤트는 작동하지 않았다.
스크립트 부분을 위 처럼 작성 후
1. <a> 클릭시 - a 태그의 링크 기능이 정상 작동한다 - a 태그의 인라인 자바스크립트가 정상 작동한다. - a 태그에 걸어둔 2개의 이벤트가 모두 작동하였다. - 부모 요소인 div 태그에 걸어둔 이벤트는 작동하지 않는다. 2. <div> 클릭시 - div 태그에 걸어둔 이벤트만 작동한다. 3. <nav> 클릭시 - 아무런 작동이 없다.
event.stopImmediatePropagation()
$(function(){
$("div").on("click",function() {
console.log("div 태그의 클릭 이벤트");
});
$("a").on("click",function(event) {
console.log("a 태그의 클릭 이벤트1");
event.stopImmediatePropagation();
});
$("a").on("click",function(event) {
console.log("a 태그의 클릭 이벤트2");
event.stopImmediatePropagation();
});
});
위 처럼 스크립트 사용시 여러개의 이벤트 중 첫번째 선언한 이벤트 하나만 처리되었고 인라인 자바스크립트는 정상적으로 실행되는 것을 확인할 수 있었다.
스크립트 부분을 위 처럼 작성 후
1. <a> 클릭시 - a 태그의 링크 기능이 정상 작동한다 - a 태그의 인라인 자바스크립트가 정상 작동한다. - a 태그에 걸어둔 이벤트 중 먼저 선언한 이벤트 하나만 작동한다. - 부모 요소인 div 태그에 걸어둔 이벤트는 작동하지 않는다. 2. <div> 클릭시 - div 태그에 걸어둔 이벤트만 작동한다. 3. <nav> 클릭시 - 아무런 작동이 없다.
return false
$(function(){
$("div").on("click",function() {
console.log("div 태그의 클릭 이벤트");
});
$("a").on("click",function(event) {
console.log("a 태그의 클릭 이벤트1");
return false;
});
$("a").on("click",function(event) {
console.log("a 태그의 클릭 이벤트2");
return false;
});
});
위와 같이 return false를 사용하면 event.stopPropagation()과 event.preventDefault()를 동시에 사용하는 것과 같은 작동을 하였다. 태그 원래의 기능과 인라인 자바스크립트의 수행을 막고자 한다면 위처럼 사용해도 될 것 같다.
스크립트 부분을 위 처럼 작성 후
1. <a> 클릭시 - a 태그의 링크 기능이 작동하지 않는다 - a 태그의 인라인 자바스크립트가 작동하지 않는다. - a 태그에 걸어둔 2개의 이벤트가 모두 작동하였다. - 부모 요소인 div 태그에 걸어둔 이벤트는 작동하지 않는다. 2. <div> 클릭시 - div 태그에 걸어둔 이벤트만 작동한다. 3. <nav> 클릭시 - 아무런 작동이 없다.
javascript - vanillaJS로 체크박스(checkbox) 제어하기