[JavaScript] Day 16 - 이벤트를 소개합니다

이벤트

이벤트란 '사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건'을 뜻한다.

웹에서도 이벤트가 발생한다.

 

웹에서 발생하는 이벤트의 예

• 웹페이지 사용자가 버튼을 클릭했다 -> 클릭 이벤트!
• 웹페이지 사용자가 키보드를 눌렀다 -> 키다운 이벤트!
• 웹페이지 사용자가 입력 폼의 내용을 제출했다 -> 제출 이벤트!
• 등등

이벤트 핸들러

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

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

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

 

ex) 

웹 사용자가 버튼 요소를 클릭했을 때, 경고 다이얼로그 박스를 띄워 환영의 메시지를 보여주고 싶다면?

const handleClick = function(){
	window.alert("환영합니다^^")
}
const button = document.querySelector("button")

button.onclick = handleClick  // 여기가 포인트!

 

구문 기본 형태

이벤트가 발생할 수 있는 타겟을 선택하고, 이벤트 핸들러 속성에 이벤트 핸들러를 대입한다.

타겟.on이벤트명 = 이벤트핸들러함수    =>    button.onclick = handClick

 

오늘의 실습

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

실습의 결과