Javascript) 이벤트 객체, 이벤트 발생 객체, this 용법(7)

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

이벤트 객체

- 이벤트 관련 정보를 가진 객체

- 핸들러의 매개인자로 전달

 

이벤트 발생 객체

- 이벤트 객체의 target 속성

- 이벤트 핸들러 안의 this 속성

 

HTML 코드

<button id="btn5">이벤트객체 | 이벤트발생객체</button>

 

Javascript 코드

 

this 용법 7) 이벤트 핸들러 안의 this는 이벤트 발생 객체(일반함수기준)

btn5.addEventListener('click', function(event) {
    console.log(event);
    console.log(this);
    console.log(event.target);
});

이벤트 객체의 target 속성과 this 속성이 같은 것을 확인할 수 있습니다. (이벤트 발생 객체)

 

console.log(event.target === this);
console.log(event.target.innerHTML, this.innerHTML);

※ 화살표 함수의 this는 부모스코프의 this이므로 화살표함수로 변경하면 결과가 달라짐!!!

또한 매개변수명은 자율적으로 지정해줄 수도 있습니다. (꼭 event가 아니어도 됨)

 

 

inline으로 이벤트 작성 시 주의사항

HTML 코드

<button id="btn5" onmouseover="bar();">이벤트객체 | 이벤트발생객체</button>

 

Javascript 코드

const bar = (e) => {
    console.log(e);
};

이벤트 객체가 넘어오지 않았기 때문에 undefined가 출력되는 것을 확인할 수 있습니다.

 

작성한 내용이 미리 작성된 어떠한 함수의 몸통부로 전달 되었고, 해당 함수의 매개변수명이 event로 고정 되어있는 것을 확인할 수 있습니다.

따라서 inline 요소로 작성한 이벤트의 이벤트 객체를 넘겨줄 때는 반드시 매개변수명을 'event'로 지정해줘야합니다.

 

<button id="btn5" onmouseover="bar(event);">이벤트객체 | 이벤트발생객체</button>

이번에는 이벤트 객체가 잘 넘어오는 것을 확인할 수 있습니다.