Replies: 3 comments 1 reply
-
|
공유하고싶은 자료 & 개인적으로 정리한 블로그 등이 있다면 여기👇👇👇에 댓글로 공유해주세요 😆 |
Beta Was this translation helpful? Give feedback.
-
|
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/ |
Beta Was this translation helpful? Give feedback.
-
이벤트이벤트는 브라우저 상에서 일어나는 어떤 사건을 의미합니다. 여기서 사건은 사용자가 클릭을 했거나, 스크롤을 했을 때, 키보드를 눌렀을 때와 키보드에서 손을 뗐을 때, 입력 값을 제출했을 때, 마우스를 움직이고 있을 때 등을 의미합니다. 이벤트가 DOM에만 한정되는 것은 아니지만, 모든 DOM 노드는 이런 신호들을 만들어 낼 수 있습니다. 자주 사용되는 유용한 DOM 이벤트 종류를 소개하겠습니다. 마우스 이벤트:
Form 요소 이벤트:
키보드 이벤트:
이벤트 객체현재 이벤트가 발생한 부분이 어떤 DOM 객체인지, 현재 발생한 이벤트가 어떤 이벤트인지, 마우스 클릭 이벤트가 발생했을 경우 마우스 포인터의 좌표값이 어디인지 등 여러가지 정보가 필요할 수 있습니다. 이 때 우리가 사용할 수 있는 것이 바로 이벤트 객체 입니다. 브라우저에서 이벤트가 발생하게되면 브라우저가 이벤트 객체를 생성합니다. 발생한 이벤트와 관련된 정보들을 이 객체에 담은 뒤, 이벤트 핸들러에 인수 형태로 전달하게끔 되어있습니다. 아래 예시를 보실까요? <input id="myBtn2" type="button" value="클릭!">
<script>
myBtn2.onclick = (event) => {
alert(event.type + ' 이벤트가 ' + event.currentTarget + '에서 발생했습니다.');
};
</script>이벤트 객체에는 정말 많은 정보가 담겨있지만, 그 중 위에서 사용한 것들에 대해서 설명을 하자면 event.type은 발생한 이벤트가 어떤 것인지에 대한 정보를 가지고 있습니다. 그리고 event.currentTarget은 해당 이벤트가 발생한, 혹은 이벤트를 처리하는 요소에 대한 정보를 가지고 있습니다. event.target과 event.currentTarget이벤트가 발생한 가장 안쪽의 요소를 타겟(target) 요소라고 하고, event.target 을 사용해서 접근할 수 있습니다. event.target과 this(=event.currentTarget)는 다음과 같은 차이점이 있습니다. event.target은 실제 이벤트가 시작된 '타겟'요소 입니다. 버블링이 진행되어도 변하지 않습니다. 출처:
이벤트 버블링이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위 화면 요소로 전달돼 가는 특성을 의미한다. 다음과 같은 html 구조에서 <body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>다음과 같은 코드를 실행시키면 var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent);
});
function logEvent(event) {
console.log(event.currentTarget.className);
}아래와 같이 출력된다. 이벤트 캡쳐이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파방식이다. <body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>다음과 같은 코드를 실행시키면 var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent, {
capture: true // default 값은 false입니다.
});
});
function logEvent(event) {
console.log(event.currentTarget.className);
}아래와 같이 출력된다. event.stopPropagation()이벤트가 전파되는 것을 막는다. 앞선 logEvent() 를 다음과 같이 바꾸면 function logEvent(event) {
event.stopPropagation();
console.log(event.currentTarget.className);
}이벤트 버블링의 예시에선 three, 이벤트 캡쳐의 예시에선 one이 찍힌다. 출처: https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/ 커스텀 이벤트이벤트를 직접 만들 수도 있습니다. 이벤트 생성자내장 이벤트 클래스는 DOM 요소 클래스같이 계층 구조를 형성합니다. 내장 이벤트 클래스 계층의 꼭대기엔 Event 클래스가 있습니다. Event 객체는 다음과 같이 생성할 수 있습니다.
elem.dispatchEvent(event)커스텀 이벤트를 실행시킵니다. click 커스텀 이벤트를 생성하고 dispatch하면, 클릭하지 않고도 클릭의 이벤트 핸들러가 작동합니다. evnet.isTrustedevent의 isTrusted 프로퍼티가 true이면 사용자 액션을 통해 만든 이벤트라는 것을 의미합니다. isTrusted가 false이면 해당 이벤트가 스크립트를 통해 생성되었다는 걸 알 수 있습니다. |
Beta Was this translation helpful? Give feedback.
-
Event
이벤트 캡처링, 버블링
element1과 element2 모두 이벤트 핸들러가 등록돼있을때, element2에 이벤트가 발생한다고하면 어느 이벤트가 먼저 실행될까..? 당시, Netscape는 결국 지금 default 값이 이벤트 버블링인것을 보면 Microsoft가 이긴걸 알 수 있다. W3C Model & Event Flow
W3C모델에서 이벤트가 발생하면, 이벤트 캡쳐링이 먼저 일어나고, 이벤트 타겟 도착 후에 다시 버블링이 일어난다. 이벤트 위임event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 이를 이용해 이벤트를 핸들링을 하면서 이벤트 위임을 구현할 수 있습니다. e.stopPropagation() - 이벤트 전파 중단하기이벤트가 발생하면 브라우저는 모든 이벤트의 조상 엘리먼트를 찾아서 이벤트 핸들러가 있는지 확인해야 한다. 어떠한 이벤트 핸들러가 없을지라도, 핸들러를 찾게된다. 이벤트 캡쳐링과 버블링을 중단시키면 시스템의 리소스를 아낄 수 있다. W3C 모델에서는 이벤트 객체의 stopPropagation() 메서드를 호출하여, 이벤트의 전파를 막을 수 있다. stopPropagation은 현재 이벤트 이후로 이벤트의 전파를 막는다. e.preventDefault() - 이벤트 취소preventDefault() 메서드를 호출하면, 브라우저가 갖고 있는 기본적인 이벤트가 취소된다. 단, 이벤트의 전파는 막지 않는다. currentTarget이벤트 객체의 curretTarget 프로퍼티는 현재 이벤트 핸들러가 등록된 요소를 가리킨다. this 키워드로도 currentTarget을 참조할 수 있다. target과 currentTarget은 다른 개념이다. target은 이벤트가 발생한 이벤트 타겟을 가리킨다. 따라서 target과 currentTarget은 같을 수도, 다를 수도 있다. |
Beta Was this translation helpful? Give feedback.
-
주제 키워드는
✨Event✨
입니다.
☘️ 하위 주제 키워드
⏳스레드에 각 페어당 소요시간 적어주세요!
(ex) holee 90분 소요
Beta Was this translation helpful? Give feedback.
All reactions