이벤트 처리: 마우스 지나가거나 클릭등

<h2>이벤트 처리기</h2>

<!--

    html 이벤트의 예:

    사용자가 마우스를 클릭할 때

웹 페이지가 로드된 경우

이미지가 로드된 경우

마우스가 요소 위로 이동할 때

입력 필드가 변경되는 경우

HTML 양식을 제출하는 경우

사용자가 키를 칠 때

-->

<!--<h1 onclick="this.innerHTML='Ooops!'">글자 클릭하세요</h1>-->

<h2 onclick="changeText(this)"> 글자를 클릭하세요.</h2>

<script>

    function changeText(id){

        id.innerHTML="Ooops!";

    }

</script>  // 클릭하면 Ooops! 으로 변경

<button onclick="displayDate()" >날짜 시간 표시</button>

<script>

    function displayDate(){

        document.getElementById("demo4").innerHTML=Date();

    }

</script>

<p id="demo4"></p>  //이안에 지금의 날짜와 시간이 표시된다.

<hr>

<!-- 온, 언 로드는 페이지 들어가거나 나갈때 트리거 됨-->

<p id="demo5"></p>

<script>

    function checkCookies(){

        var text="";

        if(navigator.cookieEnabled==true){ 

/navigator.cookieEnabled쿠키가 활성화되었는지 여부를 나타내는 부울 값을 반환

            text="cookies are enabled.";            

        }else{

            text="Cookies are not enabled.";

        }

        document.getElementById("demo5").innerHTML=text;

        document.getElementById("demo5").style.background = "green";

    }

</script>

<!--마우스 지나갈때ㅣ....-->

    <div onmouseover="mOver(this)" onmouseout="mOut(this)"

    style="background-color:#D94A38;width:120px;height:20px;padding:40px;">

    Mouse Over Me</div>

    <script>

    function mOver(obj) {

    obj.innerHTML = "Thank You"  //지나가면 표시되는 문구

    }

    function mOut(obj) {

    obj.innerHTML = "Mouse Over Me" //평소에 표시되는 문구

    }

    </script> 

<hr>

        <!--마우스 클릭-->

    <div onmousedown="mDown(this)" onmouseup="mUp(this)"

    style="background-color:#D94A38;width:90px;height:20px;padding:40px;">

    Click Me</div>

    <script>  //클릭되면 글씨가 변경됨

        function mDown(obj) {

          obj.style.backgroundColor = "#1ec5e5";

          obj.innerHTML = "Release Me";

        }

       

        function mUp(obj) {

          obj.style.backgroundColor="#D94A38";

          obj.innerHTML="Thank You";

        }

        </script>

<h2>