Tương tác của JavaScript với HTML được xử lý thông qua các sự kiện xảy ra khi người dùng hoặc trình duyệt thao tác trên trang
Khi trang tải, nó được gọi là một sự kiện. Khi người dùng nhấp vào một nút, lần nhấp đó cũng là một sự kiện. Các ví dụ khác bao gồm các sự kiện như nhấn phím bất kỳ, đóng cửa sổ, thay đổi kích thước cửa sổ, v.v.
Các nhà phát triển có thể sử dụng các sự kiện này để thực thi các phản hồi được mã hóa JavaScript, khiến các nút đóng cửa sổ, thông báo được hiển thị cho người dùng, dữ liệu được xác thực và hầu như bất kỳ loại phản hồi nào khác có thể tưởng tượng được
Sự kiện là một phần của Mô hình đối tượng tài liệu [DOM] Cấp 3 và mọi phần tử HTML đều chứa một tập hợp các sự kiện có thể kích hoạt Mã JavaScript
Vui lòng xem qua hướng dẫn nhỏ này để hiểu rõ hơn Tham khảo sự kiện HTML. Ở đây chúng ta sẽ thấy một vài ví dụ để hiểu mối quan hệ giữa Sự kiện và JavaScript -
title Loại sự kiện
Đây là loại sự kiện được sử dụng thường xuyên nhất xảy ra khi người dùng nhấp vào nút bên trái của chuột. Bạn có thể đặt xác nhận, cảnh báo, v.v. , đối với loại sự kiện này
Thí dụ
Hãy thử ví dụ sau
Click the following button and see result
đầu ra
onsubmit Loại sự kiện
onsubmit là sự kiện xảy ra khi bạn cố gắng gửi biểu mẫu. Bạn có thể đặt xác thực biểu mẫu của mình đối với loại sự kiện này
Thí dụ
Ví dụ sau đây cho thấy cách sử dụng onsubmit. Ở đây chúng tôi đang gọi một hàm validate[] trước khi gửi dữ liệu biểu mẫu tới máy chủ web. Nếu hàm validate[] trả về true thì form sẽ được gửi, ngược lại sẽ không gửi dữ liệu
Hãy thử ví dụ sau
.......
onmouseover và onmouseout
Hai loại sự kiện này sẽ giúp bạn tạo hiệu ứng đẹp mắt với hình ảnh hoặc thậm chí cả với văn bản. Sự kiện onmouseover kích hoạt khi bạn đưa chuột qua bất kỳ phần tử nào và onmouseout kích hoạt khi bạn di chuyển chuột ra khỏi phần tử đó. Hãy thử ví dụ sau
Bring your mouse inside the division to see the result:
This is inside the division
đầu ra
Sự kiện tiêu chuẩn HTML 5
Các sự kiện HTML 5 tiêu chuẩn được liệt kê ở đây để bạn tham khảo. Tập lệnh ở đây chỉ ra một chức năng Javascript sẽ được thực thi đối với sự kiện đó
Các sự kiện trong JavaScript cho phép các nhà phát triển lắng nghe các thay đổi trong tài liệu và xử lý chúng khi cần thiết. Ví dụ: bạn có thể nghe khi nhấp vào nút để mở phương thức. Một ví dụ khác là hiển thị nút "cuộn lên" khi người dùng cuộn nửa trang
Bài viết này giúp người mới bắt đầu hiểu Sự kiện trong JavaScript là gì và cách xử lý chúng
Tại sao nên sử dụng Sự kiện
Các trang web hiện đại đã phát triển để tương tác và phản ứng. Thay vì trình bày tất cả thông tin hoặc chức năng cùng một lúc, một số thông tin hoặc chức năng có thể được hiển thị cho người dùng dựa trên một hành động cụ thể được thực hiện. Ví dụ được đề cập trước đó trong bài viết minh họa điều này
Các sự kiện cũng hữu ích trong việc phát hiện các trạng thái khác nhau của trang web của bạn. Ví dụ: phát hiện khi màn hình được thay đổi kích thước có thể giúp đảm bảo khả năng phản hồi của một số thành phần trên trang
Danh sách các trường hợp sử dụng mà các sự kiện hữu ích là vô tận. Sự kiện là một phần thiết yếu của quá trình phát triển web bằng JavaScript và điều quan trọng là phải hiểu cách sử dụng chúng
Thêm trình xử lý sự kiện
Để lắng nghe các sự kiện, bạn có thể sử dụng phương thức addEventListener. Phương thức này khả dụng trên mọi Phần tử và Nút trong tài liệu
addEventListener
chấp nhận ba tham số. tham số đầu tiên là tên của sự kiện để lắng nghe;
Trong hầu hết các trường hợp, bạn chỉ cần sử dụng hai tham số đầu tiên. Đây là một ví dụ về việc xử lý sự kiện click
trên một nút
const button = document.querySelector["button"];
button.addEventListener["click", function [e] {
alert["Button clicked"];
}];
Điều này truy xuất nút đầu tiên trên trang và khi nút được nhấp, sẽ hiển thị cảnh báo
Một sự kiện có thể có nhiều hơn một trình xử lý không?
Cùng một sự kiện có thể có nhiều trình xử lý. Các trình xử lý được kích hoạt từng cái một khi sự kiện xảy ra
đối tượng sự kiện
Như bạn có thể thấy, hàm được truyền dưới dạng tham số thứ hai cho addEventListener
đã nhận đối số
document.querySelector["input"].addEventListener["change", function [e] {
alert[e.target.value];
}];
0. Đây là một đối tượng Sự kiện. Đối tượng này có thể có các thuộc tính khác nhau tùy thuộc vào loại cơ bản của nó. Tuy nhiên, nó có một số thuộc tính quan trọng phổ biếnMột thuộc tính được sử dụng thường xuyên trên đối tượng Sự kiện là thuộc tính
document.querySelector["input"].addEventListener["change", function [e] {
alert[e.target.value];
}];
1. Đây là yếu tố mà sự kiện đã được kích hoạt trên. Điều này có thể hữu ích khi bạn có cùng một trình xử lý cho nhiều phần tửVí dụ
document.querySelector["input"].addEventListener["change", function [e] {
alert[e.target.value];
}];
Đoạn mã này thêm một trình xử lý sự kiện vào phần tử
document.querySelector["input"].addEventListener["change", function [e] {
alert[e.target.value];
}];
2 đầu tiên trong sự kiện document.querySelector["input"].addEventListener["change", function [e] {
alert[e.target.value];
}];
3. Sự kiện document.querySelector["input"].addEventListener["change", function [e] {
alert[e.target.value];
}];
3 được kích hoạt khi bạn thay đổi giá trị của đầu vào, sau đó di chuyển tiêu điểm khỏi đầu vào [ví dụ: nhấp vào một thứ khác trên trang]Khi sự kiện
document.querySelector["input"].addEventListener["change", function [e] {
alert[e.target.value];
}];
3 xảy ra và trình xử lý được kích hoạt, giá trị của đầu vào được truy xuất bằng cách sử dụng document.querySelector["input"].addEventListener["change", function [e] {
alert[e.target.value];
}];
6 và được sử dụng trong cảnh báoNgăn chặn hành vi mặc định của sự kiện
Trong một số trường hợp, bạn muốn ngăn hành vi mặc định của một số sự kiện nhất định. Ví dụ: khi một liên kết được nhấp vào một trang, bạn có thể muốn hiển thị thông báo xác nhận trước khi người dùng thực sự được đưa đến một trang mới
Để ngăn hành vi mặc định của một sự kiện, bạn có thể sử dụng phương thức
document.querySelector["input"].addEventListener["change", function [e] {
alert[e.target.value];
}];
7 trên đối tượng Sự kiệnVí dụ
const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
Điều này thêm một trình xử lý sự kiện vào các sự kiện click
trên một liên kết có lớp
document.querySelector["input"].addEventListener["change", function [e] {
alert[e.target.value];
}];
9. Trong trình xử lý sự kiện, const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
0 được sử dụng để ngăn hành vi mở trang mặc định được chỉ định trong thuộc tính const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
1Sau đó, nó hiển thị cho người dùng một cửa sổ xác nhận và nếu người dùng nhấp vào Có trên cửa sổ xác nhận, thì nó sẽ mở trang như mong đợi
Ngăn chặn các trình xử lý khác xử lý sự kiện này
Như đã đề cập trước đó, một sự kiện có thể có nhiều trình xử lý. Tuy nhiên, trong một số trường hợp, bạn có thể muốn hủy các sự kiện khác khỏi việc xử lý sự kiện này. Ví dụ: nếu một yêu cầu được gửi đến máy chủ khi gửi biểu mẫu và bạn không muốn các trình xử lý sự kiện gửi biểu mẫu khác gửi thêm yêu cầu
Có hai phương pháp có thể được sử dụng để ngăn các trình xử lý khác xử lý cùng một sự kiện.
const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
2 và const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
3const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
2 được sử dụng để ngăn các trình xử lý sự kiện khác xử lý một sự kiện trong giai đoạn bong bóngBong bóng là khi bạn có cùng một sự kiện trên cả phần tử con và phần tử cha. Sự kiện sẽ được kích hoạt đầu tiên trên phần tử con, sau đó "được tạo bọt" cho phần tử cha
Trong trường hợp này,
const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
2 ngăn không cho sự kiện được kích hoạt trên phần tử cha nếu được gọi trong trình xử lý của phần tử con. Tuy nhiên, nó không ngăn sự kiện lan truyền đến các trình xử lý sự kiện khácĐể ngăn sự kiện được xử lý bởi các trình xử lý tiếp theo, bạn có thể sử dụng
const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
3Ví dụ
const button = document.querySelector["button"];
button.addEventListener["click", function [e] {
e.stopImmediatePropagation[];
alert["Hello!"];
}];
button.addEventListener["click", function [e] {
alert["Bye!"]
}]
Mặc dù nút có hai trình xử lý sự kiện lắng nghe sự kiện click
, nhưng chỉ có trình xử lý đầu tiên sẽ chạy vì nó gọi hàm
const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
3Sự khác biệt giữa preventDefault, stopPropagation và stopImmediatePropagation
const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
9 chỉ ngăn hành vi mặc định của sự kiện. Tuy nhiên, nó không ngăn các trình xử lý khác xử lý sự kiệnconst a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
2 và const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
3 chỉ ngăn những người xử lý khác xử lý sự kiện. Tuy nhiên, chúng không ngăn hành vi mặc định của sự kiệnNếu bạn muốn ngăn cả hành vi mặc định và các trình xử lý khác xử lý sự kiện, hãy sử dụng
const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
9 với const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
2 hoặc const a = document.querySelector["a.some-link"];
a.addEventListener["click", function [e] {
e.preventDefault[];
if[confirm["Are you sure?"]] {
window.location.href = e.target.href;
}
}];
3Xử lý sự kiện trên các phần tử động
Xem xét ví dụ sau
const buttons = document.querySelectorAll[".btn"];
buttons.forEach[[btn] => {
btn.addEventListener["click", function [e] {
alert["Hello!"];
}];
}]
//create new button
const button = document.createElement['button'];
button.classList.add['btn'];
button.textContent = "Bye";
document.body.append[button];
Trong ví dụ này, trước tiên bạn truy xuất tất cả các nút có lớp
const button = document.querySelector["button"];
button.addEventListener["click", function [e] {
e.stopImmediatePropagation[];
alert["Hello!"];
}];
button.addEventListener["click", function [e] {
alert["Bye!"]
}]
5. Sau đó, bạn lặp qua các nút này và thêm trình xử lý sự kiện chỉ hiển thị cảnh báo "Xin chào" khi nút được nhấpSau đó, bạn tự động tạo một nút mới, thêm lớp
const button = document.querySelector["button"];
button.addEventListener["click", function [e] {
e.stopImmediatePropagation[];
alert["Hello!"];
}];
button.addEventListener["click", function [e] {
alert["Bye!"]
}]
5 vào nút đó và thêm nó vào const button = document.querySelector["button"];
button.addEventListener["click", function [e] {
e.stopImmediatePropagation[];
alert["Hello!"];
}];
button.addEventListener["click", function [e] {
alert["Bye!"]
}]
7 của tài liệuNếu bạn thử nhấp vào các nút đã được thêm vào trong HTML của tài liệu hoặc đã được thêm vào trước khi thêm trình xử lý sự kiện, cảnh báo sẽ được hiển thị như mong đợi. Tuy nhiên, nếu bạn nhấp vào nút mới, sẽ không có cảnh báo nào được hiển thị
Điều này là do phần tử không phải là một phần của các phần tử được truy xuất bằng cách sử dụng
const button = document.querySelector["button"];
button.addEventListener["click", function [e] {
e.stopImmediatePropagation[];
alert["Hello!"];
}];
button.addEventListener["click", function [e] {
alert["Bye!"]
}]
8 vì nó không tồn tại vào thời điểm đóMặc dù đây là kết quả hợp lý, nhưng trong các trang web lớn hơn, bạn có thể không đính kèm trình xử lý sự kiện mỗi khi tạo phần tử mới hoặc bạn có thể muốn đảm bảo rằng trình xử lý sự kiện được thêm vào tất cả các phần tử, cho dù được tạo ban đầu hay động
Trong trường hợp đó, thay vì thêm trực tiếp trình xử lý sự kiện vào từng phần tử một cách riêng biệt, bạn có thể thêm trình xử lý sự kiện vào
const button = document.querySelector["button"];
button.addEventListener["click", function [e] {
e.stopImmediatePropagation[];
alert["Hello!"];
}];
button.addEventListener["click", function [e] {
alert["Bye!"]
}]
7 của tài liệu và sử dụng const buttons = document.querySelectorAll[".btn"];
buttons.forEach[[btn] => {
btn.addEventListener["click", function [e] {
alert["Hello!"];
}];
}]
//create new button
const button = document.createElement['button'];
button.classList.add['btn'];
button.textContent = "Bye";
document.body.append[button];
0 để kiểm tra xem phần tử được kích hoạt có khớp với một điều kiện cụ thể hay khôngVí dụ: bạn có thể chuyển đổi ví dụ trước thành ví dụ sau
document.body.addEventListener["click", function [e] {
if [e.target.classList.contains["btn"]] {
alert["Hello!"];
}
}]
//create new button
const button = document.createElement['button'];
button.classList.add['btn'];
button.textContent = "Bye";
document.body.append[button];
Bạn thêm một trình xử lý vào sự kiện click
trên
const button = document.querySelector["button"];
button.addEventListener["click", function [e] {
e.stopImmediatePropagation[];
alert["Hello!"];
}];
button.addEventListener["click", function [e] {
alert["Bye!"]
}]
7. Trong trình xử lý, bạn kiểm tra xem const buttons = document.querySelectorAll[".btn"];
buttons.forEach[[btn] => {
btn.addEventListener["click", function [e] {
alert["Hello!"];
}];
}]
//create new button
const button = document.createElement['button'];
button.classList.add['btn'];
button.textContent = "Bye";
document.body.append[button];
0 có lớp const button = document.querySelector["button"];
button.addEventListener["click", function [e] {
e.stopImmediatePropagation[];
alert["Hello!"];
}];
button.addEventListener["click", function [e] {
alert["Bye!"]
}]
5 hay không và chỉ thực hiện hành động cần thiết nếu cóBây giờ, khi bất kỳ phần tử nào có lớp
const button = document.querySelector["button"];
button.addEventListener["click", function [e] {
e.stopImmediatePropagation[];
alert["Hello!"];
}];
button.addEventListener["click", function [e] {
alert["Bye!"]
}]
5, dù được tạo động hay được tạo ban đầu, được nhấp vào, trình xử lý sự kiện sẽ chạy cho chúngTuy nhiên, cách tiếp cận này sẽ chạy trình xử lý sự kiện trên mọi sự kiện nhấp chuột trên phần thân. Vì vậy, điều quan trọng là phải xử lý nó dựa trên mục tiêu một cách cẩn thận
Xóa trình xử lý sự kiện
Trong một số trường hợp, bạn có thể muốn xóa trình xử lý sự kiện cho một phần tử. Để làm điều đó, bạn có thể sử dụng phương pháp
const buttons = document.querySelectorAll[".btn"];
buttons.forEach[[btn] => {
btn.addEventListener["click", function [e] {
alert["Hello!"];
}];
}]
//create new button
const button = document.createElement['button'];
button.classList.add['btn'];
button.textContent = "Bye";
document.body.append[button];
6. Phương thức này khả dụng trên mọi Phần tử và Nút trong tài liệuPhương pháp này nhận được các tham số tương tự addEventListener
nhận. Điều quan trọng là phải truyền chức năng giống như bạn đã truyền cho addEventListener
. Vì lý do đó, mọi người thường định nghĩa hàm riêng biệt, sau đó chuyển nó cho addEventListener
và
const buttons = document.querySelectorAll[".btn"];
buttons.forEach[[btn] => {
btn.addEventListener["click", function [e] {
alert["Hello!"];
}];
}]
//create new button
const button = document.createElement['button'];
button.classList.add['btn'];
button.textContent = "Bye";
document.body.append[button];
6Ví dụ
const button = document.querySelector["button"];
function handleClick [e] {
alert["Hello"];
}
button.addEventListener["click", handleClick];
//some time later
button.removeEventListener["click", handleClick];
Phần kết luận
Bài viết này vạch ra bề nổi của Sự kiện và giúp bạn hiểu rõ hơn về chúng. Để tìm hiểu thêm về Sự kiện trong JavaScript, hãy xem các tài nguyên sau