[FC] 이벤트의 이해(이벤트 연결) Day-9

Event?

무언가 일어나는 행위, 액션을 이벤트라고 한다.

사용자가 발생시키는 Event

(웹상에서 일어나는 click, mouseover, mousemove, mousewheel, scroll 등)

System이 발생시키는 Event

(loar, error)

<a href="#">링크</a>

<script>main.js</script>

이벤트 연결하는 방법

• DOM.onclick = () => {}
• DOM.addEventListener("이벤트", () => {})

일반적으로 addEventListener 을 많이 사용한다.

ex) main.js (onclick)

alert앞에 window는 생략된 것이다.
window.alert("Click 링크");

const a = document.querySelector("a");
a.onclick = () => {
	alert("Click 링크");
}

addEventListener 을 많이 사용하는 이유는 덮어쓰기 할 필요가 없다. (기존 연결 기능 삭제가 안된다.)

const a = document.querySelector("a");
a.addEventListener("click", () => {
	console.log("클릭하셨습니다.");
});

이벤트 발생시 연결된 인수로 전달되는 이벤트 객체

<a href="https://naver.com">네이버</a>
<script>main.js</script>

ex) main.js

• 링크 이동을 막아주는 preventDefault();

const a = document.querySelector("a");
a.addEventListener("click", (e) => {
    e.preventDefault();
    console.log("Clicked");
});

ex) 마우스 이동

<div class="box"></div>
<script>main.js</script>

const box = document.querySelector(".box");

box.addEventListener("mousemove", (e) => {
    console.log(`현재 마우스 x 축 위치 : ${e.pageX}`);
    console.log(`현재 마우스 y 축 위치 : ${e.pageY}`);
});

ex) mousewheel 예제

window.addEventListener("mousewheel", (e) => {
	console.log(e.deltaY)
});

이벤트가 발생한 대상

<main>
	<section>
    	<article>
        	<nav>
            	<div></div>
            </nav>
        </article>
    </section>
</main>

e.target

이벤트가 발생했을 때 마우스 포인터가 위치해있는 요소를 반환한다.

e.currentTarget

이벤트가 발생했을 때 이벤트문상에서 선택자 요소를 반환한다.

const main = document.querySelector("main");

main.addEventListener("click", (e) => {
	console.log(e.currentTarget);
});

e.target과 e.currentTarget의 차이

target은 마우스 포인트 위치 자체를 반환하지만, currentTarget은 포함된 모든 걸 반환한다.

const main = document.querySelector("main");

main.addEventListener("click", (e) => {
	console.log(e.target);
});