Event에 함수 바인딩 오류
<body>
<section>
<div>
<input class="myInputs" type="text" placeholder="내용을 입력하세요">
<button class="myButton">확인하기</button>
</div>
</section>
<script>
// 이곳에 코드를 작성합니다.
// 버튼 가져오기
const btn = document.querySelector('button')
// 버튼 클릭 함수
const check = function () {
// input Tag 가져오기
const input_tag = document.querySelector('input')
// input 안의 텍스트 가져오기
const data = input_tag.value
if (data.trim()) {
if (data === '학생들 모두 화이팅') {
alert('여러분을 응원합니다:)')
} else {
alert('다시 시도해 주세요:)')
}
} else {
alert('입력하세요')
}
}
// 버튼 클릭 이벤트
btn.addEventListener('click', check())
</script>
</body>
</html>버튼을 클릭하면 check함수가 실행되도록 코드를 짯는데
자꾸 버튼을 클릭하지 않았는데도 함수가 실행되는 오류가 발생했다
그 이유는 다음과 같다
btn.addEventListener('click', check())이 코드는 버튼의 click 이벤트에 check() 함수를 바인딩하는 것을 의도하고 있지만,
check() 함수를 즉시 실행하고 그 반환 값을 addEventListener() 메서드의 콜백으로 전달하고 있다.
따라서 이벤트 핸들러는 check() 함수의 반환 값인 undefined가 된것
해결 방법은 check() 함수를 바인딩할 때 함수 이름만 전달하도록 수정하는 것이다.
btn.addEventListener('click', check)위 코드와 같이 check() 함수를 클릭 이벤트에 바인딩하면 버튼 클릭시
check() 함수가 실행된다.
바인딩(binding)이란?
변수나 함수, 객체 등을 어떤 값에 연결하는 것을 의미
즉, 변수나 함수 등을 메모리상의 주소와 연결하는 것
예)
1. 변수를 선언 -> 변수가 메모리상에 공간을 할당 받음
2. 변수에 값 할당 -> 그 값이 메모리상의 해당 변수의 주소와 연결
== 바인딩
+JavaScript에서는 변수, 함수, 객체 등 모든 것이 객체이므로,
모든 것이 프로퍼티와 메서드를 가지고 있다.
이러한 객체의 프로퍼티와 메서드를 변수나 함수 이름과 연결하는 것도 바인딩이다.
이벤트 핸들러(event handler)란?
웹 페이지나 애플리케이션에서 발생하는 이벤트를 처리하기 위해 작성된 함수
- 이벤트 핸들러는 웹 페이지에서 버튼을 클릭하거나, 마우스를 움직이거나, 키보드를 누르는 등의 사용자 입력에 대한 응답으로 실행될 수 있음
- 이벤트 핸들러는 보통 JavaScript 코드로 작성
- JavaScript에서는 addEventListener() 메소드를 사용하여 이벤트 핸들러를 등록할 수 있음
- addEventListener() 메소드는 첫 번째 인자로 이벤트 이름을, 두 번째 인자로 이벤트 핸들러 함수를 전달
이벤트 실행 후 Input 요소 초기화
const check = function() {
const input_tag = document.querySelector('input');
const data = input_tag.value;
if (data.trim()) {
if (data === '학생들 모두 화이팅') {
alert('여러분을 응원합니다:)');
} else {
alert('다시 시도해 주세요:)');
}
} else {
alert('입력하세요');
}
// input 요소의 값을 빈 문자열로 설정하여 초기화합니다.
input_tag.value = '';
};
클릭 이후에 input 요소 안의 내용을 초기화 하려면 check 함수 안에서 input 요소의 값을 빈 문자열로 설정하면 된다.
// input 요소의 값을 빈 문자열로 설정하여 초기화합니다.
input_tag.value = '';.reset()을 써도 똑같은가?
요소에서만 사용할 수 있는 메서드로, 요소 안의 모든 ,
.reset() 메서드는
