07_이벤트(4)

간단한 연결 이벤트

구분	내용
click	클릭했을 때
dblclick	더블클릭했을 때
mouseenter	마우스가 요소에 들어올 때
mouseleave	마우스가 요소에서 나갈 때

---

    <div id="dd">이벤트테스트</div>
    <hr>

---

    <script>
        var dd = document.getElementById("dd");
        /*
        dd.onclick = function() {
        alert("클릭이벤트");
        }
        */

        dd.ondblclick = function() {
            alert("더블클릭이벤트")
        }

        dd.onmouseenter = function() {
            dd.style.color = 'red';
        }

        dd.onmouseleave = function() {
            dd.style.color = 'black';
        }
    </script>

---

이벤트테스트 글씨 더블클릭

 

 

이벤트테스트 글씨 위에 마우스 올렸을 때

 

 

이벤트테스트 글씨 위에 마우스 내렸을 때

---

 

 

 

 

 

구분	내용
focus	요소가 focus 받을 때
blur	요소에서 focus 해제 시
change	요소의 값이 변경되었을 때
keyup	눌렸던 키가 올라올때

---

    <form action="test.html">
        <input type="password" id="in1"><br>
        <input type="password" id="in2"><span id="msg"></span><br>
        <input type="submit" value="제출">
    </form>
    <hr>

---

    <script>
        var in1 = document.getElementById("in1");
        var in2 = document.getElementById("in2");
        
        in1.onfocus = function() {
            in1.style.backgroundColor = 'red';
        }

        in1.onblur = function() {
            in1.style.backgroundColor = 'white';
        }

        /*
        in2.onchange = function() {
           var pw = in1.value;
           var pw_re = in2.value;
           if (pw != pw_re) {
              in2.style.border = "1px solid red";
              alert("패스워드가 다릅니다.")
           }
        }
        */

        in2.onkeyup = function() {
            var pw = in1.value;
            var pw_re = in2.value;
            var msg = document.getElementById("msg")
            if (pw != pw_re) {
                in2.style.border = "1px solid red"
                msg.innerHTML = "패스워드를 확인하세요";
                msg.style.color = "red";
            } else {
                in2.style.border = "1px solid green";
                msg.innerHTML = "패스워드가 일치합니다";
                msg.style.color = "green";
            }
        }
    </script>

---

입력창에 focus했을 때

 

 

입력창에 focus 해제 했을 때

 

 

위의 입력창과 아래 입력창에 입력한 값이 일치하지 않을 때

 

 

 

위의 입력창과 아래 입력창에 입력한 값이 일치할 때