JavaScript 10. 이벤트

이벤트 모델 종류

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

: 특정 요소 객체를 가지고와서 해당 요소의 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식
   이벤트 제거시에는 null 대입 

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

   <div id="area1" class="area"></div>
   
   <script>
        const divEl = document.getElementById("area1");
       
        document.getElementById("btn1").onclick = function(){
            divEl.innerHTML += "btn1이 클릭되었습니다.<br>";
        };

        document.getElementById("btn2").onclick= function(){
            divEl.innerHTML += "btn2가 클릭되면서 btn1이벤트 제거됨<br>";
            document.getElementById("btn1").onclick = null; 
        }

   </script>

 

인라인 이벤트모델

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

<button onclick="document.getElementById('area2').innerHTML+='첫번째 버튼 클릭<br>'">실행확인</button>
   <button onclick="test1();">실행확인</button>
   <div id="area2" class="area"></div>

   <script>
        function test1(){
            document.getElementById("area2").innerHTML += "두번째 버튼 클릭<br>"
        }
   </script>

 

표준 이벤트모델 (addEventListener)

: w3c에서 공식적으로 지정한 이벤트 모델 . IE는 9버전부터 지원
  이벤트 제거시에는 null 대입 

 이벤트 걸고자하는 요소객체.addEventListener("이벤트명",이벤트핸들러);

<button id="btn3">실행확인</button>

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

      btn3.addEventListener("click",function(){
        alert("표준이벤트 모델 테스트");
      });

      //mouseenter : 마우스 갖다대면 발생하는 이벤트 -> 마우스 빠져나가도 그대로 유지 
      btn3.addEventListener("mouseenter",function(){ 
        btn3.style.backgroundColor = "red";
      })

      //mouseout : 마우스 빠져나갔을때 이벤트 
      btn3.addEventListener("mouseout",function(){
        btn3.style.backgroundColor = null;
      })

   </script>

---

 📌이벤트가 발생한 해당요소객체에 접근하는 방법 

 

고전이벤트 방식

:이벤트 발생 객체는 핸들러 내부에서 this로 표현, 매개변수로 이벤트 정보 전달( e, window.event)

document.getElementById("btn4").onclick = function(e){ //이벤트핸들러
 console.log(e); // 현재 발생된 이벤트에 대한 정보가 담겨있는 Event객체 
 console.log(window.event); //Event객체 
//현재 이벤트가 발생한 요소객체에 접근하고자한다면 --->> e.target/ window.event.target / this
    console.log(e.target);
    console.log(window.event.target);
    console.log(this);

    e.target.innerHTML = "버튼클릭됨";
    window.event.target.style.backgroundColor = "gold";
    this.style.color="white"
     }

 

표준이벤트 방식 

:이벤트 발생 객체는 핸들러 내부에서 this로 표현, 매개변수로 이벤트 정보 전달( e, window.event)

document.getElementById("btn5").addEventListener("click",function(e){ //이벤트핸들러
        console.log(e.target);
        console.log(window.event.target);
        console.log(this);

        })

 

인라인이벤트방식

: window.event.target 으로만 접근가능 

  function test2(e){
        //console.log(e); //undefined (==초기화가 안됨 == 값이 대입되어있지않음 )
        //console.log(e.target);
        //console.log(this); //선언적함수에서의 this는 window객체를 가리킴

        console.log(window.event.target);
     }

 

  <button onclick="test3(this);">인라인이벤트방식2</button>
  <script>
     function test3(el){
         console.log(el);
     }
  </script>

>  onclick= "함수명(this)" 로 객체를 전달한 값을 받아사용할 수도 있음 

---

키보드 관련 이벤트

- keydown | keypress :  키가 눌려질때 발생하는 이벤트

> keydown : 키보드의 모든 키가 눌려질때 발생됨
> keypress : 키보드의 펑션키, 기능키, 한글 제외한 나머지 키가 눌려질때 발생됨

- keyup : 키가 떼어지는 순간 발생하는 이벤트 

이름 : <input type="text" id="userName" >

<script>
    document.getElementById("userName").onkeyup= function(e){
       // console.log("이벤트발생");

      //console.log(e)
      //console.log(e.key); //현재 누른키
      //console.log(e.keyCode); //현재 누른키의 코드

      console.log(this.value); 
    }
</script>

이름 :

---

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

: 기본적으로 이벤트 핸들러를 가지고 있는 요소 

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

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

<a href="http://www.naver.com" onclick="alert('속았지?ㅋ'); return false">네이버로 이동</a>

> 기본이벤트가 있는 요소에 다시 이벤트 속성을 부여하면 입력한 이벤트 코드가 먼저 실행됨 

네이버로 이동

- 메소드 호출방식 

<a href="http://www.google.com" onclick="return test4();">구글로이동</a>
<script> 
  function test4(){ 
      if(confirm("페이지 이동하시겠습니까?")){
        return true;
      }else{
        return false;
      }
  }

</script>

 > 선언적 함수는 return 하는 순간 호출했던 곳으로 돌아가고, 돌려받은 함수를 다시 return하게끔 return 함수명()으로 입력해줘야 함 

구글로이동