JS(9). 이벤트핸들러 (3)접근, 제거

1. 현재 이벤트가 발생한 요소객체에 접근하는 방법

<button id="btn6"><span>기본이벤트방식</span></button>
    <button id="btn7">표준이벤트방식</button>
    <button onclick="test5(event, this);">인라인이벤트방식</button>

    <script>
        document.getElementById("btn6").onclick = function(event){ //이벤트핸들러
            console.log(event)//이벤트에 관련된 정보가 들어있는 객체를 첫번째 인자로 넘겨준다.
            console.log(window.event)

            //현재 이벤트가 발생한 요소
            console.log(event.target)

            //해당 함수를 호출한 요소
            console.log(this)

            event.target.parentNode.style.background = "red"
            this.innerHTML = "버튼이 클릭됨"
        }

        document.getElementById('btn7').addEventListener("click", function(ev){
            console.log(ev.target)
            console.log(this)
        })

        function test5(ev, _this){
            console.log(ev)
            console.log(_this)
        }
    </script>

2. 태그별로 기본적으로 가지고 있는 이벤트제거

기본적으로 이벤트가 있는 요소

• a 태그 : 클릭시 href에 제시되어 있는 url로 요청하는 기본이벤트 보유
• form  내의 submit버튼 : 클릭 시 사용자가 입력한 값들을 action에 제시되어 있는 url로 제출

태그 내에 기본적으로 설정되어 있는 이벤트가 실행안되게끔 막고 싶다? => 이벤트 핸들러의 return값을 false로 하면 기본이벤트 실행안됨

<a href="http://www.naver.com" onclick="alert('ㅋㅋㅋ'); return false;">네이버로</a>
    
    <form action="test.do">
        아이디 : <input type="text" name="userId" id="user-id">
        <input type="submit" onclick="return validate()">
    </form>

    <script>
        function validate(){
            //영문자 또는 숫자로만 5~12글자이하가 맞는가?
            //조건에 부합하면 return x
            //조건에 부합하지 않으면 return false;

            const userId = document.getElementById('user-id').value
            console.log(userId)

            const regRxp = /^[a-zA-Z0-9]{5,12}$/ //정규식표현
            console.log(regRxp.test(userId))
            if(!regRxp.test(userId)){
                alert("유효한아이디가 아닙니다.")
                return false;
            }
        }

    </script>