<!DOCTYPE html> <html lang="ko"> <head> <meta name="viewport" content="width=device-width"> <meta charset="UTF-8"> <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css"> <title>Click event</title> </head> <body> <h1 id="hello">Hello World!</h1> <script> // #hello 요소를 클릭하면, #hello 요소가 화면에서 사라지도록 설정 // → 1. DOM에서 #hello 요소를 표현하는 HTMLElement 객체를 탐색 // 2. HTMLElement 객체에 click 이벤트 핸들러를 연결 // 3. #hello 요소가 화면에서 사라지도록 설정 // 1. DOM에서 #hello 요소를 표현하는 HTMLElement 객체를 탐색 // 2. HTMLElement 객체에 click 이벤트 핸들러를 연결 document.getElementById('hello').onclick = function () { // 이벤트 핸들러: #hello 요소에 click 이벤트가 발생하면 실행할 기능 // 3. #hello 요소가 화면에서 사라지도록 설정 this.style.display = 'none'; }; </script> </body> </html>
