[JavaScript] 11. 이벤트(addEventListener, mouseenter.. 등)

1. 이벤트 모델 종류

1) 고전 이벤트 모델(기본 이벤트 모델)

- 요소 객체를 가지고 와서 해당 요소 객체에 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식

- 이벤트를 제거할 수도 있음

 

 

■ 요소 내부에 인라인으로 이벤트 속성을 기술하지 않음

    <button id="btn1">확인</button>
    <button id="btn2">확인</button>

    <div id="area1" class="area"></div>

    <script>
        btn1.onclick = function(){
            area1.innerHTML += "BTN이 클릭되었습니다. <br>";
        }
        btn2.onclick = () => {
            area1.innerHTML += "btn2가 클릭되었습니다. <br>";
            btn1.onclick = null;  // 이벤트 제거
        }
    </script>

 

=> 2번째 확인을 누른 결과, 1번째 확인 버튼을 클릭하여도 생성이 되지 않는 것을 볼 수 있음

 

 

 

2) 인라인 이벤트 모델

- 요소 내부에 직접적으로 이벤트 속성을 제시해서 실행할 내용을 정의하는 방식.

- 주로 script 태그 내에 정의되어있는 함수를 호출하는 방식을 선호

 

    <button onclick="test1();">확인</button>
    <button onclick="area2.innerHTML += '두번째 버튼 클릭 <br>'">확인</button>

    <div id="area2" class="area"></div>

    <script>
        function test1(){
            area2.innerHTML += '첫번째 버튼 클릭 <br>';
        }
    </script>

    <br>

 

 

 

3) 표준 이벤트 모델(addEventListener)

    <script>
        const btn3 = document.getElementById('btn3');

        // 이벤트를걸고자하는요소객체.addEventListener('이벤트명', 이벤트핸들러)
        btn3.addEventListener('click', function(){
            alert('표준이벤트모델 테스트');
        })

        const clickFn = function(){
            alert('표준이벤트모델 테스트2');
        }
        
        btn3.addEventListener('click',clickFn)
        btn3.removeEventListener('click', clickFn) // 이벤트 삭제

        // 버튼안으로 마우스 포인터가 들어가는 순간 발생하는 이벤트 : mouseenter
        btn3.addEventListener('mouseenter',() => {
            btn3.style.backgroundColor = 'pink';
        })

        // 버튼안에서 밖으로 마우스 포인터가 빠져나가는 순간 발생하는 이벤트 : mouseout
        btn3.addEventListener('mouseout',function() {
            btn3.style.backgroundColor = 'yellow';
        })
    </script>

 

▶ addEventListeenr

: 이벤트 추가

 

▶ removeEventListener

: 이벤트 삭제

 

▶ mouseenter

: 버튼안으로 마우스 포인터가 들어가는 순간 발생하는 이벤트

 

▶ mosueout

: 버튼안에서 밖으로 마우스 포인터가 빠져나가는 순간 발생하는 이벤트

 

 

=> 이벤트를 2개를 추가하였지만 removeEventListener를 사용하여 이벤트 하나가 삭제된 것을 확인할 수 있음

 

 

 

---

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

 

■ 11_이벤트.html

 

 

(1) 고전 이벤트 모델 방식

 

 

 

 

 

(2) 표준 이벤트 모델 방식

 

 

 

 

(3) 인라인 이벤트 모델 방식

 

console.log(e.target);  => 인라인 내부에서 event를 매개변수로 직접 전달해줘야 정상 호출 가능

console.log(this) => 인라인에 this를 써야함. this를 안하면 window 객체에 있는 값으로 불려와진다.

 

 

---

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

 

1) return값 false로 리턴

▶ 기본적으로 이벤트를 가지고 있는 요소

- a태그 : 클릭시 href에 제시되어있는 url을 요청하는 기본이벤트를 보유

- form 태그 내의 submit : 클릭시 사용자가 입력한 정보들을 action에 제시되어 있는 url 로 제출하면서 요청하는 기본 이벤트를 보유

 

 

▶ 태그 내에 기본적으로 설정되어있는 이벤트를 제거하고자 한다면(실행 안되게끔)

=> 이벤트 핸들러의 return 값을 false로 리턴하면 기본이벤트가 제거된다.

 

 

=> 클릭하여도 네이버로 이동이 안된다.

 

 

 

 

2) 정규표현식

Q. 아이디에 대한 유효성 검사

- 영문자 또는 숫자로만 5글자 ~ 12글자 이하가 맞는지 검사

- 맞지않을 경우 제출이 불가하게끔 return false;

- 로직이 너무 복잡하기 때문에 정규표현식을 통해 유형성 검사를 할 수 있다.

    <form action="test.do" method="get">   <!-- get방식 -->

        아아디 : <input type="text" name="userId" id="userId">  <br>
        <label for="" style="font-size: 10px; color: gray;">영문자 또는 숫자로만 총 5~12자 사이로 입력해주세요</label>

        <br>
        비밀번호 : <input type="password" name="userPwd" id="userPwd"> <br>
        비밀번호 확인 : <input type="password" id="checkPwd"> <br>

        <input type="submit" value="회원가입" onclick="return validate();">
    </form>

 

 

▶ 방법1. (좋은 방법은 아님)

<script>
    if(id.length >= 5 && id.length <=12){   // 글자수가 5~12글자 인경우
    	for(let i=0; i<id.length; i++){
            let char = id.charAt(i);
            if(!((char >= '0' && char < 10) || (char >= 'a' && char < char <= 'z') || 
            (char >= 'A' && char < char <= 'Z'))) {
                return false;
            }
        }
    }else{
        return true;
    }
</script>

 

=> 유형성 검사를 하였지만 코드가 매우 복잡하다!

 

 

 

▶ 방법2. 정규표현식을 통해서 유효한 아이디에 해당되는 특정패턴을 모아보기

- 1단계 : // : 정규표현식 틀.
- 2단계 : /^$/ : ^시작부터 %끝까지
- 3단계 : /^[]$/ : []내의 문자중 하나라도 존재할 경우
- 4단계 : /^[abcdefg...z]$/ : 소문자 a부터 z까지
- 5단계 : /^[a-zA-Z]$/ : 소문자 a부터 (-) z까지, A부터 Z까지
- 6단계 : /^[a-zA-Z0-9]$/ : 숫자 0-9 까지
- 7단계 : /^[a-zA-Z0-9]{5,12}$/ : 5글자 이상 12글자 이하인지 글자수 체크

    <script>
            const regExp = /^[a-zA-Z0-9]{5,12}$/

            if(!regExp.test(id)){
                // 정규표현식 객체에서 제공하는 함수로, 해당 정규식을 만족하는지 묻는 함수
                alert("유효한 아이디가 아닙니다. 다시 입력해주세요");
                return false;
            }

            // 비밀번호 일치여부 확인
            if(userPwd.value != checkPwd.value){
                alert('비밀번호가 일치하지 않습니다.');
                return false;
            }

            return true;
        }
    </script>