개인과제를 하던 도중 검색창에 데이터를 입력하는 이벤트를 수정하던 중 새로운 내용을 알게되었다.
혼자 공부할 때도 느꼈지만 input이라는 아이는 정말... 신기하고 까다롭고 재미있는 녀석같다.
아무튼! 오늘은 간단하지만 많이 쓰일 데이터 변경 시 실행되는 이벤트에 대해 정리해보려한다.
input, change, cut, copy, paste
01. input
input 이벤트: 사용자가 값을 수정할 때마다 발생한다.
input 이벤트는 키보드 이벤트와 달리 어떤 방법으로든 값을 변경할 때 발생하기 때문에
1) 사용자가 마우스를 사용해서 글자를 붙여 넣어도, 2) 음성 인식을 통해 글자를 입력해도 input이벤트가 발생한다.
내가 구현하려했던건 키보드 입력에 따라 버튼이나 엔터를 누르지 않고도 바로바로 결과가 보여지게 만들고 싶었다. 그래서 키보드 이벤트 중에 keydown을 사용했고 잘 구현되는 듯 했으나..! 딱 한가지 문제가 있었다.
바로 input창 내용을 delete키로 지우고 나면 다시 처음 화면이 보여져야하는데 한번 더 delete키를 눌러야만 첫 화면으로 돌아가졌다.
👩🏻💻 문제의 화면
검색창에 데이터를 지웠음에도 불구하고 메인화면이 보이지 않음
한번 더 delete 키를 눌러야만 메인화면 뜨게 됨ㅠㅠ
👩🏻💻 작성한 코드
searchInput.addEventListener('keydown', (e) => {
let keyUpValues = e.target.value;
// // console.log(keyUpValues)
searchCards(keyUpValues);
if (keyUpValues) {
upcomingContainer.style.display = 'none';
} else {
upcomingContainer.style.display = 'block';
}
})다른 키보드 이벤트를 사용해보기도 했는데 결과는 똑같아서 결국 튜터님께 🚨sos를 청했고 아주 간단하게 해결되엇다ㅋㅋㅋ
바로 keydown 대신 input을 사용하면 된다는것..!!
👩🏻💻 수정한 코드
searchInput.addEventListener('input', (e) => {
let keyUpValues = e.target.value;
// // console.log(keyUpValues)
searchCards(keyUpValues);
if (keyUpValues) {
upcomingContainer.style.display = 'none';
} else {
upcomingContainer.style.display = 'block';
}
})딱 하나만 바꿨을 뿐인데 너무 스무스하게 잘 구현되었다...
따라서 수정이 일어날 때마다 이벤트를 실행하고 싶다면 >>> input 이벤트가 적절하다.
⭐️ 수정되자마자 발생하기 때문에 event.preventDefault()로 기본 동작을 막더라도 똑같이 이벤트가 발생한다. 따라서 event.preventDefault()를 써도 아무 효과가 없다!
02. change
change 이벤트: 요소 변경이 끝나면 발생한다
이 이벤트의 핵심은 요소 변경이 끝날 때가 아니라 포커스를 잃을 때 이벤트가 발생한다는 점이다.
👩🏻💻 예시1
<input type="text" onchange="alert(this.value)">
<input type="button" value="버튼">이렇게 코드를 작성하고 데이터를 입력해보면
입력하는 도중에는 아무런 이벤트가 발생하지 않지만 마우스를 떼거나 엔터를 치는 등의 포커스를 잃으면 아래 사진처럼 경고창이 뜬다.
👩🏻💻 예시2
<select onchange="alert(this.value)">
<option value="">선택하세요.</option>
<option value="1">옵션 1</option>
<option value="2">옵션 2</option>
<option value="3">옵션 3</option>
</select>다른 예시로 봐도 포인트는 똑같다.
이렇게 옵션을 선택하는 도중에는 아무 변화가 일어나지 않지만 선택하고 나면 (포커스를 잃으면)
요로코롬 이벤트가 발생한다!
03. cut, copy, paste
cut 이벤트: 값을 잘라낼 때 발생하는 이벤트copy 이벤트: 값을 복사할 때 발생하는 이벤트paste 이벤트: 값을 붙여넣기 때 발생하는 이벤트
이 이벤트들은 위에서 봤던 input 이벤트와 다르게 event.preventDefault()를 사용해 기본 동작을 막을 수 있다! 하지만 이렇게 하면 복사, 붙여넣기를 할 수 없다. (???ㅋㅋㅋㅋㅋ)
👩🏻💻 예시 코드
<input type="text" id="input">
<script>
input.oncut = input.oncopy = input.onpaste = function(event) {
alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
return false;
};
</script>잘라내기, 복사하기, 붙여넣기 동작을 시도하면 모든 동작들이 중단되면서 경고창을 통해 중단된 이벤트 이름을 보여주는 코드이다.
붙여넣기를 하면 위 사진같은 경고창이 뜨고
이렇게 잘라내기를 하면??
cut 으로 경고창이 뜬다.
검색창 관련한 이벤트를 부여할 때 항상 키보드이벤트나 keyCode 를 사용했는데 이벤 과제를 통해서 더 다양한 이벤트가 있다는 걸 알게되어서 재미있었다. 오늘 정리한 내용들을 바탕으로 다음 프로젝트에서 꼭 활용해보고 싶다!
출처
