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

같은 클래스의 여러 요소에 이벤트 리스너 추가

웹 개발에서는 다음을 사용하여 여러 요소에 이벤트 리스너를 추가해야 하는 경우가 많습니다. 같은 수업. 이는 JavaScript의 querySelectorAll() 메소드를 사용하여 달성할 수 있습니다.

초기 문제:

제공된 코드 조각은 "삭제"를 사용하여 모든 요소에 이벤트 리스너를 추가하려고 시도합니다. 수업. 그러나 의도된 동작은 해당 클래스가 있는 첫 번째 요소에만 리스너를 추가합니다.

해결책:

이 문제를 해결하려면 querySelector() 대신 querySelectorAll()을 사용하여 "삭제" 클래스가 있는 모든 요소를 ​​선택해야 합니다. querySelector()는 일치하는 첫 번째 요소만 반환하는 반면, querySelectorAll()은 일치하는 모든 요소가 포함된 NodeList를 반환합니다.

수정된 코드:

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

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

이 코드를 사용하면 이벤트 리스너가 성공적으로 완료됩니다. "삭제" 클래스를 사용하여 각 요소에 추가되었습니다.

기타 고려 사항:

• false/true 반환은 onclick = function() {...}과 바인딩된 이벤트 핸들러에만 유용하다는 점은 주목할 가치가 있습니다. addEventListening의 경우 event.preventDefault()를 사용해야 합니다.
• ES6의 Array.prototype.forEach 반복을 사용하면 위의 ES5 코드를 더 깔끔하고 안전하게 만들 수 있습니다.

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

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