Event란?
event 등록하기
이벤트 전파
버블링
이벤트 버블링이란 해당 요소에서 발생한 이벤트가 부모에게 전달되는 현상을 의미합니다.
부모에게까지 이벤트가 전달되지 않기를 바란다면 stopPropergation()을 이벤트 리스너 안에 작성합니다.
wrapper.addEventListener('click', function(e) {
const targetElem = e.target;
e.stopPropagation();
});캡쳐링
event-delegation
다수의 자식 요소에게 이벤트를 걸 때, 이벤트가 너무 많이 생기니 최적화를 위해 부모에게 이벤트를 넘겨줍니다.
아니면 동적으로 생성되는 요소는 처음에 그 요소가 생성되지 않아 이벤트를 걸어놓을 수 없어 부모에게 이벤트를 넘깁니다.
그리고 event.target을 이용해 이벤트 핸들러 처리를 합니다.
event.target: 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다.
event.currentTarget: 이벤트가 부착된 부모의 위치를 반환한다.
단, jquery는 이미 이벤트 위임이 구현되어 있습니다.
$('.wrapper').on("click", ".item", function() {...});이벤트 취소
preventDefault
이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.
이벤트를 취소하는 도중에 preventDefault를 호출하게되면, 일반적으로는 브라우저의 구현에 의해 처리되는 기존의 액션이 동작하지 않게되고, 그 결과 이벤트가 발생하지 않게됩니다.
이벤트의 취소가능 여부는 event.cancelable를 사용해서 확인할 수 있습니다. 취소불가능한 이벤트에 대해서 preventDefault를 호출해도 결과는 없습니다.
<html>
<head>
<title>preventDefault 예제</title>
<script type="text/javascript">
function stopDefAction(evt) {
evt.preventDefault();
}
</script>
</head>
<body>
<p>체크박스 컨트롤을 클릭해 주세요</p>
<form>
<input type="checkbox" onclick="stopDefAction(event);"/>
<label for="checkbox">체크박스</label>
</form>
</body>
</html>
개발자