12월 2일 복기
오늘은 이벤트에 대해서 알아보겠다.
나는 HA에서 쿼리셀렉터로 인자를 가져오고
그것에 대해서 함수를 설정해준다음에
click이라는 이벤트를 설정해줘서
인자와 함수를 연동한다라는 것이 머리로는 이해가 되었지만
잘 따라가지 못했다. 그러던 도중
생활코딩을 보게 되었고
https://www.youtube.com/watch?v=Y3_2BLb3hz8
이벤트에 대해서 이야기해보려고 한다.
먼저 HTML에서 버튼을 만들어줘야한다.
클릭하세요
그다음에 script에서 HTML에서 인자를 선택해야한다.
var btn=document.querySelector('.btn')
왜냐 script에서 어떻게 행동값을 넣을것이니까요
클릭해서 뭐가 변할것인지 생각한다.
var maintitle=document.querySelector('#main-title')
여기서는 메인타이틀에 있는 배경화면이 파랑색으로 바뀐다고 설정해주었다. CSS 스타일의 값을 바꿔준다.
그 다음에 함수와 연동한다.
btnClickHandler라는 이름으로 함수를 만들어준다.
css값은 위에 설정으로
.special {
background: pink;
}
로 설정해놓았다.
함수 만들기
function btnClickhandler() {
maintitle.style.background = 'dodgerblue'
}
style은 css를 관리하는 요소다.
함수는 만들어 놓았으니 이제 버튼이랑 함수랑 연결을 해줘야하는데
클릭하세요 버튼을 누르면 저 함수를 실행시켜야 되는 접점이 없다.
이벤트 만들기
addEventListenr라는 것을 넣어준다.
btn.addEventListener('click', btnClickhandler);
첫번째 인자는 -> click
두번쨰 인자는 -> 함수를 넣어준다.
btn.onclick = btnClickhandler 도 되지만
2,3번 실행은 안된다.
결과적으로
var btn=document.querySelector('.btn')
var maintitle=document.querySelector('#main-title')
function btnClickhandler() {
maintitle.style.background = 'dodgerblue'
}
btn.addEventListener('click', btnClickhandler);
의 함수로 버튼을 만들고 함수를 넣어주고 실행시키는 이벤트까지 만들었다.
여러개의 이벤트가 있을때
var menuLinks =document.querySelectorAll('.menu-link');
for (var i=0; i <menuLinks.length; i++) {
menuLink[i].addEventListener('click', clickMenuHandler);
}
그 다음에 위에 함수 작성
function clickMenuHandler () {
console.log('click');
}
호이스팅이 되어서
function clickMenuHandler () {
console.log('click');
}
var menuLinks =document.querySelectorAll('.menu-link');
for (var i=0; i <menuLinks.length; i++) {
menuLink[i].addEventListener('click', clickMenuHandler);
}
이 된다.
