이벤트 핸들링
이벤트란 DOM에서 발생하는 다양한 이벤트 혹은 상호작용 동작을 나타내는 프로그래밍 인터페이스이다.
예를 들어 버튼을 클릭했을 경우, 키보드를 눌렀을 경우, value값이 바뀌는 경우 등등이 있다.
따라서 각각의 이벤트에 대한 이벤트 핸들러(event handler)을 정의할 수 있다. 이벤트가 시작되면 실행될 코드 블록을 뜻하며 주로 함수가 이 역할을 담당한다.
코드 예시
const handleClick = function() {
window.alert("환영합니다~")
}
const button = document.querySelector("button");
button.onclick = handleClick- handleClick이라는 함수 표현식을 만들었다. handleClick을 대입했을 경우 alert창이 뜬다.
- button 엘리먼트가 click 되었을 때 handleClick을 대입한다.
여기서 button.onclick = handleClick() 이런식으로 함수 호출문을 대입하는 것이 아닌 함수만을 대입하는 이유가 궁금해 공부해보았다.
- 함수만을 대입하는 경우: 이벤트가 발생했을 때 해당 함수를 불러와서 동작시킨다. 또한 이벤트 객체를 자동으로 인수로 받을 수 있다.
- 함수 호출문을 대입하는 경우: 함수가 설정되는 시점에 이벤트 발생 여부와 상관없이 실행되어버린다. 이벤트와는 상관없이 계속해서 호출되는 상황이 발생한다.
위의 예시처럼 on으로 시작하는 이벤트 속성을 사용하는 방법도 있고
addEventListener 메소드를 활용하는 방법도 있다.
addEventListener은 이벤트 객체와 이벤트 함수를 매개변수로 받을 수 있다.
그리고 자동으로 데이터를 전달하는 기능 또한 만들 수 있다.
코드 예시
target.addEventListener('click', function() {})
target.addEventListener('click', function(event) {})- click이벤트가 발생하면 함수를 호출하겠다는 의미의 addEventListener
- 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입하겠다는 의미
function handleClick () {
window.alert("환영합니다~")
}
btn.addEventListener('click', handleClick)위 와 같이 btn 엘리먼트에 이벤트 객체와 이벤트 핸들러를 호출해서 handleClick이라는 함수를 호출시킬 수 있다.
value 속성
이벤트 핸들링에 대해 배웠으니 엘리먼트에 value값이 제출되었을때(onSubmit)되었을 때 value에 접근하는 법을 배울 차례이다.
value는 단어의 의미와 마찬가지로 사용자 입력값이나 한 엘리먼트의 내용에 접근할때 많이 쓰이는 키워드이다.
보통 입력 엘리먼트인 input태그에 많이 사용되며 form태그와 함께 사용되는 경우가 많다.
이러한 엘리먼트의 내용에 접근하는 키워드인 value와 이벤트 핸들링을 섞어서 연습해보자면
코드 예시
const form = document.querySelector("form")
form.addEventListener('submit', function(e) {
console.log(e.target.이름.value)
})- form 엘리먼트에 제출할 때 실행될 이벤트 핸들러를 적용했다.
- 이벤트 핸들러의 내용은 submit이 발생된 target의 '이름'의 value값을 띄우는 것이다.
회고: 엘리먼트에 직접 이벤트 객체와 핸들러를 적용할 때 왜 핸들러 호출식(함수명())을 안쓰고 핸들러명만 쓰는지 이해가 안되었지만 구글링 하고나서 함수 호출식을 쓰면 해당 함수를 설정할 때 이벤트 발생과 상관없이 함수가 실행되어버린다는 것을 알게 되었다. 이벤트 핸들러를 사용할 때는 호출식 사용이 아니라 함수 그 자체를 대입해야 겠다.
