인프런 커뮤니티 질문&답변
작성한 질문수
[Event Delegation] 요소의 id를 변수 선언 없이 바로 사용할 수 있는 이유?
작성
·
255
·
수정됨
1
예시
<body>
<div id="buttons">
<button class="buttonClass">Click Me</button>
<button class="buttonClass">Click Me</button>
</div>
<script>
console.log(`buttons`, buttons);
</script>
</body>
Event Delegation 강의 약 8분 조금 지난 부분에서 궁금한 점이 있어 질문 드립니다!
이벤트 등록을 buttonList가 아닌 buttons라는 곳에 등록을 했음에도 버튼 이벤트가 잘 작동하더라구요.
선언하고 할당하지 않은 buttons라는 변수명?이 어떻게 id가 buttons인 div를 가리키는지 궁금합니다!
답변 1
4
https://jsdev.kr/t/getelementbyid-id-script-id/6764
이곳에서 같은 질문을 발견했습니다.
요약하자면 요소의 id 혹은 name은 window 객체의 property로 추가되기 때문이라고 합니다.
하지만 그대로 사용하는 건 다른 window 객체의 property와의 충돌 가능성이 있기에 지양해야 한다고 합니다. 😅
넵!
정확히는 id 값이 있을 경우 쿼리 셀렉터 처럼 특정 요소를 지정하지 않아도 해당 id 값으로 이벤트가 가능하다는 것입니다.
보통은 const button = document.querySelector(#buttons)
button.addEvent....
로 시작해서 이벤트를 등록하지만
만약 id 값이 있을 경우
buttons.addEvent...
처럼 해당 id 값을 변수처럼 이벤트를 등록할 수 있는데 이 이유는 요소의 id 값이 전역인 window의 속성으로 등록되기 때문이라는 것입니다.
지금 모바일로 적어서 엉망인데 견해가 전해졌으면 좋겠네요 ㅎㅎ
견해는 전해졌습니다. 그런데 이렇게 접근이 되면 나중에 충돌로 인한 에러가 많이 발생하지 않나??? 라는 생각이 들어서요.
이런 접근을 가능한 것은 이해가 갔는데 이유가 이해가 안 가서 찝찝한 기분이었습니다.
저도 강의에서 나온 건 이유는 알지 못하지만...ㅠㅠ (자동 완성 같은 게 있었을까요)
링크에서도 보듯이 일반적인 방법이 아니기도 하고 자바스크립트 혹은 브라우저 동작 원리 쪽에 가까운 이슈인 것 같습니다.
저도 깊게 파보진 않아서 원리는 모르지만... 요런 게 있다 정도로 봐주시면 좋을 것 같습니다 ㅎㅎ
div에 id = buttons를 준거에 addEventListener가 실행 된다는 것인가요?