자바스크립트 이벤트 중단

event.preventDefault() 와 event.stopPropagation() 그리고 return false 의 차이점

by parksd

HTML

<div id="div_">
  DIV영역
  <p id="p_">
    P영역
    <span id="span_">SPAN영역</span>
  </p>
</div>

<section id="console">
  <br>
</section>

CSS

div {
  background-color: #ccc;
  padding: 20px;
  display: block;
}

p {
  background-color: #aaa;
  padding: 20px;
  display: block;
}

span {
  background-color: #888;
  padding: 20px;
  display: block;
}

section {
  background-color: #4477AA;
  padding: 0 10px 30px 20px;
  margin: 50px 0 0 0;
}

section:before {
  background-color: #114477;
  padding: 5px;
  margin: 0 0 0 -20px;
  border-bottom: 2px solid #002244;
  border-bottom-right-radius: 5px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  content: "결과 콘솔";
}

JavaScript

//DIV 영역에 클릭 이벤트 설정
$("#div_").on("click", function(event) {
  $("#console").append("<br>DIV 클릭");
});

//P 영역에 클릭 이벤트 설정
$("#p_").on("click", function(event) {
  $("#console").append("<br>P 클릭");
});

//SPAN 영역에 첫번째 클릭 이벤트 설정
$("#span_").on("click", function(event) {
  $("#console").append("<br>SPAN 클릭1");

  //상위로 이벤트가 전파되지 않도록 중단한다.
  event.stopPropagation();
});

//SPAN 영역에 첫번째 클릭 이벤트 설정
$("#span_").on("click", function(event) {
  $("#console").append("<br>SPAN 클릭2");

  //상위 뿐 아니라 같은 레벨로도 이벤트가 전파되지 않도록 중단한다.
  event.stopImmediatePropagation();
});

//SPAN 영역에 두번째 클릭 이벤트 설정
$("#span_").on("click", function(event) {
  $("#console").append("<br>SPAN 클릭3");

  //상위로 이벤트가 전파되지 않도록 중단한다.
  event.stopPropagation();
});