[JAVASCRIPT] addEventListener 이란?

💡 이벤트 리스너

: DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트

: 이벤트 리스너를 이용하면 특정 DOM에 JAVASCRIPT 이벤트가 발생할 때 특정 함수를 호출한다.

 

👉 JAVASCRIPT 이벤트 

- 포커스 이벤트 (focus, blur)

- 폼 이벤트 (reset, submit)

- 뷰 이벤트 (scroll, resize)

- 키보드 이벤트 (keydown, keyup)

- 마우스 이벤트 (mouseenter, mouseover, click, dbclick,  mouseleave)

- 드래그 앤 드롭 이벤트 (dragstart, drag, dragleave, drop)

 

이벤트 리스너 등록하기  addEventLister 사용

DOM객체.addEventListener(JAVASCRIPT 이벤트, 실행할 함수명, 옵션)

<input type = "button" id = "target" value = "button" >

💛 1) 하나의 이벤트 대상에 하나의 이벤트 타입 리스너 등록하는 경우 

<script>
	var t = document.getElementById('target');
        t.addEventListener('click' , function(event) {
    	~
	});
</script>

💛 2) 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너 등록하는 경우

<script>
	var t = document.getElementById('target');
        t.addEventListener('click', function(event) {
    	~;
	});
        t.addEnvetListener('click', function(event) {
    	~;
	});
</script>

💛 이벤트 리스너 삭제하기

DOM객체.removeEventListener(JAVASCRIPT 이벤트, 실행했던 함수명);