event는 웹상에서 일어나는, 혹은 일으키는 모든 행위나 액션을 말하는데, 크게 사용자가 발생시키는 이벤트와 시스템이 발생시키는 이벤트가 있다.
사용자가 발생시키는 이벤트
: click, change, mouseover, mousewheel, mousemove, scroll,
시스템이 발생시키는 이벤트
: load, error
Dom을 조작하기 위해서는 사용자 이벤트를 연결해야 한다. 오늘은 event 연결에 대해 알아보자.
우선 이벤트를 발생시킬 Dom 요소에 접근한다.
const a = document.querySelector("a");이벤트를 연결한다.
이벤트를 연결하는 방법에는 대표적으로 2가지 방법이 있다.
1. Dom요소에 바로 Dom.onClick(() => {}) 해서 익명함수(이름이 없는)를 대입하는 방식
2. 자체 내장함수를 이용하는 방식. DOM.addEventListener('이벤트명', 콜백함수 or () => {})
돔의 구조를 보고싶다면 console.log가 아닌 console.dir()로 출력해보면 된다. event가 다 나옴! 그 중에 사용한 이벤트에만 값이 채워져 있다.
다시 이벤트 방식으로 돌아가서 1번 방식과 2번 방식은 장 단점이 존재한다.
1번 방식으로 하게 되면 a.onclick으로 이미 이벤트를 부여했어도 아래가서 모르고 a.onclick에 다른 로직을 주면 앞에 로직이 덮어쓰기 되어버린다.
그래서 보통은 2번 방식으로 간다.
2번 방식은 이벤트를 추가하는 방식이라서 만약 앞에서와 같이 다른 개발자가 모르고 같은 이벤트를 추가했다 하더라도 앞에 이벤트가 덮이지 않고 같이 나온다.
요약.
이벤트를 연결하는 방법
1. 돔 요소에 접근한다.
: const 변수 = document.qeurySelector(""요소)
2. 이벤트를 연결한다.
: 변수.addEventListener('event', () => {로직})
