Front-End/3. JavaScript 실전
[JS] Ex09_이벤트.html
이뮨01
2023. 6. 19. 23:05
특정 요소에 원하는 이벤트를 적용하는 방법을 배우다.
<!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="txt">h1태그 컨텐츠</h1>
<button onclick="popUp()">직접 작성</button>
<button id="btn_han">핸들러용 버튼</button>
<button id="btn_lis">리스너용 버튼</button>
<button id="btn_event">이벤트 객체용 버튼</button>
<script>
/*
Event = 특정 요소에 원하는 이벤트를 부여해보자
ex) click, mouseover, mouseout, change..
eventHandler vs eventListener
1) eventHandler
- 하나의 요소 당 하나의 이벤트만 부여 가능
2) eventListener
- 하나의 요소 당 여러개의 이벤트 부여 가능
Mission 각각의 버튼을 클릭 시, id가 txt인 요소의 컨텐츠 값을 팝업창으로 띄우기
팝업창을 출력하는 함수
*/
const popUp = () => {
let h1Tag = document.getElementById("txt") // 문서노드 document로 가서 HTML에서 id가 txt인 요소의 컨텐츠 가져오기
alert(h1Tag.innerText)
}
const popUp2 = () => {
let h1Tag = document.getElementById("txt")
alert("두번째 팝업창 : " + h1Tag.innerText)
}
// Case 1. html태그에 직접 함수의 이름을 명시하는 방법
// <button onclick="popUp()">직접 작성</button>
// 단점 : 하나의 요소 당, 하나의 이벤트만 처리 가능, 함수명이 노출
// Case 2. 이벤트 핸들러
// "핸들러용 버튼"을 클릭했을 때, popUp 함수를 호출
// 단점: 하나의 이벤트만 처리 가능하다. 2개를 해도 하나만 뜸, 1:1 이벤트 처리
let btn1 = document.getElementById("btn_han")
console.log("btn1 : ", btn1) // 잘 가져왔나 확인
btn1.onclick = popUp; // btn1은 객체, popUp() 소괄호를 쓰면 무조건 출력됨
btn1.onclick = popUp2;
// Case 3. 이벤트 리스너 (주로 사용)
// addEventListener(이벤트, 함수)
// 장점 : 다중 이벤트 등록 가능
// 단점 : 코드가 길어진다.
let btn2 = document.getElementById("btn_lis")
btn2.addEventListener("click", popUp)
btn2.addEventListener("click", popUp2)
// 콜백함수 = 함수 안에 들어있는 함수
// Ex10_이벤트실습.html에 있는 익명함수! 참고할 것!
// Case 4. 이벤트 객체 : 이벤트의 대상을 찾기
document.querySelector("#btn_event").addEventListener("click", (event) => {
// 내가 클릭한 그 대상이 뜬다 : 매개변수.target (보통은 event => e)
console.log("이벤트 객체", event.target.innerText)
})
</script>
</body>
</html>Case 1) HTML태그에 직접 함수의 이름을 명시
<button onclick="popUp()">직접 작성</button>
// 단점 : 하나의 요소 당, 하나의 이벤트만 처리 가능, 함수명이 노출전 글에서 사용했던 방식.
Case 2) 이벤트 핸들러 eventHandler
// Case 2. 이벤트 핸들러
// "핸들러용 버튼"을 클릭했을 때, popUp 함수를 호출
// 단점: 하나의 이벤트만 처리 가능하다. 2개를 해도 하나만 뜸, 1:1 이벤트 처리
let btn1 = document.getElementById("btn_han")
console.log("btn1 : ", btn1) // 잘 가져왔나 확인
btn1.onclick = popUp; // btn1은 객체, popUp() 소괄호를 쓰면 무조건 출력됨
btn1.onclick = popUp2;HTML의 요소를 가져오기 위해, id가 있으니 document.getElementById()
Case 1과 비슷한 느낌의 방법이기도 한데, 가져온 요소를 객체취급하고 객체. 이벤트 = 쓸 함수단점은 이벤트를 여러 개 해도 1개만 일어난다.
Case 3) 이벤트 리스너 eventListener (주로 사용⭐⭐⭐)
// Case 3. 이벤트 리스너 (주로 사용)
// addEventListener(이벤트, 함수)
// 장점 : 다중 이벤트 등록 가능
// 단점 : 코드가 길어진다.
let btn2 = document.getElementById("btn_lis")
btn2.addEventListener("click", popUp)
btn2.addEventListener("click", popUp2)
// 콜백함수 = 함수 안에 들어있는 함수HTML의 요소를 가져오기 위해, id가 있으니 document.getElementById()
객체.addEventListener("이벤트", 함수)함수에 소괄호를 쓰지 않는 이유는 매개변수 위치에 있으니 소괄호를 쓰지 않는다.
Case 4) 이벤트 객체
// Case 4. 이벤트 객체 : 이벤트의 대상을 찾기
document.querySelector("#btn_event").addEventListener("click", (event) => {
// 내가 클릭한 그 대상이 뜬다 : 매개변수.target (보통은 event => e)
console.log("이벤트 객체", event.target.innerText)
})case3의 이벤트리스너의 함수의 매개변수를 활용해서 이벤트가 일어난 대상을 찾아낼 수 있다. 매개변수.target을 하면 이벤트가 발생한 대상을 찾아낸다.