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

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

---

ID 삭제에 대한 목록보기가 있습니다. 특정 클래스가있는 모든 요소에 리스너를 추가하고 확인 경고를 수행하고 싶습니다.

내 문제는 이것이 찾은 클래스가있는 첫 번째 요소에만 리스너를 추가하는 것 같습니다. 사용하려고했지만 querySelectorAll작동하지 않았습니다.

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

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

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

명부:

<?php 
    while($obj=$result->fetch_object())
    {
        echo '<li><a class="delete" href="removeTruck.php?tid='.$obj->id.'">'.$obj->id.'</a>'
            . '<a href="#" class="delete"></a>
                      </li>'."\n";
    }
    /* free result set */
    $result->close();       
    $mysqli->close();
?>

---

당신은 사용해야합니다 querySelectorAll. NodeList를 querySelector반환 하지만 처음 발견 된 요소 만 반환합니다.

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

그런 다음 반복합니다.

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

또한 경우에만 preventDefault해야합니다 confirm === false.

로 return false/true바인딩 된 이벤트 핸들러에만 유용 하다는 점도 주목할 가치가 onclick = function() {...}있습니다. 들어 addEventListening당신은 사용해야합니다 event.preventDefault().

데모 : http://jsfiddle.net/Rc7jL/3/

---

ES6 버전

for-loop 대신 Array.prototype.forEach 반복 을 사용하여 좀 더 깔끔하게 만들 수 있습니다 (그리고 더 안전한 루프 인 루프 현명한 ) :

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

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

_{위의 예 는 ES2015 표준의 Array.from 및 템플릿 문자열 을 사용합니다.}

---

querySelectorAll및 for루프 사용의 문제점 은 배열의 각 요소에 대해 완전히 새로운 이벤트 핸들러를 생성한다는 것 입니다.

때로는 그것이 정확히 당신이 원하는 것입니다. 그러나 요소가 많은 경우 단일 이벤트 핸들러를 만들어 컨테이너 요소에 연결하는 것이 더 효율적일 수 있습니다. 그런 다음을 사용 event.target하여 이벤트를 트리거 한 특정 요소를 참조 할 수 있습니다 .

document.body.addEventListener("click", function (event) {
  if (event.target.classList.contains("delete")) {
    var title = event.target.getAttribute("title");

    if (!confirm("sure u want to delete " + title)) {
      event.preventDefault();
    }
  }
});

In this example we only create one event handler which is attached to the body element. Whenever an element inside the body is clicked, the click event bubbles up to our event handler.

---

A short and sweet solution, using ES6:

document.querySelectorAll('.input')
      .forEach(input => input.addEventListener('focus', this.onInputFocus));

---

You have to use querySelectorAll as you need to select all elements with the said class, again since querySelectorAll is an array you need to iterate it and add the event handlers

var deleteLinks = document.querySelectorAll('.delete');
for (var i = 0; i < deleteLinks.length; i++) {
    deleteLinks[i].addEventListener('click', function (event) {
        event.preventDefault();

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

참고URL : https://stackoverflow.com/questions/21700364/adding-click-event-listener-to-elements-with-the-same-class