JavaScript 이벤트의 전파 및 중단방법에 대해 살펴보겠습니다.
element에서 발생한 이벤트는 부모 또는 자식에게 전파됩니다.
개발을 하다보면 원치않게 이벤트가 전파될 때가 많이 있습니다. 이럴때는 전파를 중단시켜야 합니다.
먼저 이벤트를 추가하는 함수를 살펴보겠습니다.
document.addEventListener(event, function, useCapture)
- event : click, focus 등 이벤트 종류
- function : 이벤트가 발생했을 때 실행할 함수
- useCapture : true - capturing(자식들에게 전파), false(default) - bubbling(부모에게 전파)
보통 useCapture를 설정하지 않기때문에 기본 bubbling으로 이벤트가 주로 선언된다.
다음은 이벤트의 전파를 막는 방법에 대해 살펴보겠습니다.
1. event.preventDefault()
현재 이벤트의 default event 동작을 중단합니다.
HTML 태그중에는 default event (기본이벤트) 가 있는 태그가 있습니다.
예를들어 <a> 태그에는 click 이벤트시에 명시된 href 로 이동하는 이벤트가 기본으로 설정되 있습니다.
document.getElementsByTagName('a')[0].addEventListener('click', function(event) {
event.preventDefault();
});위 예시 코드를 실행하면 첫번째 a태그는 클릭해도 해당태그에 명시된 href로 이동하지 않습니다.
default event가 작동하지 않기 때문입니다.
2. event.stopPropagation()
현재 이벤트가 전파되는것 즉 bubbling 혹은 capturing을 막습니다.
<div id="div">
<span id="span">
</span>
</div>document.getElementById('div').addEventListener('click', function(event){
console.log('div click');
});
$('#span').click();
'div click'span태그를 클릭했지만 부모인 div태그까지 이벤트가 전파되었다.
document.getElementById('span').addEventListener('click', function(event) {
event.stopPropagation();
});
$('#span').click();
이벤트 전파가 방지되어서 div 태그의 click 이벤트가 실행되지 않았다.
3. event.stopImmediatePropagation()
현재 이벤트가 전파되지않을 뿐더러 같은레벨에 걸린 다른 이벤트들도 작동하지 않습니다.
같은 레벨이라도 먼저 실행되는 이벤트는 실행됩니다.
해당함수 이후에 실행되는 이벤트들이 작동하지 않습니다.
document.getElementById('div').addEventListener('click', function() {
console.log(1);
});
document.getElementById('div').addEventListener('click', function() {
console.log(2);
});
document.getElementById('div').addEventListener('click', function() {
console.log(3);
});
$('#div').click();
// 1
// 2
// 3위 예시에서 3번로그가 찍히지 않도록 할때 사용합니다.
document.getElementById('div').addEventListener('click', function() {
console.log(1);
});
document.getElementById('div').addEventListener('click', function(event) {
console.log(2);
event.stopImmediatePropagation();
});
document.getElementById('div').addEventListener('click', function() {
console.log(3);
});
$('#div').click();
// 1
// 2같은 태그에 걸린 이벤트지만 2번로그 이후 이벤트들은 실행되지 않은것을 확인할 수 있습니다.
4. return false
jQuery를 사용할 때 return false를 사용하면
event.preventDefault() 와 event.stopPropagation() 두개모두 를 실행한 것과 같고
jQuery를 사용하지 않을 때 return false를 사용하면 event.preventDefault()를 실행한 것과 같다.