EVENT

EVENT

브라우저에서 발생하는 사건 ex.클릭..드래그.. 참조

이벤트 등록

elem.addEventListener("이벤트", "함수");

const startButton = document.querySelector(".startbutton");
function onButtonClick () {
  alert("안녕하세요");
}
button.addEventListener("click", onButtonClick);


/* html onclick으로 이벤트 등록 지양 (수정시 js와 html 파일 모두 변경해야 함)
html, css, js 각 기능에 맞는 부분만 각 파일에 */

event객체
현재 발생한 사건에 대한 종합적인 정보가 담겨있는 객체

event.target? 실제 이벤트가 발생한 요소
currentTarget? 현재 발생한 이벤트의 이벤트 리스너가 달린 요소

<div class="green" style="width: 30px; height: 30px; background-color: green;">
	<div class="yellow" style="width: 20px; height: 20px; background-color: yellow;"></div>
</div>

<script>
        const green = document.querySelector('.green');

        green.addEventListener('click',function(e){
            console.log("currentTarget : ",e.currentTarget); //green
            console.log("Target : ",e.target); //yellow
        })
</script>

DOM의 표준 이벤트 흐름

1. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계

✔️ 이벤트 캡처링 (⇒ 잘 사용하지는 않음)

이벤트가 하위 요소로 전파되는 것

사용하려면? elem.addEventListener(..., true);

⇒ false(default): 핸들러는 버블링 단계에서 동작 / true: 캡처링 단계에서 동작

✔️ 이벤트 버블링

요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작

가장 최상단의 조상 요소(document)를 만날 때까지 반복되면서 요소 각각에 할당된 핸들러가 동작

Event.stopPropagation()
=> 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막음

Event.preventDefault()
=> 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소