-
[JS] chapter12. 이벤트 객체codeStates front-end/Java Script 2023. 1. 6. 11:56반응형
이벤트 객체
사용자가 버튼을 클릭하면, 그 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져올 수 있게 하는 것
사용자 입력(onclick, onkeyup, onscroll 등)
<실습> 이벤트 객체를 출력하는 코드 작성해보기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>이벤트 객체</title> </head> <body> <button>아메리카노</button> <button>카페라떼</button> <script> let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다. let btnAmericano = menus[0]; let btnCaffelatte = menus[1]; function handleClick(event) { console.log(event); let currentMenu = ____; // TODO console.log(currentMenu + "를 클릭하셨습니다."); } btnAmericano.onclick = handleClick; btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다. </script> </body> </html>출력화면
반응형'codeStates front-end > Java Script' 카테고리의 다른 글
[JS] chapter14. 내장고차함수 (0) 2023.01.12 [JS] chapter13. 고차함수 (0) 2023.01.12 [JS] chapter12. 유효성 검사/ <실습> 회원가입 구현 / classList error (0) 2023.01.06 [JS] chapter11. DOM/DOM 다루기(CRUD) (0) 2023.01.05 [JS] chapter10. JavaScript Koans (0) 2023.01.05
