728x90
자바스크립트로 HTML 요소 추가시 기존에 등록한 addEventListener 이벤트가 정상적으로 작동하지 않는다.
❓상황
자바스크립트로 HTML 요소를 innerHTML로 추가시 기존에 등록한 addEventListener 이벤트가 정상적으로 작동하지 않는 상황
🔎 원인 파악
오류가 아니라, innerHTML로 HTML 요소를 추가하면,
형제 노드와 하위 노드에 등록된 addEventListener가 없어진다고 한다.
[javascript] 자손의 이벤트 리스너를 파괴하지 않고 innerHTML에 추가 할 수 있습니까? - 리뷰나라
다음 예제 코드에서는 onclick“foo”라는 텍스트가 포함 된 범위에 이벤트 핸들러를 연결합니다 . 핸들러는 alert(). 그러나 부모 노드의에 할당하면 innerHTML이 onclick이벤트 핸들러가 파괴됩니다. “
daplus.net
✨ 해결 방법
innerHTML 대신 HTML 요소의 append 또는 appendChild 메서드를 사용하면, addEventListener가 파괴되지 않는다.
'공부 > 프론트엔드' 카테고리의 다른 글
| 공부 | Tailwindcss 더 잘 사용하기(class-variance-authority, tailwind-merge) (0) | 2024.04.24 |
|---|---|
| 공부 | CSR, SSR 그리고 Next.js (0) | 2023.07.05 |
| 공부 | HTML, CSS 말 줄임(단일 행, 다중 행) 스타일 정리 (0) | 2022.10.12 |
| 공부 | HTML, CSS 웹 접근성(스크린리더) 정리 (0) | 2022.10.11 |
| 공부 | Redux Toolkit 정리 (0) | 2022.08.12 |