MDN은 addEventListener() 메서드를 "지정된 이벤트가 대상(target)에 전달될 때마다 호출되는 함수"라고 설명합니다. 코드가 정상적으로 작동하려면 먼저 해당 대상에 접근할 수 있어야 합니다.
일반적인 대상으로는 Element, Document, Window 그리고 XMLHttpRequest처럼 이벤트를 지원하는 모든 객체가 있습니다. 이 글에서는 특정 이벤트의 대상으로 지정할 수 있도록 요소(element)에 접근하는 방법을 다룹니다.
그런데 요소의 ID, 클래스 또는 name 속성에 하이픈(-)이 포함되어 있으면, 이벤트 리스너를 추가하려는 순간 JavaScript에서 오류가 발생합니다. JavaScript는 하이픈(–)을 빼기 기호로 해석하기 때문입니다. 이 글에서는 요소 이름에 포함된 하이픈으로 인해 발생하는 JavaScript 오류를 해결하는 두 가지 방법을 소개합니다.
해결 방법: 하이픈으로 인한 JavaScript 오류 처리하기
JavaScript가 하이픈을 빼기 기호로 잘못 해석하지 않도록 하려면, 문자열을 인자로 받는 다른 방식으로 해당 노드를 선택해야 합니다.
querySelector() 사용하기
JavaScript의 querySelector()는 문자열을 인자로 받으며, 이 문자열에는 하이픈이 포함될 수 있습니다. 값이 문자열로 처리되기 때문에 JavaScript가 하이픈을 빼기 기호로 해석하지 않습니다. MDN에 따르면 Document 메서드인 querySelector()는 지정된 셀렉터 또는 셀렉터 그룹과 일치하는 문서 내 첫 번째 Element를 반환하며, 일치하는 요소가 없으면 null을 반환합니다.
ID 셀렉터를 사용하면 특정 ID를 가진 요소를 선택할 수 있습니다. 예를 들어 e.target.new-task-description 대신 e.target.querySelector('#new-task-description')을 사용하면 됩니다.
마찬가지로 클래스 셀렉터를 사용해 특정 클래스를 가진 요소도 선택할 수 있습니다. 예: e.target.querySelector('.new-task-description')
노드 이름 변경하기
권장되지는 않지만 실제로 작동하는 편법도 있습니다. ID나 클래스 이름에서 하이픈을 언더스코어(_)로 바꾸거나, 노드를 참조하는 모든 코드에서 하이픈을 제거하는 것입니다. 예를 들어 e.target.new_task_description.value 또는 e.target.newtaskdescription.value처럼 작성할 수 있습니다.
두 가지 방법 중 어떤 것을 사용해도 오류는 해결되지만, 더 깔끔하고 우아한 방식인 querySelector 사용이 권장됩니다.
변수 생성 시도
또 다른 방법으로 taskInput이라는 변수를 만들고 여기에 노드를 할당한 뒤, 이 변수를 target에 체이닝하는 방식을 시도해 보았습니다. 예를 들어 newTextInput = document.getElementById("new-task-description")처럼 말입니다. 하지만 DOM에서 직접 테스트한 결과 JavaScript는 제가 기대한 대로 동작하지 않았습니다.
시도해 볼 수 있는 다른 메서드들
getElementByID() 메서드를 체이닝했을 때(e.target.getElementByID('new-task-description')) JavaScript에서 오류가 발생했습니다. 제가 놓친 문법 오류가 있었을 가능성도 있습니다.
만약 문법 오류가 아니었다면, 이론상 getElementByClassName() 메서드를 체이닝하는 것 역시 작동하지 않는다는 의미입니다.
요소의 종류에 따라 아직 시도하지 않은 다른 메서드들도 확인해 볼 만합니다.
document.getElementsByTagName() 메서드를 사용하면 특정 HTML 태그를 가진 모든 요소를 선택할 수 있습니다:
getElementsByTagName('li')
또한 document.getElementsByName() 메서드를 사용하면 특정 name 속성을 가진 모든 요소를 선택할 수 있습니다:
getElementsByName('new-task')
테스트와 학습 과정
저는 Flatiron School의 소프트웨어 엔지니어링 플렉스 프로그램에 등록해 여러 실습(lab)을 진행하고 있습니다. JavaScript가 왜 오류를 발생시키는지 원인을 파악하는 데 도움이 되는 글을 찾을 수 없어서 이 글을 쓰게 되었습니다.
다행히 Flatiron School에는 기술 코치들이 있었고, 그들의 도움으로 오류의 원인이 JavaScript가 하이픈을 빼기 기호로 해석했기 때문임을 알 수 있었습니다. 당시 제 문법 자체는 올바랐기 때문에, 코치의 도움이 없었다면 절대 짐작하기 어려웠을 것입니다. 기술 코치 없이 혼자 JavaScript를 배우는 분들에게 이 글이 도움이 되기를 바랍니다. 즐거운 코딩 되세요!