Event(이벤트) : 웹 페이지에서 사용자에 의해 발생되는 사건(상호작용)
Event Handler(이벤트 핸들러) : 사용자가 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 함수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="h1Tag">오늘의 점심은?</h1>
<button onclick="popUp()">1) 인라인방식</button>
<button id="btn_han">2) 이벤트 핸들러</button>
<button id="btn_lis">3) 이벤트 리스너</button>
<script>
/* Event : 웹페이지에서 사용자에 의해 발생되는 사건
1) 인라인 방식
- HTML 태그에 직접 함수의 이름을 작성하는 방법
- 한 요소당 하나의 이벤트만 등록 가능
2) 이벤트 핸들러
- 사용자가 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 함수
3) 이벤트 리스너
- 가장권장하는 방식
- 하나의 이벤트에 여러 이벤트 핸들러를 등록할 수 있다.
- 요소명.addEventListener('이벤트이름', 실행할 함수)
*/
const popUp = () => {
alert('도시락')
}
const popUp2 = () => {
alert('카페라떼...카라멜마끼야또')
}
// 2) 이벤트 핸들러
// - 하나의 이벤트만 처리 가능, HTML 요소에서는 보이지 않음
let btn_han = document.getElementById('btn_han');
btn_han.onclick = popUp; // 하나의 이벤트만 처리 가능하기에 마지막에 있는 popUp2 함수가 호출됨
btn_han.onclick = popUp2; // popUp2() 라고 써버리면 popUp2 함수를 제일 먼저 호출함
// 3) 이벤트 리스너
// - 다중 이벤트 등록 가능
let btn_lis = document.getElementById('btn_lis');
btn_lis.addEventListener('click', popUp);
btn_lis.addEventListener('click', popUp2);
btn_lis.addEventListener('cl', ()=>{
alert('직접 등록한 함수')
})
</script>
</body>
</html>Event 종류 - 마우스 이벤트
Event 종류 - 키 & 폼 이벤트
Event 종류 - 로드 % 기타 이벤트
개발자