JavaScript EVENT

Angela_Hong·2023년 2월 2일

이벤트

🗂 이벤트란?

이벤트는 어떤 사건을 의미한다.
브라우저에서의 사건이란, 사용자가 클릭을 했을 때, 스크롤을 했을 떄, 필드의 내용을 바꾸었을 때와 같은 것을 의미한다.

<html>
	<body>
		<input type="button" onclick="alert('alert창 출력')" value="alert(HI)" />
	</body>
</html>

버튼을 클릭하게 되면 태그 안에 있는 onclick의 자바스크립트 코드가 실행되도록 약속되어있다.
클릭이라는 행위가 버튼에서 일어나게 되면 웹브라우저가 onclick안에 있는 자바스크립트 코드를 실행시켜준다.

즉, js개발자는 어떤 일이 발생했을 때 실행되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다.

🗂 event target

target은 이벤트가 일어날 객체를 의미한다.
아래 코드에서 타겟은 버튼 태그에 대한 객체가 된다.

<input type="button" onclick="alert('alert창 출력')" value="alert(HI)" />
이벤트의 대상이 되는 버튼태그가 event target이 된다.
그리고 event target은라는 이벤트가 발생하는 대상이다.

🗂 event type

버튼을 클릭했을 때 이벤트가 발생하는데
onclick "클릭했을 때!" text 필드의 "내용이 바꼈을 때!" 라는 것이 event type이다.

<input type="button" onclick="alert('alert창 출력')" value="alert(HI)" />
<input type="text" onchange="alert(this.value)" />

🗂 event handler

어떤 이벤트가 발생했을 때 동작하는 코드를 의미한다.
alert('alert창 출력')
alert(this.value)
즉, 이런 코드처럼 이벤트가 발생했을 때 실행될 코드를 이벤트 핸들러라고 한다.
(여기서는 inline방식을 사용함, 보통은 function을 이벤트핸들러 함수로 사용한다.)

🗂 이벤트 등록방법

이벤트 프로그래밍을 하기 위해서는 그 이벤트가 발생하는 대상에 이벤트를 등록(설치)해야 한다.
설치하는 방법을 알아보면

🗂 1. inline

<input type="button" onclick="alert('Hello world')" value="button" />
태그 안에 정해진 속성의 이름으로 값을 주는 방식이다.

이벤트가 발생한 대상을 필요로 하는 경우 this를 통해서 참조할 수 있다.

📂 this란?

javascirpt에서 This라고 하는 것은 어떤 함수 안에서 This를 사용한다는 것은 그 함수가 속해있는 객체를 의미한다.
즉, this는 자기 자신을 의미한다.

<input
			type="button"
			id="target"
			onclick="alert('Hello world, ' +document.getElementById('target').value);"
			value="button"
		/>
		<input
			type="button"
			onclick="alert('Hello world, ' +this.value);"
			value="button"
		/>

첫 번째 버튼을 클릭했을 때
이 버튼이 가지고 있는 value값
즉, "button"이라고 되어있는 것을 Hello world라는 텍스트 뒤에 button이라고 해서 출력하고 싶다는 거다.
onclick : 버튼을 클릭했을때 hello world가 출력이 되는데 거기에 + 더해서
document.getElementById('target').value : id값이 target인 value값을 추출해내는 것

위의 documnet이 부분이 길고 불편하니까 편리한 방법을 사용하면,
document.getElementById('target').value
대신에 this를 사용한다.
이 이벤트가 동작하고 있는 엘리먼트 즉, input element를 가리키게 된다. 위의 코드와 아래의 코드는 똑같이 동작하는데, 차이가 있다면 this를 쓴다는 점이다.

위에서, 코드를 복사를 하게 되면 첫번째의 button은 오류가 나게 된다. 이유는 id는 같은 값으로 하나여야만 하니까 똑같이 복사를 하게 되면 오류가 난다. 두번째 버튼은 복사를 해도 오류가 나지 않는다. 왜냐면 자기 태그 자체의 value를 가져오는 거니까.

📕 인라인 방식 장점

어떤 태그가 있을 때 태그에 해당하는 이벤트가 무엇인지 태그에 직접 기술이 되어있어서 쉽게 찾을 수 있다.

📕 인라인 방식 단점

태그에 직접 기술이 된다는 점이다.
html이라는 것은 기본적으로 정보를 표현하기 위한 어떤 수단이라는 것인데
그런 이유때문에 html에서 이 디자인과 관련된 것은 css로 분리하고 제어와 관련된 것은 js로 분류하는 것이 html이 기본적으로 추구하는 방향이다.
html의 정보로서의 가치를 저하시키므로 단점이라고 할 수 있는 것이다.

🗂 2. 프로퍼티 리스너 못함

프로퍼티 리스너 방식은
이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.
인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식이지만
뒤에서 배울 addEventListener방식을 추천한다.
// 추가로 넣기

🗂 3. addEventListener

addEventListener는 이벤트를 등록하는 가장 권장되는 방식이다.
이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.

<input type="button" id="target" value="button" />
<script>
	let t = document.getElementById('target');
    t.addEventListener('click', function(event){
		alert('Hello world, '+event.target.value);
	});
</script>

button에다가 event를 설치해보는 코드이다
t에 아이디 값이 target인 값을 넣고 addEventListener 메서드를 호출한다.
메소드는 첫번째 인자로 event type을 받게 되어있고, 즉, input엘리먼트가 클릭이라는 이벤트를 발생했을때
두번째 인자로 전달한 함수가 호출이 되면서 함수 내에 있는 코드가 실행이 된다.
function(event) event라는 매개변수를 이용해서 이벤트의 여러 프로퍼티에 접근할 수 있다.
target은 이벤트를 호출한 t객체의 value=button을 불러오게 된다.