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

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

특정 클래스의 모든 요소에 클릭 이벤트 리스너를 추가하려면 다음을 수행하세요. querySelector() 대신 querySelectorAll()을 사용하세요. 일치하는 모든 요소를 ​​검색합니다.

JavaScript 코드:

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

이 코드에서는:

• var deleteLinks = document .querySelectorAll('.delete'); 클래스가 있는 모든 요소를 ​​검색합니다. "삭제".
• 다음 for 루프는 요소 목록을 반복합니다.
• 각 요소에 대해 클릭을 수신하기 위해 이벤트 리스너가 추가됩니다. 이벤트.
• 확인("삭제하시겠습니까?" this.title) 함수는 false를 반환하며, event.preventDefault() 호출은 클릭 이벤트의 기본 동작(예: 양식 제출)을 방지합니다.

추가 참고:

• querySelector()만 단일 요소를 반환하고 querySelectorAll()은 NodeList를 반환한다는 점에 주목할 가치가 있습니다.
• 사용 event.preventDefault()는 addEventListener()를 사용할 때 양식 제출이나 기타 기본 작업을 방지하는 데 적합합니다.

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