07_이벤트(3)

기본 이벤트 제거

기본이벤트 : 태그 중 이벤트핸들러를 기본적으로 가지고 있는 것

<a>, <input type="submit">등 입력양식에서 많이 사용

 

 

예) 이벤트 제거

1) <a>페이지 이동 제거

<a href="javascript:void(0)" onclick="함수명"></a>

 

2) submit 이벤트 제거

해당 form 태그에 onsubmit 이벤트 속성에 핸들러 연결 시 false를 리턴

---

 

 

#event.html

     <!--이렇게 작성하면 취소를 눌러도 네이버로 이동함
     <a href="http://www.naver.com" onclick="goNaver();">네이버</a>
     -->
    <a href="javascript:void(0)" onclick="goNaver();">네이버</a>
    <hr>

    <form action="/login.html" method="post">
        <input type="text" name="id"><br>
        <input type="password" name="pass"><br>
        <input type="submit" value="로그인" onclick="return chk();">
    </form>
    <hr>

---

    <script>
        function goNaver() {
            if (confirm("네이버로 이동하시겠습니까??")) {
                location.href = "http://www.naver.com";
            }
        }
        ///////////////////////////////////////////////////////////////////////////

        function chk() {
            var id = document.getElementsByName("id")[0].value;
            //아이디가 user01일때만 페이지 넘김
            if (id != 'user01') {
                return false;
            }
        }
    </script>

---

취소 버튼 클릭 시 페이지를 이동하지 않음

---

 

아래처럼 id를 test01을 입력하고 로그인 버튼을 클릭하면 submit되지 않음

 

 

 

아래처럼 id에 user01을 입력했을 때만 로그인 버튼을 눌렀을 때 submit됨