javascript - 이벤트 바인딩을 수신하는 기본 JS를 사용하여 더 많은 로드된 태그를 바인딩하는 방법

Question

일부 프로젝트에서는 JS 템플릿을 사용하는데, 템플릿에 포함된 태그가 문자열이 정상적으로 실행되지 않는 html 태그입니다. 페이지 시작 부분에 로드된 태그에 대해 이벤트 바인딩을 수행한 후 나중에 로드되는 태그는 jQuery를 실행하지 않는 한 로드되지 않습니다. 이벤트 바인딩을 모니터링하고 구현하는 데 사용할 수 있는 것이 없습니다.
프로젝트에서는 jQuery, zetpo 등의 프레임워크를 사용할 수 없다고 규정하고 있어서 제목처럼 여쭤보고 싶습니다.

으아악

Answer 1

이벤트 위임, 가장 기본적인 코드는 다음과 같습니다!

으아악

문서는 다른 요소로 대체될 수 있으나, 대체된 요소는 처음부터 존재해야 합니다! 페이지가 로드된 후에는 동적으로 추가할 수 없습니다!

Answer 2

보통 이벤트 위임

Answer 3

이벤트 위임이 맞습니다. 직설적으로 말하면 DOM 이벤트 버블링을 사용합니다. @Waiting for You의 답변은 원리를 설명하고 기본적인 문제를 해결합니다. 그러나 실제 적용에는 여전히 몇 가지 제한 사항이 있습니다. 버블링 과정에서 발생하는 요소가 아닌 최종 클릭된 요소만 처리할 수 있습니다.

버블링 프로세스의 예를 작성했습니다: https://jsfiddle.net/4L7p5drb/1/

으아악