1.JS 이벤트란?
: DOM에서 특정 이벤트가 발생되면 JS 이벤트 객체에서 이를 확인할 수 있다.
: DOM 구조에서 이벤트는 매우 다양하지만, 자주 쓰는 이벤트는 아래와 같다.
1) 포커스 이벤트(focus, blur)
2) 폼 이벤트(reset, submit)
3) 뷰 이벤트(scrol, resize)
4) 키보드 이벤트(keydown, keyup)
5) 마우스 이벤트(mouseenter, mouseover, click, dbclick, mouseleave)
6) 드래그 앤 드롭 이벤트(dragstart, drag, dragleave, drop)
2. Event Listener
: 이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.
: 이벤트 리스너를 이용하면 특정 DOM에 위에 말한 JS 이벤트가 발생할 때 특정 함수를 호출한다.
== 이벤트가 발생하는 것을 대기하고 있다가 이벤트가 감지되면 연결된 기능(함수)를 수행한다.
ex) onclick, onckeyup, onchange, onsubmit...(on이벤트명)
3. Event Handler
: 이벤트 리스너에 연결된 기능(함수) 이벤트가 발생했을 때 수행하고자 하는 내용을 작성하는 함수
3. 이벤트 리스너 등록하기
DOM객체.addEventListener(이벤트명, 실행할 함수, 옵션)
== element.addEventListener(type, eventListener);
== 요소.addEventListener("이벤트명", 함수);
1) 이벤트명(==type): JS에서 발생할 수 있는 이벤트 명을 입력한다.
2) 함수명(==eventListener): 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 떄 실행할 함수 명을 입력한다.
3) 옵션: 옵션은 생략이 가능하며 ,자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.
<html>
<a>클릭</a>
</html><script>
const a = document.querySelector('a');
a.addEventListener('click', showConsole);
function showConsole(){
console.log("콘솔로그 실행");
}
</script>