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

공통 클래스가 있는 요소에 대한 이벤트 처리

웹 애플리케이션에서는 동일한 클래스가 있는 여러 요소에 이벤트 리스너를 추가하는 것이 일반적인 작업일 수 있습니다. 이를 통해 삭제 확인 프롬프트와 같은 유사한 요소 전반에 걸쳐 표준화된 동작이 가능합니다.

querySelector를 사용한 초기 접근 방식

클래스가 있는 모든 요소에 클릭 이벤트 리스너를 추가하는 것을 목표로 하는 다음 JavaScript 코드를 고려해보세요. "delete":

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

deleteLink.addEventListener('click', function(event) {
    event.preventDefault();

    var choice = confirm("sure u want to delete?");
    if (choice) {
        return true;
    }
});

이 코드는 "delete" 클래스를 사용하여 한 요소에 대한 이벤트 리스너를 초기화하지만 이러한 모든 요소에 대한 리스너를 등록하는 데 실패합니다. 이 제한은 일치하는 첫 번째 요소만 반환하는 querySelector의 사용으로 인해 발생합니다.

querySelectorAll을 사용한 솔루션

여러 요소를 수신하는 이벤트를 확장하려면 querySelectorAll을 사용해야 합니다. 이 메소드는 지정된 클래스의 모든 요소를 ​​포함하는 NodeList 객체를 반환합니다. 다음 코드 조각은 이를 보여줍니다.

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

이벤트 리스너 반복 및 추가

NodeList를 사용하면 이제 해당 요소를 반복하고 이벤트 리스너를 개별적으로 추가할 수 있습니다.

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

이벤트 예방 처리

한 가지 조정은 확인이 거짓인 경우에만 기본 동작을 방지하는 것입니다. 이전에는 true를 반환하는 것이 사용되었지만 이벤트 리스너의 맥락에서는 event.preventDefault()가 적절한 접근 방식입니다.

데모 및 확장 옵션

이 솔루션의 작동 데모는 다음에서 찾을 수 있습니다. : http://jsfiddle.net/Rc7jL/3/.

또한 향상된 코드 가독성을 위해 Array.prototype.forEach 반복 및 템플릿 문자열을 활용하는 ES6 버전이 있다는 점에 유의하세요.

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