Web/Javascript

[Javascript] EVENT

동띵 2022. 4. 2. 19:17

메인 화면

이벤트를 추가하기 위해 querySelector를 사용해 엘리먼트를 선택해 주었다.

 

이벤트 추가 방법 - event handler, addEventListener

 

1) event handler

- 원하는 타겟.이벤트 이름 = 콜백 함수

- 콜백 함수 부분에 들어가는 것을 이벤트 헨들러라고 함

- 가독성이나 유지보수를 위해 분리하여 작성하는 것이 좋음

 

- 이벤트 이름 앞에 on 붙임 (모두 소문자)

 

ex) 클릭 시 콘솔 창에 clicked 찍히게 하기

- $div.onclick = handleClick에서 함수에 호출 기호 ()가 없는 이유

-> handleClick이 콜백 함수여서 조건 만족 시 함수를 자동으로 호출해주기 때문

$div 클릭 시

이벤트 헨들러 사용 시 단점

- 동일한 이벤트에 서로 다른 콜백 함수를 지정하면 뒤에 이벤트 헨들러가 앞에 이벤트 헨들러를 덮어 씌움

ex) $div onclick 시 console.log('clicked')와 alert('clicked')가 있으면 뒤에 이벤트 헨들러가 실행된다.

=> 따라서 addEventListener를 사용하는 것이 더 좋다.

 

2) addEventListener

- 원하는 타겟.addEventListener('이벤트 이름', 콜백 함수나 함수 이름)

- 이벤트 이름 앞에 on 붙이지 X

- 동일한 이벤트에 서로 다른 콜백 함수 지정해도 모든 이벤트 헨들러가 적용됨

ex) $div onclick 시 console.log('clicked')와 alert('clicked')가 있으면 두 함수 다 실행된다.

 

 

ex) 클릭 시 콘솔 창에 clicked 찍히게 하기

또는

 

이벤트 삭제 방법 - removeEventListener

 

removeEventListener

- 원하는 타겟.removeEventListener('삭제하고 싶은 이벤트', 이벤트 함수 이름)

- 이벤트 함수 이름을 적어야 하므로 익명 함수를 적으면 안 된다

 

<이벤트에 대한 정보 가져오기>

이벤트 함수들은 기본적으로 이벤트에 대한 정보를 인자로 받을 수 있다.

현재 이벤트 함수 인자에 아무것도 존재하지 않지만,

이벤트 함수는 무조건 첫 번째 인자로 현재 일어난 이벤트에 대한 정보를 확인할 수 있다.

매개변수에 대한 이름은 아무거나 적어도 상관없지만,

보통은 event나 e라고 적는다.

console.log(event) 실행 시

위 사진처럼 이벤트에 대한 정보가 출력되고,

여기서 현재 이벤트에 대한 정보를 알 수 있다.

이러한 정보 중에서 target을 가장 많이 사용하게 된다.

 

target은 이벤트가 일어난 대상으로,

위 코드에서는 CLICK ME라는 div를 말한다.

console.log(event.target) 실행 시

만약 click me라는 텍스트를 가져오고 싶다면 innerText를 사용하면 된다.

 

<input에 입력한 값 가져오기>

- input은 change라는 이벤트를 통해 사용자가 입력한 값을 받아올 수 있음

- change는 커서가 다른 곳을 클릭해야지 이벤트가 실행됨

위 input 태그를 펼쳐보면

입력한 값도 확인할 수 있다.

 

console.log가 아닌 console.dir을 사용하면 객체에 대한 정보가 나오는데,

여기서 value 값에 입력한 값이 나온다.

따라서 입력 값만 받아오고 싶다면 event.target.value를 사용하면 된다.

위 코드를 실행했을 때 submit 버튼을 누르거나 엔터 키를 누르면 새로고침이 되어 입력 값이 사라진다.

form은 submit 버튼이나 엔터 키를 누르면 자동적으로 form이 제출되면서 새로고침 되기 때문이다.

이 과정에서 작성했던 input 값이 날아가게 되는데,

preventDefault라는 메소드를 사용하면 새로고침을 막을 수 있다.

 

preventDefault

- 이벤트가 가지고 있는 기본적인 동작을 막아줌

- 새로고침 방지

새로고침을 막아서 submit 버튼이나 엔터 키를 눌러도

event.target.value가 날아가지 않고 출력되는 것을 볼 수 있다.

하지만 콘솔 창에 출력된 값은 event.target.value로 인해 찍힌 것인데, 

이것은 input에 change라는 이벤트가 발생했을 때 해당 이벤트에 접근하여 가져온 값이다.

 

form에 추가된 handleSubmit 이벤트는 change 이벤트와 다른 것이기 때문에

event.target.value를 사용해도 input에 입력된 값을 가져올 수 없다.

이럴 때는 $input의 value 값을 가져오면 된다.

잘 출력 됨

하지만 submit 버튼이나 엔터 키를 눌러도 input 창에 입력한 값이 사라지지 않는 것을 볼 수 있다.

위 값을 초기화시켜주기 위해서는

$input.value를 통해 입력된 값에 접근하고 해당 값에 빈 문자열을 할당해주면 된다.

안녕하세요를 입력하고 submit 버튼을 누르거나 엔터 키를 누르면

콘솔 창에 입력했던 '안녕하세요'가 제대로 출력되고,

input 창이 초기화된 것을 확인할 수 있다.


강의 출처: 컴공 선배

'Web > Javascript' 카테고리의 다른 글

[Javascript] 객체 value 값으로 key 값 찾기  (0) 2022.04.19
[Javascript] localStorage  (0) 2022.04.03
[Javascript] DOM - (2)  (0) 2022.03.29
[Javascript] DOM - (1)  (0) 2022.03.29
[Javascript] 반복문  (0) 2022.03.26