8. Javascript DOM addEventListener

JavaScript

8. Javascript DOM addEventListener

char1ey 2022. 11. 9. 16:30

1. Event

1.1. Element에 직접넣기
1.2. DOM 속성으로 넣기

2. addEventListener

2.1. addEventListener 사용방법
2.2. removeEventListener

3. PointerEvent(target, type)

3.1. target
3.2. type
3.3. target과 type의 활용

1. Event

브라우저 내에서 렌더가 되는 영역에서 발생하는 동작을 의미한다.

ex) 마우스를 클릭하거나, 마우스를 올리거나 등등

브라우저에서는 영역에서 발생한 이벤트를 확인해, 특정 함수를 호출시킨다.

기능의 동작 구현 부분은 브라우저에서 이미 구현해 놓았기 때문에 사용하기만 하면된다.

쉽게말해, DOM에서는 브라우저에서 이벤트가 발생하면 특정 함수가 호출되도록 하는 것이 가능하다. 그러니 규칙에 맞게 사용하기만 하면된다.

1.1 Element에 직접넣기

첫 번쨰 방법은 HTML에 직접 넣는 방법이다.

<!-- 클릭이벤트가 발동되어야 함수가 호출된다 -->
<button onClick="alert('hello world!')"><button> <!--카멜표기법-->

style 속성과 마찬가지로 이벤트를 엘리먼트의 속성으로 추가할 수 있다.

위 코드와 같이 추가하면 Click이벤트가 발생했을 때, "alert("hello world!")"를 실행시킨다.

Element에 직접 넣는 방법을 사용하면, HTML부분이 너무 복잡해 진다는 단점이 있다.

1.2 DOM 속성으로 넣기

두 번째 방법은 DOM 속성으로 넣는 방법이다.

이를 위해 두 가지 step을 밟아야한다.

Javascript로 해당 엘리먼트를 선택할 줄 알아야한다.
선택한 엘리먼트에 onclick 속성을 넣고 값으로 함수를 대입한다.

<!--HTML-->
<button class="btn">버튼</button>

const btn = document.querySelector(".btn") // class = "btn"을 선택하고, 변수 btn에 값을 할당

console.log(btn) // <button class="btn">버튼</button>이 선택됨을 알 수 있다.

btn.onclick = function(){
	console.log("hello world!")
} // 선택된 btn을 클릭하면 함수가 실행되어 콘솔 부분에 "hello world!"가 찍힌다.

먼저, 첫 줄의 코드는 class = "btn"인 클래스를 선택해준다.

(클래스가 두 개일 경우, 먼저 나오는 코드 선택)

그 다음, console.log로 변수를 출력해보면, <button class = "btn">이 선택된 것을 알 수 있다.

(잘 선택되었는지 확인하는 습관을 들이자.)

마지막으로 <button>이라는 객체가 담긴 변수 btn에 속성의 키로 onclick 값으로 함수를 추가해주어, 기능을 추가시킨다.

작동원리는 결국 엘리먼트에 속성을 추가하여 작동시킨다는 점을 기억하자.

이 방법은 간단하지만 단점이 존재한다.

태그하나에 클릭에 대한 함수를 하나 밖에 넣지 못한다는 것이다. 다음과 같이 코드를 작성하면 B만 출력된다.

const btn = document.querySelector(".btn")

const A = function(){
    console.log("hello world!2")
}

const B = function(){
    console.log("hello world!4")
}

btn.onclick = A 
btn.onclick = B 
//클릭시 아래의 B 함수만 출력되어
//"hello world!4"가 출력

위의 코드의 결과를 보면, <button class = "btn" onClick = "B">가 된다. 나중에 덮어쓰여진 함수만 실행된다.

다만 함수를 구성할 때 여러 코드를 짜주어 여러기능을 실행시키는 방법도 있으나, 기능을 하는 함수를 잘게 쪼개 여러군데 사용하는 것이 좀 더 편리한 사람이 있기 때문이다. 아무튼 함수 한가지 밖에 넣지 못한다는 점을 해소시켜주는 방법이 나왔다. addEventListener라는 것이다.

2. addEventListener

위에서 나온 방법들로 코드가 작성되다가 조금 더 편한 사용을 위해 나온 방법이다.

이전 방법에서 나온 단점은 함수를 하나밖에 넣지 못한다는 데에 있다. 기능을 구현이 가능하나 코드가 길어지고 한 번 사용한 함수를 재활용하기가 어렵기 때문이다.

그리고 복수의 이벤트를 넣을 수 있다는 점도 많은 효과를 구현하기에 좋은 점을 가진다.

2.1 addEventListener 사용방법

Element.addEventListener("event", function) //(이벤트명, 함수)

인자값으로 들어가는 이벤트명에는 on을 쓰지 않아도 된다.
함수를 넣는 곳에서는 함수를 값으로 넣고, 호출()을 사용하지 않아야한다.

