Tôi đã làm trống và chỉ định một chủ đề để chơi trong sự kiện keydown. Tôi muốn thêm một thanh tìm kiếm dẫn đến các trang khác nhau. Nhưng khi nhập văn bản bên trong thanh tìm kiếm, âm thanh của trống vẫn đang phát. Làm cách nào để xóa nó khỏi phần đó?
ghi bàn. 1
Nếu bạn đã thêm trình lắng nghe sự kiện keydown trên phần tử [tổ tiên] cấp trên, thì sự kiện keydown của đầu vào [thanh tìm kiếm] sẽ lan truyền lên cấp trên
Để xóa một event handler đã đăng ký trước đó bằng phương thức
1, bạn sử dụng phương thứcCode language: HTML, XML [xml]
Register
2 như sauCode language: HTML, XML [xml]
Register
Code language: CSS [css]
element.removeEventListener[type, handler];
Giả sử rằng bạn có một nút với lớp
3Code language: HTML, XML [xml]
Register
Code language: HTML, XML [xml]
Register
Phần sau định nghĩa trình xử lý sự kiện
0Code language: HTML, XML [xml]
Register
Code language: JavaScript [javascript]
function clickHandler[e] { console.log['Button Clicked']; }
Sau đây thêm một trình xử lý sự kiện vào sự kiện nhấp chuột của nút
Code language: JavaScript [javascript]
const btn = document.querySelector['.btn']; btn.addEventListener['click', clickHandler];
Để xóa trình xử lý sự kiện click khỏi sự kiện click của nút, bạn sử dụng phương thức
2 như sauCode language: HTML, XML [xml]
Register
Code language: JavaScript [javascript]
btn.removeEventListener['click', clickHandler];
Lưu ý rằng sự kiện và trình xử lý sự kiện phải giống nhau. Nếu bạn sử dụng chức năng ẩn danh làm trình xử lý sự kiện, bạn sẽ không thể xóa chức năng đó. Đoạn mã sau không hoạt động
Code language: JavaScript [javascript]
const btn = document.querySelector['.btn']; // add an event listner btn.addEventListener['click', function[e]{ console.log['Button Clicked']; }]; // this code won't work and has no effect btn.removeEventListener['click', function[] { console.log['Button Clicked']; }];
Hầu hết các trình duyệt web hiện đại bao gồm Chrome, Firefox và Edge đều hỗ trợ phương pháp
2Code language: HTML, XML [xml]
Register
IE8 không hỗ trợ phương thức
2. Nó sử dụng phương thứcCode language: HTML, XML [xml]
Register
4 để thay thế
Register
Code language: HTML, XML [xml]
Nếu bạn vẫn cần hỗ trợ IE8, bạn có thể sử dụng chức năng trợ giúp sau hoạt động trên các trình duyệt
Một sự kiện được định nghĩa là sự thay đổi trạng thái của một đối tượng. Có một số sự kiện trong HTML hiển thị khi người dùng hoặc trình duyệt thực hiện một hành động nhất định. JavaScript phản hồi những sự kiện này khi mã JavaScript được nhúng trong HTML và cho phép thực thi
Quá trình đáp ứng các sự kiện được gọi là xử lý sự kiện. Do đó, JavaScript sử dụng trình xử lý sự kiện để xử lý các sự kiện HTML
Trong bài viết này, chúng ta sẽ thảo luận về cách xóa trình xử lý sự kiện trong JavaScript. Ở đây, chúng tôi sử dụng phương thức removeEventListener[] để xóa một trình xử lý sự kiện khỏi một phần tử trong JavaScript
Sử dụng phương thức removeEventListener[]
Hàm tích hợp JavaScript removeEventListener[] xóa trình xử lý sự kiện khỏi phần tử cho sự kiện được kết nối. Chẳng hạn, bạn có thể sử dụng removeEventListener[] để loại bỏ trình xử lý sự kiện nhấp chuột nếu một nút bị tắt sau một lần nhấp
Ví dụ: nếu bạn đã tạo một sự kiện và có một số tương tác với sự kiện đó từ người dùng nhưng bạn muốn dừng sự kiện để phản ứng với người dùng sau một số trường hợp cụ thể, trong các loại tình huống đó, bạn có thể sử dụng phương thức removeEventListenert[]
cú pháp
Sau đây là cú pháp của phương thức removeEventListener[]
________số 8ví dụ 1
Xóa sự kiện nút
Trong ví dụ này, chúng tôi đã sử dụng hàm removeEventListener[] để xóa các sự kiện được gán cho các phần tử HTML. Trong trường hợp dưới đây, chúng tôi đã chỉ định một trình xử lý sự kiện cho phần tử nút và chúng tôi cũng đã tắt sự kiện để ngăn nhấp đúp vào nút từ người dùng
Sau khi nhấp vào nút, hộp cảnh báo sẽ bật lên
Sau khi nhấp vào nút OK, sự kiện sẽ bị xóa
ví dụ 2
Sau đây là một ví dụ khác về việc loại bỏ một sự kiện nút -
Remove an event handler
ví dụ 3
Xóa sự kiện di chuột qua
Trong ví dụ này, Chúng tôi đã chỉ định một sự kiện di chuột qua cho một phần tử. Người dùng bắt đầu di chuột vào phần tử đó và muốn dừng sự kiện. Vì vậy, chúng tôi đã triển khai removeEventListener[] trên phần tử nút để loại bỏ sự kiện di chuột
0Code language: HTML, XML [xml]
Register
Sau khi di chuột vào dòng chữ "Do hover on this text here", nó sẽ bắt đầu in như hình bên dưới bất cứ khi nào con chuột được di chuột
Bây giờ, nhấp vào nút "Nhấp vào tôi" để xóa sự kiện di chuột qua
ví dụ 3
Xóa sự kiện onmousemove
Trong ví dụ này, chúng tôi đã tạo một phần tử div và gán onmouseevent cho nó. Và đậu môn Toán. random[] vào phần tử div đó. Vì vậy, bất cứ khi nào con trỏ chuột di chuyển trong phần tử div cụ thể đó, kết quả là sẽ có một số số xuất hiện. Để ngăn biểu mẫu người dùng thực hiện việc này, chúng tôi đã tạo một nút và chuyển removeEventListenter cho nút đó. Vì vậy, bất cứ khi nào chúng tôi nhấp vào nút đó, nó sẽ ngừng hiển thị các số ngẫu nhiên