Trình xử lý sự kiện Javascript – trình xử lý sự kiện các loại javascript

Hướng dẫn về Trình xử lý sự kiện Javascript. Ở đây chúng tôi thảo luận chi tiết về Ví dụ về Cách loại bỏ Trình xử lý sự kiện khỏi các Phần tử.

Bạn đang xem : loại trình xử lý sự kiện javascript

Trình xử lý sự kiện Javascript

Giới thiệu về Trình xử lý sự kiện Javascript

Trình xử lý sự kiện JavaScript là một phương thức trong JavaScript chờ một sự kiện diễn ra. Trình xử lý sự kiện, còn được gọi là Trình xử lý sự kiện, nơi chúng ta có thể chỉ định trình xử lý sự kiện cho các sự kiện cụ thể trên một phần tử cụ thể. Event Listener là một giao diện đại diện cho một đối tượng xử lý các sự kiện được gửi bởi Đối tượng sự kiện. Sự kiện là một phần quan trọng của JavaScript vì các trang web phản hồi dựa trên các sự kiện. Một số Sự kiện do người dùng tạo và một số sự kiện được tạo bởi các lệnh gọi API. Trong chủ đề này, chúng ta sẽ tìm hiểu về Trình xử lý sự kiện Javascript.

Cú pháp

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

element.addEventListener (sự kiện, trình nghe);

  • Các tham số “event” có thể được coi là bất kỳ sự kiện JavaScript hợp lệ nào.
  • Các sự kiện được sử dụng mà không có tiền tố “on” là “click” hoặc “mousehover.”
  • “Listener” là hàm xử lý phản hồi sự kiện đang xảy ra.
  • Trình xử lý sự kiện JavaScript được chia thành 2 loại, tức là,
  • Trình xử lý sự kiện tương tác và không tương tác,
  • Trình xử lý sự kiện tương tác phụ thuộc vào Tương tác của người dùng với trang HTML
  • Trình xử lý sự kiện không tương tác không phụ thuộc vào bất kỳ Tương tác nào của người dùng.

Ví dụ về Trình xử lý sự kiện Javascript

Hãy cho chúng tôi xem một vài ví dụ để hiểu thêm,

Ví dụ # 1

Trình xử lý sự kiện: nhấp vào

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; h2 & gt; Trình xử lý sự kiện JavaScript & lt; / h2 & gt;
& lt; h3 & gt; Sự kiện này sẽ hiển thị sự kiện 'nhấp chuột' của nút & lt; / h3 & gt;
& lt; button id = "btn" & gt; Nhấp vào đây! & lt; / button & gt;
& lt; script & gt;
document.getElementById ("btn"). addEventListener ("click", function () {
document.write ("& lt; p & gt; Xin chào, đây là trình xử lý sự kiện nhấp chuột trong JavaScript & lt; / p & gt;");
});
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Đầu ra của Trình xử lý sự kiện Javascript 1

Khi nhấp vào nút,

Bạn sẽ có thể xem thử nghiệm được in trên bảng điều khiển khi sử dụng trình xử lý sự kiện nhấp chuột.

Xem Thêm  Mã HTML cho bố cục 3 cột - mã 3 cột html

