[Event Delegation] 요소의 id를 변수 선언 없이 바로 사용할 수 있는 이유?
394
작성한 질문수 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와의 충돌 가능성이 있기에 지양해야 한다고 합니다. 😅
0
넵!
정확히는 id 값이 있을 경우 쿼리 셀렉터 처럼 특정 요소를 지정하지 않아도 해당 id 값으로 이벤트가 가능하다는 것입니다.
보통은 const button = document.querySelector(#buttons)
button.addEvent....
로 시작해서 이벤트를 등록하지만
만약 id 값이 있을 경우
buttons.addEvent...
처럼 해당 id 값을 변수처럼 이벤트를 등록할 수 있는데 이 이유는 요소의 id 값이 전역인 window의 속성으로 등록되기 때문이라는 것입니다.
지금 모바일로 적어서 엉망인데 견해가 전해졌으면 좋겠네요 ㅎㅎ
0
견해는 전해졌습니다. 그런데 이렇게 접근이 되면 나중에 충돌로 인한 에러가 많이 발생하지 않나??? 라는 생각이 들어서요.
이런 접근을 가능한 것은 이해가 갔는데 이유가 이해가 안 가서 찝찝한 기분이었습니다.
0
저도 강의에서 나온 건 이유는 알지 못하지만...ㅠㅠ (자동 완성 같은 게 있었을까요)
링크에서도 보듯이 일반적인 방법이 아니기도 하고 자바스크립트 혹은 브라우저 동작 원리 쪽에 가까운 이슈인 것 같습니다.
저도 깊게 파보진 않아서 원리는 모르지만... 요런 게 있다 정도로 봐주시면 좋을 것 같습니다 ㅎㅎ
2강 nodejs 3단계 설명 질문
0
19
1
imagesLoaded에 관한 질문
0
15
2
useEffect와 lifecycle문의
0
22
2
프론트엔드 학습 수준 문의
0
31
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
46
2
최근 코테, 과제 테스트 트렌드
0
64
2
lucide react 아이콘 설치
0
38
2
17강 zustand store 서버에서 생성
1
31
1
문의관련 문의
0
37
2
next.js 를 2대이상 실행하는 경우 제공하는 cache 기능들은 어떻게 되나요?
0
48
2
주석처리한 buttons가 작동하는 이유
0
93
1
document 객체가 콘솔에 화면처럼 뜨질않는데 무슨이유일까요?
0
140
1
vscode 에서 LiveSever를 통해 연 페이지에 왜 코드가 바로 연동이 되어 출력이 안될까요??
0
169
1
Start 버튼을 연속으로 두 번 누르면 Stop버튼이랑 Reset 버튼이 작동하지 않습니다.
0
116
1
Shallow Freeze 관련 질문드립니다!
0
198
1
var 로 선언해서 window 객체의 프로퍼티로 만들기
0
137
1
랜덤 난수의 정수화
0
178
1
섹션9 Todo App 질문드립니다.
0
194
1
강의 자료 소스 복사
0
309
1
Todo App(1) 스타일 파일 코드
0
448
2
변수를 먼저 let val; 선언하는 이유가 있나요?
0
231
1
[섹션2 Document Object 이용해보기] lists라는 변수를 forEach를 사용하려면...
0
186
1
해당 강의의 index.html 소스코드 파일을 받고 싶습니다!
0
243
1
얕은 복사가 주소만 복사하는 것 아닌가요?
0
494
1