JavaScript

이벤트 기본

jineric 2023. 3. 20. 19:06 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 타입</title>
    <script>
        window.onload =function(){      //이벤트가 발생하면  function 실행 html다읽고 나서 이벤트 실행!
            const text = document.getElementById('text');
            text.innerHTML = "<b style='color:deeppink;'>HTML 문서가 모두 로드되었습니다.</b>";
        }
        function changeText(el){
            el.innerHTML = "<b style='color:deepskyblue;'>짠! 문자열이 변경되었어요😁</b>";

        }
    </script>
</head>
<body>
    <h2>이벤트 타입</h2>
    <p id="text"></p>   
    <p onclick="changeText(this)">문자열을 클릭하세요</p>       
    <!-- this 자시자신 객체 p태그를 el에 넣어줌 -->
</body>
</html>