Ví dụ # 2

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; h2 & gt; Các trình xử lý sự kiện JavaScript khác nhau & lt; / h2 & gt;
& lt; h3 & gt; Sử dụng phương thức addEventListener () để thêm nhiều sự kiện cho một nút & lt; / h3 & gt;
& lt; button id = "btn" & gt; Hãy thử tôi! & lt; / button & gt;
& lt; p id = "sự kiện" & gt; & lt; / p & gt;
& lt; script & gt;
var x = document.getElementById ("btn");
x.addEventListener ("di chuột qua", mouseHoverFunction);
x.addEventListener ("nhấp chuột", onClickFunction);
x.addEventListener ("mouseout", mouseOutFunction);
function mouseHoverFunction () {
document.getElementById ("event"). innerHTML + = "Di chuột! & lt; br & gt;";
}
hàm onClickFunction () {
document.getElementById ("event"). innerHTML + = "Đã nhấp vào nút! & lt; br & gt;";
}
function mouseOutFunction () {
document.getElementById ("event"). innerHTML + = "Mouse Out! & lt; br & gt;";
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Đầu ra của Trình xử lý sự kiện Javascript 2

Ví dụ # 3

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; h2 & gt; Trình xử lý sự kiện JavaScript & lt; / h2 & gt;
& lt; p & gt; Sử dụng addEventListener () để thay đổi kích thước & lt; / p & gt;
& lt; p & gt; Thay đổi kích thước cửa sổ để trình xử lý sự kiện thay đổi kích thước sẽ được kích hoạt. & lt; / p & gt;
& lt; p id = "demo" & gt; & lt; / p & gt;
& lt; script & gt;
window.addEventListener ("thay đổi kích thước", function () {
document.write ("Cửa sổ đã được thay đổi kích thước" + Math.random ());
});
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Đầu ra 3 của Trình xử lý sự kiện Javascript

Khi thay đổi kích thước cửa sổ trình duyệt tại đây, văn bản với một số giá trị ngẫu nhiên sẽ được định hướng trên bảng điều khiển.

Ví dụ # 4

& lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; JavaScript Nhiều Trình xử lý Sự kiện & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; button id = "btn" & gt; Nhấp vào Tôi & lt; nút & gt;
& lt; script & gt;
function function1 () {
document.write ("Hàm 1 được thực thi !!");
}
function function2 () {
document.write ("Hàm 2 được thực thi vì Hàm 1 bị ghi đè !!");
}
var btnClick = document.getElementById ("btn");
btnClick.onclick = function1;
btnClick.onclick = function2;
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Đầu ra của Trình xử lý sự kiện Javascript 4

Khi nhấp vào nút, function2 sẽ được thực thi vì việc chỉ định trình xử lý sự kiện thứ hai sẽ ghi đè trình xử lý sự kiện đầu tiên.

Đây là một trong những hạn chế đối với Trình xử lý sự kiện JavaScript. Chỉ một trình xử lý sự kiện được chỉ định cho một sự kiện cụ thể trên một phần tử cụ thể.

Do đó, để giải quyết nhược điểm này, W3C đã giới thiệu một phương thức sự kiện linh hoạt được gọi là Trình xử lý sự kiện. Và đó là cách khái niệm này được giới thiệu trong JavaScript.

Nhiều trình xử lý Sự kiện có thể được chỉ định cho các phần tử HTML, gán nhiều chức năng cho cùng một sự kiện cho cùng một phần tử.

Xem Thêm  Thuộc tính kiểu đường viền CSS - đường viền thuộc tính kiểu html

Ví dụ # 5

& lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; JavaScript Nhiều Trình xử lý Sự kiện & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; button id = "btn" & gt; Nhấp vào Tôi & lt; nút & gt;
& lt; script & gt;
function function1 () {
alert ("Hàm 1 được thực thi !!");
}
function function2 () {
alert ("Hàm 2 cũng được thực thi !!");
}
var btnClick = document.getElementById ("btn");
btnClick.addEventListener ("nhấp chuột", function1);
btnClick.addEventListener ("nhấp chuột", function2);
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

output 5

Khi nhấp chuột,

Cả function1 và function2 đều được thực thi.

Ví dụ # 6

& lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Trình xử lý sự kiện JavaScript Di chuột và di chuột ra & lt; / title & gt;
& lt; h2 & gt; Di chuột và di chuột ra ngoài để thay đổi màu sắc & lt; / h2 & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; button id = "btn" & gt; Nhấp vào đây & lt; / button & gt;
& lt; script & gt;
var btnHover = document.getElementById ("btn");
function setHoverColor () {
btnHover.style.background = "cam";
}
function setNormalColor () {
btnHover.style.background = "";
}
btnHover.addEventListener ("di chuột qua", setHoverColor);
btnHover.addEventListener ("mouseout", setNormalColor);
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Khi di chuột,

Hãy để chúng tôi xem một số Người nghe sự kiện phổ biến,

  • Tải: khi tải trang
  • Nhấp: khi người dùng nhấp vào thứ gì đó trên trang
  • Di chuột qua: khi người dùng di chuột qua phần tử được chỉ định.
  • Tiêu điểm: khi người dùng đặt con trỏ vào các trường biểu mẫu
  • Làm mờ: khi người dùng rời con trỏ khỏi các trường biểu mẫu.

Chúng tôi sẽ xem cách xóa Trình xử lý sự kiện khỏi phần tử.

Ví dụ # 7

& lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; JavaScript Xóa Trình xử lý sự kiện & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; button id = "btn" & gt; Nhấp vào đây & lt; / button & gt;
& lt; script & gt;
function removeFunction () {
alert ("Chức năng sẽ bị xóa tại đây");
}
var btn = document.getElementById ("btn");
btn.addEventListener ("nhấp chuột", removeFunction);
btn.removeEventListener ("nhấp chuột", removeFunction);
& lt; / script & gt;
& lt; p & gt; & lt; strong & gt; Lưu ý: & lt; / strong & gt; Mặc dù bạn cố gắng nhấp vào nút, sẽ không có sự kiện nào được kích hoạt vì chúng tôi đã xóa sự kiện nhấp chuột bằng removeEventListener & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

output 7

Nhấp vào đây sẽ không hoạt động vì không có trình nghe sự kiện nào được chuyển đến nút.

Xem Thêm  JavaScript Split - Cách tách một chuỗi thành một mảng trong JS - javascript làm thế nào để tách một chuỗi

Kết luận

Với điều này, chúng ta có thể kết thúc chủ đề ‘Trình xử lý sự kiện JavaScript’. Chúng tôi đã thấy Trình xử lý sự kiện, còn được gọi là Trình xử lý sự kiện, để chỉ định các sự kiện cụ thể trên các phần tử. Cũng minh họa một vài ví dụ sẽ giúp bạn, mọi người, với những thực hành cần thiết. Chúng tôi đã thấy cách nhiều trình xử lý sự kiện có thể được xử lý với addEventListener với các phần tử HTML. Nó cũng minh họa một ví dụ về cách loại bỏ trình nghe sự kiện khỏi các phần tử. Tôi hy vọng hướng dẫn này sẽ giúp bạn hiểu rõ khái niệm này.

Các bài báo được đề xuất

Đây là hướng dẫn về Trình xử lý sự kiện Javascript. Ở đây chúng ta thảo luận về Ví dụ về Cách loại bỏ Trình xử lý sự kiện khỏi các Phần tử. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề trình xử lý sự kiện các loại javascript

[JavaScript] Xử lý sự kiện Event Handler

alt

  • Tác giả: Đặng Kim Thi
  • Ngày đăng: 2021-06-06
  • Đánh giá: 4 ⭐ ( 1874 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xử lý sự kiện trong JavaScript
    javascript event event handler

  • Tác giả: learning.gokisoft.com
  • Đánh giá: 4 ⭐ ( 1212 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xử lý sự kiện trong trang HTML với JavaScript

  • Tác giả: text.123docz.net
  • Đánh giá: 3 ⭐ ( 7913 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: – Tại 123doc thư viện tài liệu trực tuyến Việt Nam

Sự kiện (Event) trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 3671 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sự kiện (Event) trong JavaScript – Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Javascript, sự kiện, trình xử lý sự kiện và rò rỉ bộ nhớ

  • Tác giả: vncodeblog.com
  • Đánh giá: 4 ⭐ ( 2996 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Các sự kiện (Event) trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 5196 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các sự kiện trong javascript: Chúng ta có các sự kiện như click – ondbclick – onchange – onmouseover .. xem danh sách sự kiện event trong js tại đây

Bài 5: SỰ KIỆN TRONG JAVASCRIPT – MTVIet Website

  • Tác giả: mtviet.com
  • Đánh giá: 5 ⭐ ( 7495 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình