Hướng dẫn javascript delete button event listener - trình xử lý sự kiện nút xóa javascript

Question

Trong JavaScript của bạn, khi bạn khai báo

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

6 và

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

7, cả hai đều được gán cùng một yếu tố,

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

8. Yếu tố đó chứa toàn bộ danh sách. Đó không phải là những gì bạn muốn, bạn muốn xử lý các nhấp chuột trên các nút.

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

6 nên được gán cho phần tử nút Xóa của bạn và

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

7 của bạn cho phần tử nút hoàn chỉnh của bạn. Để làm điều này, chỉ cần sử dụng ID của các nút bạn muốn thay vì ID của UL.

Nội dung chính Show

Thông số
Giá trị trả về
Người nghe sự kiện phù hợp để loại bỏ
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Tôi có nên xóa người nghe sự kiện không?
Loại bỏ người nghe sự kiện trong JavaScript là gì?
AddEventListener có ghi đè không?
Tôi có thể sử dụng getEventlistener không?

Trong mã của bạn, thay đổi điều này:

var deleteButton = document.getElementById("todo");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("todo");
completeButton.addEventListener("click", completeListItem);

Với điều này:

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

Chỉnh sửa: Vì các nút của bạn không phải là duy nhất, bạn không nên sử dụng ID để thêm trình nghe sự kiện. Bạn nên sử dụng một lớp và gán trình nghe sự kiện cho tất cả các yếu tố với lớp bằng cách lặp lại đã ném chúng. Trong HTML của bạn, thêm một thuộc tính lớp vào các nút của bạn như thế này:

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

1. Sau đó xử lý các sự kiện theo cách này: Since your buttons are not unique you should not use an id to add the event listener. You should use a class and assign the event listener to all the elements with the class by looping threw them. In your html add a class attribute to your buttons like this:

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

1. Then handle the events this way:

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

Đầu tiên | tạo một nút

Đầu tiên, bạn sẽ phải tạo một nút.

let deleteHome = document.createElement("button")

Thứ 2 | SetAttribution

Đặt các thuộc tính cho nút mới được tạo để có thể xác định nó sau này.

deleteHome.setAttribute(‘id’, ‘delete-btn’)

Thứ 3 | Tên nút

Đặt cho nút một tên sẽ hiển thị trên trang web.

deleteHome.innerText = "delete listing"

4th | Thêm một người nghe sự kiện

Đặt nút Xóa trên đối tượng bạn đang xóa.
Thêm một trình nghe sự kiện có hai đối số, sự kiện mà bạn nghe và chức năng gọi lại.

deleteHome.addEventListener("click", function(event) {  
  if (event.target.id === 'delete-btn') {

5 | Tạo yêu cầu xóa

Tạo một câu lệnh có điều kiện bên trong trình nghe sự kiện gửi yêu cầu xóa nếu sự kiện được kích hoạt khi nhấp vào nút.

deleteHome.addEventListener("click", function(event) {
  if (event.target.id === 'delete-btn') {
  fetch(`http://localhost:3000/homes/${home.id}`, {
  method: "DELETE",
  headers: {
  "content-type": "application/json",
  accept: "application/json"
  }

Thứ 6 | cài lại

Để xóa hoàn toàn đối tượng, bạn phải trả về JSON đã chuyển đổi và xóa nó ra.

}).then(resp => resp.json())
  .then(() => {
  homeDiv.innerHTML = "";
  home.remove();

function renderHomes(home){let deleteHome = document.createElement("button")
  deleteHome.setAttribute('id', 'delete-btn')
  deleteHome.innerText = "delete listing"
  deleteHome.addEventListener("click", function(event) {    console.log("test222 home id ", homeDiv.id)
    if (event.target.id === 'delete-btn') {
  fetch(`http://localhost:3000/homes/${home.id}`, {
  method: "DELETE",
  headers: {
  "content-type": "application/json",
  accept: "application/json"
  }
  }).then(resp => resp.json())
  .then(() => {
  homeDiv.innerHTML = "";
  const home = homeDiv.querySelector(`[data-id='${homeDiv.id}']`);
  home.remove();
  })
    }
  })})

Phương thức

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

2 của giao diện

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

3 sẽ loại bỏ trình nghe sự kiện đã được đăng ký trước đó với

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

4 khỏi mục tiêu. Trình nghe sự kiện được xóa được xác định bằng cách sử dụng kết hợp loại sự kiện, chính chức năng người nghe sự kiện và các tùy chọn tùy chọn khác nhau có thể ảnh hưởng đến quá trình phù hợp; Xem người nghe sự kiện phù hợp để loại bỏ.
var deleteButtons = document.getElementsByClassName("Remove"); for (var i = 0; i < deleteButtons.length; i++) { deleteButtons[i].addEventListener('click', deleteListItem, false); } var completeButton = document.getElementsByClassName("Complete"); for (var i = 0; i < completeButton.length; i++) { completeButton[i].addEventListener('click', completeListItem, false); }
2 method of the

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

3 interface removes an event listener previously registered with

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

4 from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.

Gọi

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

2 với các đối số không xác định bất kỳ trình nghe sự kiện hiện đã đăng ký nào trên

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

3 không có hiệu lực.

Nếu người nghe sự kiện bị xóa khỏi

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

3 trong khi người nghe khác của mục tiêu đang xử lý một sự kiện, nó sẽ không được kích hoạt bởi sự kiện. Tuy nhiên, nó có thể được gắn lại.

CẢNH BÁO: Nếu người nghe được đăng ký hai lần, một người có bộ cờ chụp và một người không có, bạn phải xóa từng cái một cách riêng biệt. Việc loại bỏ người nghe bị bắt không ảnh hưởng đến phiên bản không bắt giữ của cùng một người nghe và ngược lại. If a listener is registered twice, one with the capture flag set and one without, you must remove each one separately. Removal of a capturing listener does not affect a non-capturing version of the same listener, and vice versa.

Người nghe sự kiện cũng có thể được xóa bằng cách chuyển

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

8 sang

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

9 và sau đó gọi

let deleteHome = document.createElement("button")

0 trên bộ điều khiển sở hữu tín hiệu.

Cú pháp

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

0

Thông số

let deleteHome = document.createElement("button")

1

Một chuỗi chỉ định loại sự kiện để xóa trình nghe sự kiện.

let deleteHome = document.createElement("button")

2

Chức năng người nghe sự kiện của trình xử lý sự kiện để xóa khỏi mục tiêu sự kiện.

let deleteHome = document.createElement("button")

3 Tùy chọnOptional

Một đối tượng tùy chọn chỉ định các đặc điểm về trình nghe sự kiện.

Các tùy chọn có sẵn là:

```
let deleteHome = document.createElement("button")
```
4: Một giá trị boolean chỉ định xem người nghe sự kiện được xóa có được đăng ký dưới dạng người nghe bị bắt hay không. Nếu tham số này không có, giá trị mặc định
```
let deleteHome = document.createElement("button")
```
5 được giả định.

let deleteHome = document.createElement("button")

6 Tùy chọnOptional

Một giá trị boolean chỉ định xem người nghe sự kiện được xóa có được đăng ký dưới dạng người nghe bị bắt hay không. Nếu tham số này không có, giá trị mặc định

let deleteHome = document.createElement("button")

5 được giả định.

Giá trị trả về

None.

Người nghe sự kiện phù hợp để loại bỏ

Đưa ra một người nghe sự kiện được thêm trước đó bằng cách gọi

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

9, cuối cùng bạn có thể đến một điểm mà bạn cần phải xóa nó. Rõ ràng, bạn cần chỉ định cùng các tham số

let deleteHome = document.createElement("button")

1 và

let deleteHome = document.createElement("button")

2 thành

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

2. Nhưng những gì về các tham số

let deleteHome = document.createElement("button")

3 hoặc

let deleteHome = document.createElement("button")

6?

Mặc dù

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

9 sẽ cho phép bạn thêm cùng một trình nghe nhiều lần cho cùng một loại nếu các tùy chọn là khác nhau, tùy chọn duy nhất

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

2 kiểm tra là cờ ________ 34/________ 36. Giá trị của nó phải khớp với

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

2 để khớp, nhưng các giá trị khác thì không.

Ví dụ, hãy xem xét cuộc gọi này đến

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

9:

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

1

Bây giờ hãy xem xét mỗi trong hai cuộc gọi này đến

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

2:

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

2

Cuộc gọi đầu tiên không thành công vì giá trị của

let deleteHome = document.createElement("button")

6 không khớp. Thứ hai thành công, kể từ

let deleteHome = document.createElement("button")

6 phù hợp.

Bây giờ hãy xem xét điều này:

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

3

Ở đây, chúng tôi chỉ định một đối tượng

let deleteHome = document.createElement("button")

3 trong đó

deleteHome.innerText = "delete listing"

4 được đặt thành

deleteHome.innerText = "delete listing"

5, trong khi các tùy chọn khác được để lại giá trị mặc định là

let deleteHome = document.createElement("button")

5.

Bây giờ hãy nhìn vào từng cuộc gọi này đến

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

2 lần lượt. Bất kỳ trong số họ trong đó

let deleteHome = document.createElement("button")

4 hoặc

let deleteHome = document.createElement("button")

6 là

deleteHome.innerText = "delete listing"

5 thất bại; Tất cả những người khác thành công.

Chỉ cài đặt

let deleteHome = document.createElement("button")

4 quan trọng đến

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

2.

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

4

Điều đáng chú ý là một số bản phát hành trình duyệt đã không phù hợp với điều này và trừ khi bạn có lý do cụ thể nếu không, có lẽ nên sử dụng các giá trị tương tự được sử dụng cho cuộc gọi đến

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

9 khi gọi

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

2.

Thí dụ

Ví dụ này cho thấy cách thêm trình nghe sự kiện dựa trên ________ 65 loại bỏ trình nghe sự kiện dựa trên ________ 66.

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

5

Thông số kỹ thuật

Sự chỉ rõ
DOM Standard # ref-for-dom-eventtarget-reMoveEventListener② # ref-for-dom-eventtarget-removeeventlistener②

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Tôi có nên xóa người nghe sự kiện không?

Người nghe sự kiện cần phải được gỡ bỏ vì lý do sau.Tránh rò rỉ bộ nhớ, nếu trình duyệt không được xử lý đúng cách.Các trình duyệt hiện đại sẽ thu thập rác thu thập các trình xử lý sự kiện của các yếu tố DOM bị loại bỏ nhưng nó không đúng trong các trường hợp duyệt web di sản như IE sẽ tạo ra rò rỉ bộ nhớ.Avoid memory leaks, if the browser is not handled it properly. Modern browsers will garbage collect event handlers of removed DOM elements but it is not true in cases of legacy browses like IE which will create memory leaks.

Loại bỏ người nghe sự kiện trong JavaScript là gì?

removeEventListener () Phương thức removeEventListener () của giao diện EventTarget sẽ loại bỏ trình nghe sự kiện đã đăng ký trước đó với eventTarget.AdDeventListener () khỏi mục tiêu.removes an event listener previously registered with EventTarget. addEventListener() from the target.

AddEventListener có ghi đè không?

Lưu ý: Phương thức addEventListener () có thể có nhiều trình xử lý sự kiện được áp dụng cho cùng một phần tử.Nó không ghi đè lên các trình xử lý sự kiện khác.It doesn't overwrite other event handlers.

Tôi có thể sử dụng getEventlistener không?

GetEventListeners (OBJ) chỉ là một tính năng công cụ dòng lệnh cụ thể của Google Chrome.Điều này có nghĩa là bạn chỉ có thể sử dụng tính năng này bên trong các công cụ Chrome Dev khi nhập thủ công vào bảng điều khiển.Bạn không thể sử dụng phương thức này trong mã nguồn JavaScript thực tế của bạn.you can only use this feature inside Chrome Dev Tools when manually typing into the console. You cannot use this method in your actual JavaScript source code.

programming javascript Does addEventListener overwrite? Remove event listener Remove click event Remove handler Delete button javascript

Hướng dẫn javascript delete button event listener - trình xử lý sự kiện nút xóa javascript

Cú pháp

Thông số

Giá trị trả về

Người nghe sự kiện phù hợp để loại bỏ

Thí dụ

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

Tôi có nên xóa người nghe sự kiện không?

Loại bỏ người nghe sự kiện trong JavaScript là gì?

AddEventListener có ghi đè không?

Tôi có thể sử dụng getEventlistener không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội