자바스크립트 event 객체

어떠한 이벤트 (마우스(클릭), 키(입력), 폼(전송), 로드(페이지로드) ...)가

발생 했을 때 브라우저가 자동으로 event 객체를 매개인자로 넣어준다. 

 

예를 들어 어떠한 버튼을 클릭 했을 때

클릭 이벤트를 발생시키는 코드

 

이렇게 콘솔에 출력되게 만들었다.

근데 브라우저는 이러한 이벤트가 발생하면 자동으로 event 객체를 매개인자로 넣어주는데

event 객체를 사용하고자 하는 함수에 인자값으로 받아 사용하면 된다.

 

<button id="btn" onclick="clickEvent(event)">버튼</button>

<script>
    function clickEvent(event){
      console.log("클릭 이벤트가 발생했습니다.");
      console.log(event)
    }
</script>

 

 

콘솔에 출력된 이벤트 객체

 

화살표 함수에도 같이 사용할 수 있다.

---

event 객체 대표적인 기능들

 

target - 이벤트가 발생된 요소들을 보여줌

<button id="btn" onclick="btn(event)">
    버튼
</button>

<script>
    function btn(e){
      console.log(e.target)
    }
</script>

 

결과

 

자주사용하는 target 메소드는 type, id, className, value ... 등등이 있다.

<button id="btn" class="btnClass" value="hello" onclick="btn(event)">
    버튼
</button>

<script>
    function btn(e){
      console.log("target : "+ e.target)
      console.log("target.type : "+e.target.type)
      console.log("target.id : "+e.target.id)
      console.log("target.className : "+e.target.className)
      console.log("target.value : "+e.target.value)

    }
</script>