동적 증가 요소를 위한 이벤트 처리 프로그램 설정하기
10295 단어 JavaScripttech
하고 싶은 일
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에 업로드 .
Reference
이 문제에 관하여(동적 증가 요소를 위한 이벤트 처리 프로그램 설정하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/itsumoonazicode/articles/293be23e467fba텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)