JavaScript에서 동일한 클래스를 가진 여러 요소에 클릭 이벤트 리스너를 어떻게 추가합니까?

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

특정 클래스의 모든 요소에 클릭 이벤트 리스너를 추가하려면 querySelector() 대신 querySelectorAll() 메서드를 사용할 수 있습니다. querySelector() 메서드는 일치하는 첫 번째 요소를 반환하고, querySelectorAll()은 일치하는 모든 요소의 NodeList를 반환합니다.

해결책:

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

이제 모든 삭제 링크의 NodeList를 통해 이를 반복하고 각 링크에 이벤트 리스너를 추가할 수 있습니다. one.

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();
        }
    });
}

이벤트 리스너에서 this 키워드를 사용하여 현재 요소를 참조할 수 있습니다. 이를 통해 요소의 제목 속성에 액세스하고 사용자에게 확인 메시지를 표시할 수 있습니다.

참고: event.preventDefault()를 사용하여 요소의 기본 작업을 방지하는 것이 중요합니다. 사용자가 삭제를 확인하면 링크가 발생하지 않습니다.

ES6 버전:

ES6에서는 forEach() 메서드를 사용하여 코드를 단순화할 수 있습니다.

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

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