[Achievement Goal]
1. 이벤트 핸들러를 엘리먼트에 적용 시킬 수 있다.
- onclick /onsumit / onchange / onmouseover / onkeyup / event.preventDefault
2. onclick 과 addEventListener 의 차이를 안다.
3. 이벤트핸들러 함수를 만들고 그 함수의 인자를 사용할 수 있다.
1.이벤트 핸들러란 ?
브라우저에서 어떠한 액션을 취했을 떄 일어나는 일을 이벤트 라고 하며
이를 조작하는 것들을 이벤트 핸들러 라고 부른다.
on으로 시작하는 모든 속성은 이벤트핸들러로 볼 수 있다. 그 중,
onclick / onsumit / onchange / onmouseover / onkeyup /onscroll 이 대표적이다.
console.dir 로 버튼메뉴를 찾을때 나오는 수만은 이벤트속성들 ,,
그렇다면 이 이벤트 핸들러는 어떻게 적용시켜야 할까?
<button>아메리카노</button>
<button>라떼</button>
<input type = 'text' placeholder="원하는 메뉴를 써주세요.">
<button class = 'find'>찾기</button>
onclick 이벤트 핸들러 예시
아메리카노와 라떼 두개의 버튼이 있다.
이 버튼을 눌렀을 때, 콘솔창에 입력값을 찍어보도록 하겠다.
const btns = document.querySelectorAll('button')
const menu1 = btns[0];
const menu2 = btns[1];
menu1.onclick = handleClick
menu2.onclick = handleClick
function handleClick(e){
//클릭했을때 동작할 내용을 작성한다.
let currentMenu = e.target.textContent
console.log(currentMenu)
}
먼저 두개의 버튼에 해당하는 변수를 querySelectorAll 로 지정해주고
각각의 버튼에 온클릭 이벤트 함수인, handleClick 을 입력했다.
따로 handleClick 라는 함수로 빼주어 변경사항이 필요할 때 함수만 만질 수 있도록 해두면 용이하다.
콘솔창에 잘 찍힌 것을 확인 할 수 있다.
(매개변수로 준 e에 대해서는 아래에서 자세히 다루겠다.)
onchange 이벤트 핸들러 예시
form, input 요소에 onchange 는 입력된 값을 리턴할 때 쓰는 이벤트 핸들러이다.
form, input 요소는 textContent가 아닌, value 를 사용하기 때문에 다음과 같이 작성해준다. (HTML 엘리먼트는 위와 동일.)
const inputs = document.querySelector('input')
const find = document.querySelector('.find')먼저 쿼리셀렉터로 해당 요소를 변수로 지정해준다.
inputs.onchange = getInputValue;
function getInputValue(){
console.log(inputs.value)
inputs.value =''
}getInputValue 라는 함수 안에 inputs의 입력값인 inputs.value 를 작성해준다.
콘솔로그 다음 작성해준 inputs.value =''는 이벤트가 발생한 시점에 입력한 값을 지워주는 역할을 한다.
등등을 쓰면 클릭 또는 엔터를 함과 동시에 콘솔창에 찍히고 입력창인 inputs 는 빈문자열이 된다.
2. onclick 과 addEventListener 의 차이
onclick 은 지정된 단 한번의 이벤트만 진행된다.
이 말은, 같은 변수명의 onclick 함수가 여러개가 있다면 계속 덮어쓰게 되어
가장 마지막에 나온 onclick 함수의 이벤트가 진행된다.
하지만 addEventListener 는 여러번 함수를 지정해도 지정된 함수 수만큼 이벤트가 진행된다.
addEventListener 를 쓰는것이 더 좋아보이긴 하지만 구형 브라우저에서는 사용되지 않는 단점이 있기 때문에 이때는 onclick 이벤트를 쓴다.
그렇다면 위의 온클릭 예제를 addEventListener 로 바꿔보겠다.
(나는 이걸 더 선호함.)
const btns = document.querySelectorAll('button')
for(let i = 0; i < btns.length; i++){
btns[i].addEventListener('click',function(){
console.log(btns[i].textContent+'를 선택했다.')
})먼저 모든 버튼들을 지정하기 위하여 querySelectorAll 로 버튼을 지정해주었고
이 querySelectorAll를 for 문으로 돌려주었다.
btns의 i 번째를 addEventListener로 클릭하면 다음의 함수가 실행되는데
그 함수는 console.log(btns[i].textContent+'를 선택했다.') 가 된다.
뭔가 코드가 더 간결한거 같아서 좋다.
상황에 따라 맞는것을 쓰면 될것같다.
3. 이벤트 핸들러 함수의 인자 이용하기
menu1.onclick = handleClick
menu2.onclick = handleClick
function handleClick(e){
//클릭했을때 동작할 내용을 작성한다.
//let currentMenu = e
console.dir(e)
}위와같이 handleClick 함수의 인자에 e(event 를 뜻함.) 라는 매개변수가 있다.
이 매개변수를 일단 console.dir에 찍어보면 어떻게 나올까?
콘솔에는 MouseEvent 가 나오고 화살표를 눌러보면
수많은 객체가 나오는 것을 볼 수 있다.
그 중 타겟이라는 속성이 있다.
이 속성은 말그대로 내가 선택한 값의 타겟! 을 지정한다고 볼 수 있으며 매우매우 많이 쓰인다.
그렇다면 e.target 으로 작성했을때 콘솔에는 어떻게 나올까?
function handleClick(e){
//클릭했을때 동작할 내용을 작성한다.
let currentMenu = e.target
console.dir(currentMenu)
}
여전히 콘솔창에는 객체밖에 나오지 않는다.
또 버튼 객체의 속성을 뒤집어 까보면
이벤트 타겟이 될 엘리먼트의 텍스트! 를 넣어줘야 제대로 된 결과물이 나온다.
참고로 매개변수 자리에는 e 가 아닌 다른 사용자정의 이름이 올 수 있다.
매개변수는 말그대로 변수임을 잊지말것!
