Click, Enter 두 개의 이벤트 동시에 등록하기
form 내부의 button를 submit하면 클릭과 엔터가 동시에 입력된다. 이걸 이용해서 form 태그에 이벤트를 등록해, 클릭을 하든 엔터를 누르든 같은 이벤트로 취급할 수 있다.
undefined
index.html
index.js
고민지점
문자열 마지막 글자 추출하기
enter
키 누르면 입력되는 이벤트 등록하기하나의 요소에
click
과enter
두 개의 이벤트 동시에 등록하기영어단어 값 랜덤으로 가져오기
1. 문자열 마지막 글자 추출하기
방법이 여러가지가 있고, 전부 다 작동하는 걸 확인했다. 나는 가장 간단하고 익숙한 substr
함수를 사용했다.
1) 배열 인덱스
그런데 여기에 따르면 대괄호를 사용하는 건 지원 안되는 브라우저도 있어서 권장되지 않는다고 한다.
2) charAt [index]
가장 많이 쓰이고 가장 권장되는 방법이다.
3) 부분 문자열
4) slice()
5) substr()
2. enter
키 이벤트 등록
enter
키 이벤트 등록2.1. 키보드 이벤트
자바스크립트 키보드이벤트는 총 3가지가 있다.
이벤트명
발생하는 시점
값
keydown
키가 눌렸을 때
keycode
keypress
키가 눌린 상태일 때(연속적으로 실행됨.).
ASCII
keyup
키 누름이 해제될 때
keycode
keypress
이벤트는 ASCII 표에 없는shift
,Fn
,CapsLock
키는 인식하지 못한다.keyCode 를 확인할 수 있는 유용한 사이트
따라서 아래 두가지 방법 모두 사용가능하다. keyCode
와 화살표함수를 사용한 밑에 방법이 좀 더 맘에 든다.
처음에는 click
이벤트를 만들었을 떄 처럼 입력
button 태그에 이벤트를 등록해야 될거라고 생각했다. 안되는 게 당연하다. 사실 우리가 보통 로그인할 때를 생각해보면 아이디/비밀번호를 입력한다음에 엔터를 누른다.
즉, 키보드이벤트는 사용자로부터 입력받은 값을 keyCode
에 저장해서, 그게 enter의 키코드 값과 일치하는지 확인하는 것이기 때문에 input 태그
에 등록해야한다.
2.2. eventListener 목록
3. 복수의 이벤트 등록하기
일단 이 글을 보면 하나의 요소에 여러개의 이벤트리스너를 붙이는 건 상관없는 듯 하다.
그런데 이렇게 하면 각각의 이벤트에 똑같은 콜백함수를 두 번 써야돼서, 더 좋은 방법이 있을거라고 생각했다. 하나의 이벤트리스너에 논리연산자를 써서 두 가지 타입을 설정한다던지...
그런데 구글링을 해도 내가원하는 답을 찾기 쉽지 않았다. 그래서 아예 다른 방법을 찾았다. form태그에 이벤트를 등록하는 방법이다.
3.1. form 태그에 이벤트 등록하기
form 태그
내부의 button태그를 submit
하면 클릭과 엔터가 동시에 입력된다. 이걸 이용해서 form 태그에 이벤트를 등록하면 클릭을 하든 엔터를 누르든 같은 이벤트로 취급할 수 있다.
button submit 리로드 막기
대신, form 태그에 이벤트를 등록할 때 주의할 점이 있다.
form 태그는 기본적으로 submit
을 실행하고 나면 리로드가 되기 때문에 내부 함수가 실행되지 않는다. 그래서 콜백에서 e.preventDefauit()
를 써서 기본동작인 리로드를 막아줘야 한다.
4. addEventListener
vs onclick
addEventListener
vs onclick
자바스크립트를 공부하기 위해 보는 최신 강의들은 전부 이벤트리스너 방식으로 이벤트를 등록한다. 그런데 구글링을 하다보면 html의 onclick
속성을 이용해서 이벤트를 등록하는 방식의 글이 대부분이다.
스택오버플로우에도 이 주제에 대한 토론이 있는데, 둘 중의 하나가 최신이거나, 권장되거나 하지는 않는 것 같다.
한 요소에 복수의 이벤트를 등록하려면 addEventListener
를 사용해야하고, HTML에서 인라인으로 이벤트를 바로 넣고싶으면 onclick
을 사용하면 된다.
5. 참고
Last updated