[JS] addEventListener() : submit 엔터를 다른 버튼 클릭으로 인식해!!!!

구구절절

노마드코더 바닐라 JS로 크롬 앱 만들기 강의를 진행하다가 ,,,
등록한 todo-list에서 삭제 버튼을 누르면 해당 리스트(li)가 삭제가 되도록
버튼에 addEventListener("click", deleteTodo)를 등록했다.

그런데 엔터키를 누르자 todo-list가 등록되지 않고
다른 addEventLisenter의 click 이벤트로 인식해
자꾸 첫 번째 todo-list에서 deleteTodo()를 실행했다 ㅠㅠㅠ

혹시나 해서 event.type === "click"일 경우에만 삭제하도록 추가해봤는데 그대로였다 ㅠㅠ 

다음은 todo-list 등록 이벤트를 "submit"이 아닌 "keydown"으로 수정하고,
event.keyCode === 13 일 때만 실행하도록 했더니 input required 가 먹히지 않았다 ^^
그래서 빈칸인 채로 리스트에 등록이 되었고 ,,,,,

event.keyCode === 13 && input.value !== ""로 수정하게 되었다,,,,
이랬더니 작동은 되네?ㅎ

다음으로 바보같이 deleteTodo()에는 input.value !== ""라는 조건을 추가했다,,,
당연히 빈칸일 때는 클릭해도 삭제가 되지 않았고
점이라도 찍어야 삭제가 되네? 😤 
다시 원점으로 돌아갔다 ^^^^^

 

어쩌다 해결 

혹시나 해서 console에 이벤트가 발생할 때마다 event를 찍어봤더니,,,
click 이벤트는 화면상의 삭제 버튼 좌표가 뜨는데 
enter를 마우스 이벤트로 인식할 때는 좌표가 모두 0으로 나왔다.

그래서 그냥 좌표 중에 하나를 골라
삭제하기 전에 event.screenX !== 0 이라는 조건 확인을 추가했다 ^^^^
잘된다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎ

 

알게 된 결론

submit으로 엔터가 마우스 이벤트로 인식될 때는 좌표가 모두 0 이다. ^^^^^