동일한 클래스의 여러 요소에 클릭 이벤트 리스너를 추가하는 방법은 무엇입니까?

동일한 클래스의 요소에 클릭 이벤트 리스너 추가

이 시나리오에서는 ID 삭제를 위한 목록 보기가 있고 이를 추가하려고 합니다. 클래스가 "삭제"인 모든 요소에 대한 확인 경고입니다. 그런데 클래스의 첫 번째 요소만 리스너를 받는 것처럼 보이는 문제가 발생했습니다.

해결 방법

이를 해결하려면 querySelectorAll을 사용해야 합니다. 쿼리선택기 대신. querySelectorAll은 지정된 클래스가 있는 모든 요소를 ​​포함하는 NodeList를 반환합니다.

var deleteLink = document.querySelectorAll('.delete');

이제 NodeList를 반복하고 각 요소에 이벤트 리스너를 추가할 수 있습니다.

for (var i = 0; i < deleteLink.length; i++) {
    deleteLink[i].addEventListener('click', function(event) {
        if (!confirm("sure u want to delete " + this.title)) {
            event.preventDefault();
        }
    });
}

또한 사용자가 삭제를 확인하지 않는 경우의 기본 작업입니다. 이렇게 하면 사용자가 명시적으로 계속하기로 선택한 경우에만 삭제가 실행됩니다.

ES6 개선

ES6에서는 Array.prototype.forEach를 사용하여 루프를 단순화할 수 있습니다. :

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', event => {
        if (!confirm(`sure u want to delete ${this.title}`)) {
            event.preventDefault();
        }
    });
});

이 버전은 더 깔끔한 구문을 위해 템플릿 문자열(ES2015에 도입됨)을 활용합니다.

위 내용은 동일한 클래스의 여러 요소에 클릭 이벤트 리스너를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!