자바스크립트 - Event

엘리스 AI트랙 2기 수업 정리

 

Event란?

- HTML 요소에 대한 사건의 발생 (ex. 마우스의 움직임 등)

 

이벤트 타입

- 폼, 키보드, 마우스, HTML DOM 등

//마우스 클릭 이벤트
<p onclick="foo(this)">click!</p>

<script>
function foo(elem) {
	elem.innerHTML = "boooo!!";
}
</script>

 

이벤트 핸들러

- 이벤트가 발생했을 때 그 처리를 담당한다.

- 지정된 이벤트가 발생하면, 웹 브라우저는 해당 요소에 등록된 이벤트 핸들러를 실행시킨다.

let btn = document.getElementById("foo"); //버튼

function showText(){
	document.getElementById("text").innerHTML = "메롱";
}

// 매개변수에 이벤트이름, 이벤트 발생시 실행되는 함수
// btn에 click이라는 이벤트가 추가됨
btn.addEventListener("click", showText);