동적 증가 요소를 위한 이벤트 처리 프로그램 설정하기

하고 싶은 일

querySelectorAll()에서 얻을 수 있는 요소가 동태적으로 증가하는 상황에서도 각각 이벤트 처리 프로그램을 설정하기를 원한다

어떻게 된 거야?

다음 코드에서 최초로 정의된 taskCompletedButtons는 다른 이벤트가 동적으로 생성된 단추 요소입니다.이외에도 새로 추가된 단추에 대해서도 활성 처리 프로그램을 설정하고 싶어 한다.
개선 전.js

const taskCompletedButtons = document.querySelectorAll('.btn-completed');
taskCompletedButtons.forEach((e) => {
    e.addEventListener('click', (j) => {
        if(j.target.className === 'Hello') {
            // なにか処理がはいります
        }
    });
});

해결책

활동 이전(Event Delegation)을 사용하여 대응 가능.
이것은 이벤트 처리 프로그램을 설정하고자 하는 요소 자체에 적용하지 않고 요소의 컨테이너에 적용한다는 것을 의미한다.
방금 게재된 코드에는 동적 증가 수량의 단추 자체에 대해 처리 프로그램이 설정되어 있습니다.이렇게 되면 추가된 단추가 순환 대상에 들어가지 않기 때문에 이벤트 처리 프로그램의 설정도 하지 않는다.
따라서 단추를 포함하는 요소(컨테이너)에 대해 이벤트 처리 프로그램을 설정합니다.
HTML은 이렇습니다.li 요소가 포함된 버튼 요소는 동적으로 증가합니다.

<ul id="container" class="list-group list-group-flush">
  <li class="list-group-item"><button class="btn btn-outline-primary">ボタン001</button></li>
  <li class="list-group-item"><button class="btn btn-outline-secondary">ボタン002</button></li>
  <li class="list-group-item"><button class="btn btn-outline-success">ボタン003</button></li>
</ul>

처음 불러온 코드를 다시 쓰고 동적 생성 단추도 이벤트 대상이 됩니다.
※ 버튼의 동적 생성 부분은 생략합니다.

const listRootElm = document.getElementById('container');
listRootElm.addEventListener('click', (e) => {
  console.log(e);
});

다시 쓴 코드에 console.log()를 넣어 보았습니다.동적 생성 요소를 클릭할 때 반응을 할 수 있는지 확인한다.그 전에 최초의 요소로 테스트를 진행한다.
먼저 ul 요소 바로 아래에 있는 li 요소를 클릭합니다.target란에서 확인할 수 있다li.list-group-item.

그런 다음 버튼 002를 클릭합니다.target란에 button.btn.btn-outline-secondary로 표시되어 클릭 요소를 지정했는지 확인할 수 있습니다.

그러면 동적 생성 버튼도 같은 클릭 요소를 확인할 수 있는지 확인한다.
3개의 버튼을 생성한 후 버튼 6을 클릭합니다.target의 값은 판별할 수 없으니 좀 더 자세히 말씀해 주세요.
innerText의 값입니다.버튼 6으로 표시되는지 확인합니다.이렇게 하면 동적 생성의 요소를 얻을 수 있다.

확인이 완료되었습니다.
결과적으로 순환을 기술하지 않아도 된다.
써보면 별 문제 없을 것 같은데 검색해보면 난이도가 갑자기 높아지니까 쓴 글입니다.
끝맺다

실제 작성된 코드

인증에 사용할 코드를 Codepen에 업로드 .