1. 이벤트 (event)
사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건을 뜻한다.
웹에서 발생하는 이벤트의 예
• 버튼을 클릭 → 클릭 이벤트
• 키보드 클릭 → 키다운 이벤트
• 입력 폼의 내용을 제출 → 제출 이벤트
2. 이벤트 핸들러 (event handler)
각각의 이벤트들은 이벤트 핸들러를 가질 수 있다. 이벤트 핸들러란 이벤트가 발생되면 실행될 코드
블록을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을
이벤트 핸들러 등록이라 한다.
ex) 웹 사용자가 버튼요소를 클릭 했을 때, 경고 다이얼로그 박스를 띄어 환영의 메세지를 보여주기
const handleClick = function(){
console.log("환영합니다")
}
const button = document.querySelector("button")
button.onclick = handleClick
* 이밴트 핸들러 등록에 함수 대입하는 것처럼 ()를 넣으면 안된다
3. 실습
1) html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, inital-scale=1">
<title>자바스크립트 실습</title>
</head>
<body>
<input type="text" id="typing" />
<input type="button" id="push" value="PUSH" />
<script src="script.js"></script>
</body>
</html>2) js 코드
const inputType = document.querySelector('#typing')
const inputClick = document.querySelector('#push')
const handleTyping = function(){
console.log("타이핑 되고 있어요")
}
const handleClick = function(){
console.log("클릭되고 있어요")
}
inputType.onkeydown = handleTyping
inputType.onkeydown = function(){
console.log("타이핑 되고 있어요")
}
inputClick.onclick = handleClick
inputClick.onclick = function(){
console.log("클릭되고 있어요")
}3) 결과
블로그 이전했습니다 -> https://young-code.tistory.com