[Event Delegation] 요소의 id를 변수 선언 없이 바로 사용할 수 있는 이유?
404
작성한 질문수 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
저도 강의에서 나온 건 이유는 알지 못하지만...ㅠㅠ (자동 완성 같은 게 있었을까요)
링크에서도 보듯이 일반적인 방법이 아니기도 하고 자바스크립트 혹은 브라우저 동작 원리 쪽에 가까운 이슈인 것 같습니다.
저도 깊게 파보진 않아서 원리는 모르지만... 요런 게 있다 정도로 봐주시면 좋을 것 같습니다 ㅎㅎ
존재하지 않는 일기 url입력 시 alert이 두 번 떠요
0
2
0
useState 직접 구현 부분에서 질문이 있습니다.
1
10
1
학습을 하고 블로그에 정리를 해도 괜찮을까요?
1
14
1
교재(3쇄)와 강의 내용 문의
0
25
2
섹션2번 부분 강의 화면이 잘 못된것 같아서 문의합니다.
0
23
1
call stack 표현이 잘못표현된것이 아닌가요?
0
58
2
React 와 Virtual DOM 의 이야기 영상 실행이 안됩니다.
0
34
1
일반 강의와 차이점?
1
53
1
!= 연산자의 역할
0
35
1
중요하진 않지만 설명하신부분에서 안된부분..
1
35
1
주석처리한 buttons가 작동하는 이유
0
102
1
document 객체가 콘솔에 화면처럼 뜨질않는데 무슨이유일까요?
0
147
1
vscode 에서 LiveSever를 통해 연 페이지에 왜 코드가 바로 연동이 되어 출력이 안될까요??
0
198
1
Start 버튼을 연속으로 두 번 누르면 Stop버튼이랑 Reset 버튼이 작동하지 않습니다.
0
123
1
Shallow Freeze 관련 질문드립니다!
0
212
1
var 로 선언해서 window 객체의 프로퍼티로 만들기
0
141
1
랜덤 난수의 정수화
0
189
1
섹션9 Todo App 질문드립니다.
0
203
1
강의 자료 소스 복사
0
317
1
Todo App(1) 스타일 파일 코드
0
453
2
변수를 먼저 let val; 선언하는 이유가 있나요?
0
236
1
[섹션2 Document Object 이용해보기] lists라는 변수를 forEach를 사용하려면...
0
192
1
해당 강의의 index.html 소스코드 파일을 받고 싶습니다!
0
251
1
얕은 복사가 주소만 복사하는 것 아닌가요?
0
502
1