작동원리를 코드로 설명해보자.

function listener(event, callback){ // 인자값으로 이벤트와 함수를 받고.
	if(event === 'click'){ // 이벤트가 click이라면,
    	callback() //함수를 호출한다.
    }
}

listener('click', function(){}) //실제로 이렇게 구현은 안되지만, 작동원리는 비슷하다.

어떤 이벤트가 발생하면, 입력한 이벤트와 맞는지 확인한 후 함수를 콜백하는 방식이다.

일반적으로 함수를 변수에 담아서 인자값으로 넣는 것이 선호되기도 한다.

2.2 removeEventListener

Element 방식이나, DOM 속성방식은 함수를 지우는 방법이 용이하지만, addEventListener는 함수를 추가해줄 수 있으나, 삭제나 덮어 씌우지는 못한다.

삭제하는 방법은 있으나 살짝 번거롭다. 바로 지우는 메서드를 호출해야 하기 때문이다. 인자값은 addEventListener와 비슷하다.

문법만 살짝 알아보자면, 엘리먼트를 선택하고 메서드를 호출하여 인자값으로 "event"와 function을 갖는다.

Element.removeEventListener('event', function)

3. Event 객체 (target, type, ...)

DOM은 HTML의 구성요소들을 Js에게 객체형태로 인식시킨다. DOM 자체도 document라는 객체에 있는 메서드들을 호출하는 것이고, 대부분의 효과는 메서드 호출과 같다.

다음과 같이 코드를 작성하면 콘솔창에 해당 이벤트의 이벤트 객체를 확인할 수 있다.

const btn = document.querySelector(".btn")

function handler(e){
    console.log(e)
}

btn.addEventListener('click', handler)

//매개변수 e에 영향을 주는 인자는 "click", 즉 이벤트 명이다.

매개변수 e에 영향을 주는 인자는 "click:", 즉 이벤트 명이다. (이 경우에는 PointerEvent 객체를 불러옴)

각 이벤트마다 이벤트객체가 조금씩 다르게 출력되지만 공통적인 속성들을 가지고 있다.

그 중 자주 사용하는 것에는 target과 type이 있다.

3.1 target

Event 객체를 열어보면 target이라는 속성을 발견할 수 있다. 이 속성의 값은 해당 이벤트가 발동하는 대상을 가리키고 있다. console.log를 이용해 출력해보면

const btn = document.querySelector(".btn")

function handler(e){
    console.log(e)
    console.log(e.target)
}

btn.addEventListener('click', handler)

이벤트가 발동되는 button을 가리키고 있는 것을 확인할 수 있다.

3.2 type

type속성 역시 Event 객체안에 있으며, type은 이벤트 명을 출력해준다.

const btn = document.querySelector(".btn")

function handler(e){
    console.log(e)
    console.log(e.type)
}

btn.addEventListener('mouseover', handler)

3.3 target과 type의 활용

위 두 가지를 이용해 간단한 동작을 구현해보자.

구현할 동작은 다음과 같다.

마우스를 클릭하면 DIV의 텍스트를 "마우스를 클릭했다."로 바꾼다.
마우스를 올린다면 DIV의 텍스트를 "마우스를 올렸다."로 바꾼다.

<div id="display" class="a"> 타겟과 타입</div>
<button class="btn">버튼</button>

DIV 박스안에 "타겟과 타입"을 입력하고, 버튼을 누르거나 올리면 텍스트가 바뀌도록 해보자.

const btn = document.querySelector(".btn") // button 선택자
const display = document.querySelector("#display") // div 선택자

function handler(e){
    console.log(e.target) // 해당 이벤트의 발동대상 출력
    console.log(e.type) // 해당 이벤트 출력
    
btn.addEventListener('click', handler) //click 이벤트 발생시 handler 호출
btn.addEventListener('mouseover', handler) // mouseover 이벤트 발생시 handler 호출

타겟과 타입이 원하는 대로 출력되는지 확인하고 작업을 시작한다.

마우스를 클릭하면 텍스트를 바꾸고, 마우스를 올려도 텍스트가 바뀌도록 해보자.

const btn = document.querySelector(".btn")
const display = document.querySelector("#display")

function handler(e){  
    if(e.type === "click"){ // type이 click이라면,
        display.innerHTML = "마우스를 클릭했다." // displat의 텍스트를 "마우스를 클릭했다."로 바꾸고 
    } else if (e.type === 'mouseover'){ // type이 mouseover라면, 텍스트를 "마우스를 올렸다."로 바꿔준다.
        display.innerHTML = "마우스를 올렸다."
    }
}

btn.addEventListener('click', handler) // 클릭시 호출
btn.addEventListener('mouseover', handler) // 오버시 호출

<그림4> 기본상태
< 그림 4> 기본상태	<그림 5> click	<그림 6> mouseover

결과를 보면 잘 출력된 것을 확인할 수 있다.