무언가 일어나는 행위, 액션을 이벤트라고 한다.
(웹상에서 일어나는 click, mouseover, mousemove, mousewheel, scroll 등)
(loar, error)
<a href="#">링크</a>
<script>main.js</script>
일반적으로 addEventListener 을 많이 사용한다.
ex) main.js (onclick)
alert앞에 window는 생략된 것이다.
window.alert("Click 링크");
const a = document.querySelector("a");
a.onclick = () => {
alert("Click 링크");
}
const a = document.querySelector("a");
a.addEventListener("click", () => {
console.log("클릭하셨습니다.");
});
<a href="https://naver.com">네이버</a>
<script>main.js</script>
ex) main.js
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>
이벤트가 발생했을 때 마우스 포인터가 위치해있는 요소를 반환한다.
이벤트가 발생했을 때 이벤트문상에서 선택자 요소를 반환한다.
const main = document.querySelector("main");
main.addEventListener("click", (e) => {
console.log(e.currentTarget);
});
target은 마우스 포인트 위치 자체를 반환하지만, currentTarget은 포함된 모든 걸 반환한다.
const main = document.querySelector("main");
main.addEventListener("click", (e) => {
console.log(e.target);
});