이벤트 리스너 추가하기 (영상 버전)

이것저것 해보려고
이 페이지를 만들었어요

그런데
좀 지루하네요

내용도 없고

이 버튼은 눌러도
아무 반응이 없어요

이 버튼을 인터랙티브하게
만들어 볼거에요

사용자가
버튼을 클릭하면

버튼 안의 문구가
바뀌게 할거에요

첫번째는
요소를 찾는거에요

우리가 이벤트에
반응할 요소 말이에요

이 경우엔
그 요소는 버튼이죠

그리고 버튼은
클릭이 가능해요

그래서 우리는
clickerButton변수를 만들고

document.getElementById
를 이용해서

값을 받아오고
이 변수에 저장할 거에요

다음 단계는
함수를 정의해서

클릭이 발생하면
호출되게 하는 거에요

이 함수는
onButtonClick이라고 하고

비어있는 함수를
여기 정의해둘게요

당연히 뭔가를
채워야해요

아니면 별로 재미없는
함수가 될테니까요

이 버튼의 문구를
바꾸려면

clickerButton의 값을 이용해
textContent에 넣어주면 돼요

"Oh wow, you clicked me"
라고 해보죠

와
행복한 버튼이에요!

많은 코드는 아니지만
더 복잡하게 만들 수 있어요

이게 작동된다면요

우리가 쓴 코드가 한 건
변수를 정의한 것 뿐이에요

그래서 버튼을 눌렀을 때
아직 아무것도 일어나지 않아요

마지막 단계는
모든 걸 합치는 거에요

그래서 브라우저에게
우리가 만든 함수를 호출하라고

우리가 찾아둔 버튼이
클릭이 될 때마다 말이죠

이건 이벤트 리스너를
버튼에 추가해서 구현할 수 있어요

clickerButton.addeventlistener
처럼요

그리고 이 방법에는
두 가지의 인자를 전달해야해요

첫번째는 이벤트의 이름
'click'

두번째는 우리가 호출하려는
함수의 이름이에요

클릭할 때 호출되는 함수죠
'onButtonClick'

이걸 잠시 멈추고
버튼을 한번 클릭해보세요

동작하나요?

그랬으면 좋겠네요
전 동작하거든요

이 함수가 어떻게
작동되는 지에 대해 얘기해보죠

약간 어려울 수 있거든요

이 함수를
이벤트 리스너 함수라고 하거나

콜백 함수라고 해요
그게 사용되고 있는 방법이니까요

이 함수가 이벤트가 일어나면
호출(콜)되길 원해요

보통 페이지 로드될 때
이게 호출되길 원하진 않잖아요

만약에 페이지가 로드될 때
호출되게 하고 싶다면

여기 아래에 한 줄을
이렇게 추가해야 할거에요

함수이름 뒤에 괄호를 쓰는걸
기억하세요

이 괄호로
함수를 호출하는 거에요

이걸 내버려두면
함수를 호출하는게 아니라

그냥 참조하는 거에요

그건 이렇게 인자를
전달하고 싶을 때 하는 거에요

이건 그냥 브라우저에게
이렇게 말해주는 거에요

"여기 나중에 호출할 함수가 있어.
지금은 말고"

그러니까 괄호를 여기에는
적지 않도록 해요

이 함수 이름 뒤에요

왜냐하면 함수 자체가 아니라
함수의 리턴값을 전달하는 거니까요

실수로 그렇게 했다면

이 버튼은 페이지가 로드될 때
바뀌고 다음엔 바뀌지 않을 거에요

고치려면
여기 괄호만 지우면 돼요

실수로 추가했던 것을요

이제 이 함수는 클릭될 때만
호출될 거에요

한 가지
다른 방법은

여기 익명의 함수를
넣어주는 거에요

익명 함수는
미리 정의된 이름은 없지만

명령어 안에
구현된 함수에요

이 addEventListener부분을
복사해서 붙여넣기 할게요

그리고 이 방법을
하나씩 보여줄게요

그럼 무슨 뜻인지
알 수 있을 거에요

이 함수 이름을 지우고

함수 정의로 대체할게요

여기 붙여넣고

좋아요

이 두 라인의 코드는
정확히 똑같은 일을 해요

음
거의 같게요

두 개 모두 함수를
전달해요

같은 내용의 함수를요

차이점은 첫번째 것은

위에 미리 정의해 둔 함수를
전달하는 것이고

두번째 것은
익명 함수를

명령어 속에 정의함과
동시에 전달하는 거에요

두 방법 모두 작동해요

많은 개발자들은
미리 정의된 함수를 선호해요

왜냐하면 코드가 읽기 쉽고

디버깅도 쉽고

미리 정의된 함수를
여러 번 호출하고

다른 이벤트에서도
호출할 수 있으니까요

어떤 방법을 쓰든지
여러분 마음이에요

두 개를 동시에
사용하지는 마세요

브라우저는 클릭이 발생할 때
두 개 모두를 호출할 것이고

두 번 부를 이유가 없으니까요

앞으로 가서
익명 함수를 지울게요

전 첫번째 방법이
더 좋으니까요

이제 여러분은 많은 것을
할 수 있게 되었어요

이벤트 리스너를
추가할 수있게 되었으니까요

페이지의 더 많은 부분에
추가해 볼 수도 있고

다른 이벤트를
사용해 볼 수도 있고

다음 시간에
다뤄볼 거에요

DOM을
수정해 볼 수도 있어요

전에 배운 방법들로요

그리고 반응했던
요소 말고도

페이지의 다른 것들도
수정할 수 있어요

한번 해보세요

여러분이 할 수 있는 것을
찾아봐요