이벤트 객체(Event Object)

이벤트 객체란?

• 사용자의 입력을 기준으로 발생하는 이벤트의 정보를 담은 객체
• 브라우저에서 클릭을 하거나, 어떤 요소에 마우스를 올리거나, 스크롤을 하는 등 많은 내용들이 이벤트로 취급된다.
• console.log로 확인하는 경우 이벤트가 발생하면 내부에 여러 정보를 담은 객체를 반환한다.

이벤트 사용하기

• 이벤트를 사용하는 방법에는 두 가지가 있다.
  1. 사용하고자 하는 요소.onevent = 실행시킬 함수
     → 이때 함수는 호출하는 것이 아니라, 함수의 이름만 작성한다.
     → 이벤트가 실행되면 함수를 실행한다. 라는 뜻
  2. 사용하고자 하는 요소.addEventListener('이벤트', function() {실행 시킬 함수})
• addEventListener 를 사용할 경우 onevent 프로퍼티와는 다르게 이벤트 앞의 on 을 제외하고 문자열로 작성한다.

// 1번 방법

let div = document.querySelector('div')
function fn () {
	console.log('hi')
}
div.onclick = fn

// 2번 방법

div.addEventListener('click', function() {
	console.log('hi')
})

• onevent 프로퍼티를 사용하여 작성하는 방식의 경우 같은 이벤트를 다시 활용하는 경우, 먼저 작성된 내용을 무시하고 뒤의 새로운 프로퍼티의 내용만 추가된다.
• addEventListener의 경우 onevent 와는 다르게, 같은 이벤트여도 중복하여 추가 할 수 있다.

let div = document.querySelector('div')
function hello () {
	console.log('hello')
}
function bye () {
	console.log('bye')
}

div.onclick = hello
div.onclick = bye

// 위의 hello 함수는 무시되고 bye 만 실행된다.

div.addEventListener('click', hello)
div.addEventListener('click', bye)

// hello 와 bye 모두 실행된다.

• 최근에는 addEventListener 가 이벤트를 추가하고, 지우기가 용이하여 자주 사용된다.

이벤트 핸들러(Event Handler)

• 이벤트가 발생했을 때 실행되는 함수를 이벤트 핸들러(Event Handler)라고 한다.

이벤트 알아보기

마우스 관련 이벤트

• onclick → 지정한 요소에 클릭이 발생 했을 때
• onmouseover → 지정한 요소에 마우스가 올라갔을 때

키보드 관련 이벤트

• onkeydown → 키보드가 눌렸을 때
• onkeyup → 키보드가 눌린 후 떨어질 때

form 관련 이벤트

• onsubmit → form 내부에서 제출버튼이 눌렸을 때

입력 관련 이벤트

• onchange → select 또는 input text, textarea 에서 변경이 일어난 경우

event.preventDefault()

• 있는 그대로 해석해보자면, 이벤트의 기본동작을 방지한다. 정도가 될 수 있다.

https://plitche.github.io/language/javascript/2021-07-12-preventDefault/

• 위의 블로그에 따르면,
  1. a태그를 클릭 하였을때, 클릭 이벤트의 작동을 막아 사이트가 이동 되는 것을 막아 줄 수 있다.
  2. submit 의 경우는 조금 다른데, 기존의 submit 버튼을 눌러 발생되는 새로고침을 막는 용도로 사용 할 수 있다.
     → 새로고침은 수행되지 않지만, 데이터의 전송은 정상적으로 이루어진다.

---

+

• 어떤 함수가 이벤트를 통해 실행되는 경우, 해당 함수에 매개변수가 존재한다면 첫번째 인자로 이벤트 객체가 할당된다.
  → 그 어떤 이름을 써도 이벤트 객체로 반환된다.
• 하지만, 그럼에도 불구하고 이벤트 객체를 사용하고자 할 땐, 반드시 event, 혹은 e 를 사용하자.

let here = document.querySelector('.here')

here.addEventListener('click', fn)

function fn(e, b) {
    console.log(e) // 이벤트 객체 출력
    console.log(b) // undefined
}

• event 객체.target.textContent 로 이벤트가 발생하는 요소 내부의 텍스트를 가져 올 수 있다.