Language/JavaScript

[JavaScript] event

Sh-YE 2024. 5. 3. 10:06

이벤트

: 사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건을 뜻함

ex) 웹페이지 사용자가 버튼을 클릭했다 -> 클릭이벤트

      웹페이지 사용자가 입력 폼의 내용을 제출했다 -> 제출이벤트

 

각각의 이벤트들은 이벤트핸들러(handler)를 가질 수 있다.

이벤트 핸들러

: 이벤트가 발생되면 실행될 코드블록을 뜻하며, 주로 함수가 이 역할을 담당한다.

  이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라고 한다.

=> event hadler register : 이벤트가 발생하면, 이 함수를 호출해라

타겟.on이벤트명 = 이벤트 핸들러함수

// hadleClick함수를 대입한다.(이벤트핸들러 등록)
button.onclick = hadleClick

// hadleClick 호출 후 반환값을 대입한다.
button.onclick = hadleClick()

예시)

html

<!DOCTYPE html>
<html>
	<head>
		<title>자바스크립트 test</title>
	</head>
	<body>
		<input type="text" id="typing" />
		<input type="button" id="push" value="PUSH" />
	<script src="srcipt.js"></script>
	<body>

</html>

js1

const inputType = document.querySelector("#typing")
const inputClick = document.querySelector("#push")

const handleTyping = function(){
	console.log("타이핑 되고 있어요")
}
const handleClick = function(){
	console.log("클릭 되고 있어요")
}

inputType.onkeydown = handleTyping
inputClick.onclick = handleClick

// 이벤트핸들러등록에 함수호출문을 사용하면 반환값이 있을 경우 반환값으로 대체되기때문에 오작동될 수 있음
//inputType.onkeydown = handleTyping()
//inputClick.onclick = handleClick()

js2

const inputType = document.querySelector("#typing")
const inputClick = document.querySelector("#push")

// 이벤트 핸들러 함수로 익명의 함수도 사용가능
inputType.onkeydown = function(){
	console.log("타이핑 되고 있어요")
}
inputClick.onclick = function(){
	console.log("클릭 되고 있어요")
}

 

-> 위의 자바스크립트와  같은코드인데 익명함수도 사용가능하다는 것을 보여주기 위한 예시