[JS] 이벤트(Event)와 이벤트 핸들러(Event Handle)

이벤트(Event)란?

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

이벤트 타입

발생한 이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window 객체 등)

// 마우스 클릭 이벤트 예시
<p onclick="changeText(this)">여길 클릭하세요!</p>
<script>
		function changeText(element) {
				element.innerHTML = "내용이 바뀌었습니다!";
		}
</script>

• this : <p> 태그에서 나온 DOM 객체의 자기자신을 의미

이벤트 핸들러

이벤트가 발생했을 때 그 처리를 담당하는 함수 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행

// 이 함수는 HTML 문서가 로드될 때 실행됨.
window.onload = function() {

		// 아이디가 "text"인 요소를 선택함.
		var text = document.getElementById("text");

		text.innerHTML = "HTML 문서가 로드되었습니다.";
}

객체나 요소에 이벤트 핸들러를 등록하는 방법 2가지

1. 자바스크립트 코드에서 프로퍼티로 등록하는 방법

window.onload = function() { }// 이 함수는 HTML 문서가 로드될 때 실행됨

  2. HTML 태그에 속성으로 등록하는 방법 onclick 속성에 자바스크립트 코드를 적어준다.

<p onclick="this.innerText = '클릭!'">클릭해 보세요!</p>

addEventListener()

객체나 요소의 메서드에 이벤트 핸들러를 전달하는 메서드

대상객체.addEventListener(이벤트명, 실행할이벤트핸들러(함수이름), 이벤트전파방식)

2번째 인자에 함수 이름만을 넣는이유는?
=> 2번째 인자로 함수 "객체"를 받아야 하는데(함수를 가리킴) 만약 clickBtn()(괄호포함)로 준다면 함수가 실행되고, 그 결과를 주게 되므로 실행되지 않는다.

간단하게 버튼을 클릭하면 텍스트가 뜨도록 하는 이벤트를 만들어 본다.

var elementId = document.getElementById("id");

function clickBtn(){
	document.getElementById("text").innerHTML = "버튼을 누르면 나오는 텍스트";
};

elementId.addEventListener("click", clickBtn);

addEventListener(”event”, function(){})

위처럼 함수이름을 등록해 addEventListener의 2번째 인자로 줄 수 있고,
인자 안에 바로 함수를 작성해 굳이 함수 이름을 만들어주지 않아도 된다.

var elementId = document.getElementById("id");

elementId.addEventListener("click", function(){
	document.getElementById("text").innerHTML = "버튼을 누르면 나오는 텍스트";
};