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 đó
Một sự kiện là một hành động xảy ra theo hướng dẫn của người dùng dưới dạng đầu vào và đưa ra phản hồi đầu ra. Chúng ta có thể xem xét các loại đầu vào khác nhau, chẳng hạn như nhấp chuột, nhấn nút và khi người dùng nhấn tab và hộp văn bản thay đổi. Trong Javascript, khi người dùng nhấn nút, nó sẽ hoạt động theo yêu cầu và cung cấp phản hồi cho người dùng ở dạng đầu ra. JavaScript triển khai một thành phần được gọi là trình xử lý sự kiện giúp bạn xác nhận một hành động nhất định đối với các sự kiện. Trình xử lý sự kiện là một phần mã có thể được coi là hàm JavaScript do người dùng xác định hoạt động khi một sự kiện cụ thể kích hoạt. Chúng ta có thể định nghĩa nó là đăng ký của một trình xử lý sự kiện và có thể coi nó như một trình xử lý sự kiện thực hiện và lắng nghe như một sự kiện và trả về kết quả
Chương trình sau đại học. Phát triển web đầy đủ ngăn xếp
hợp tác với Caltech CTME Đăng ký ngayCác loại JavaScript
Tại đây, chúng tôi có thể định nghĩa nhiều loại JavaScript khác nhau, có thể giúp các nhà phát triển ứng dụng phát triển logic thành các chức năng nhất định. Trước khi hiểu sâu hơn về các loại sự kiện Javascript, chúng ta cần tìm hiểu cách phân loại JavaScript bên dưới
- HTML5. Điều này xác định nhiều loại sự kiện, đặc biệt là sử dụng tập lệnh HTML và nhiều danh mục như "Gửi và nhập loại nút", các sự kiện như "tải trước" và "hashchange"
- Mô hình đối tượng trình duyệt [BOM]. Danh mục JavaScript này đến từ thông số W3. Các thiết bị màn hình cảm ứng sử dụng các sự kiện “touchstart”, “touchend” là những ví dụ hoàn hảo về BOM
- W3 DOM. Nó thực hiện các loại sự kiện DOM khác nhau cùng với các phần tử biểu mẫu
Người nghe sự kiện phổ biến
Sau đây là danh sách các định nghĩa của trình nghe JavaScript có các loại phương thức cụ thể
- Đang tải. Khi trang của bạn tải, nó sẽ hoạt động tương ứng
- Trong một cái nhấp chuột. Khi người dùng nhấp vào một nút hoặc đầu vào, nó sẽ xảy ra
- di chuột qua. Khi người dùng rê chuột vào nút
- Vào trọng tâm. Một số trường hợp khi người dùng giữ con trỏ trong trường biểu mẫu
- làm mờ. Nếu một trường biểu mẫu cụ thể rời khỏi nó
Dưới đây là các loại JavaScript với các ví dụ về cú pháp mã
Sự kiện và cú pháp Onclick
Chúng tôi có thể định nghĩa nó là một sự kiện chuột kích thích theo logic mã mà bạn xác định trong mã của mình. Đây là đoạn mã chúng ta có thể sử dụng
Mã số
chức năng Chào[] {
cảnh báo ['Xin chào thế giới. '];
}
Vui lòng bấm vào đây.
đầu ra
Cú pháp và sự kiện Onkeyup
Bạn có thể sử dụng sự kiện Javascript này trong trường hợp bạn nhấn một sự kiện bàn phím và sự kiện này hoạt động theo logic mã của bạn. Chúng ta có thể sử dụng đoạn mã dưới đây
Mã số
Enter your First name:
Tên tôi là.
hàm myKeyUpFunction[] {
đầu vào var = tài liệu. getElementById["tên"]. giá trị;
tài liệu. getElementById["Kiểm tra"]. bên trongHTML = đầu vào;
}
đầu ra
khóa học miễn phí. JavaScript cho người mới bắt đầu
Tìm hiểu kiến thức cơ bản về JavaScript Đăng ký ngayCú pháp và sự kiện Onmouseover
Chúng ta có thể sử dụng sự kiện này để di chuyển con trỏ chuột khi chúng ta đặt con trỏ và nó thực hiện theo logic của phần tử được kết nối và các phần tử con của nó. Chúng ta có thể sử dụng đoạn mã dưới đây
Mã số
Kiểm tra Di chuột qua tôi
tài liệu. getElementById["bản trình diễn"]. onmouseover = function[] {mouseOver[]};
hàm mouseOver[] {
tài liệu. getElementById["bản trình diễn"]. Phong cách. màu = "Tím";
}
đầu ra
Sự kiện di chuột
Khi bạn rời khỏi con trỏ chuột, nó sẽ di chuyển đến phần tử điều khiển sự kiện di chuột; một chức năng liên quan đến nó được thực thi. Đoạn mã dưới đây có thể giúp bạn hiểu logic
Mã số
Kiểm tra Di chuột qua tôi
tài liệu. getElementById["bản trình diễn"]. onmouseout = function[] {mouseOut[]};
hàm mouseOut[] {
tài liệu. getElementById["bản trình diễn"]. Phong cách. màu = "Đỏ";
}
đầu ra
Sự kiện và cú pháp Onchange
Sự kiện này xác định phương sai trong giá trị của bất kỳ phần tử nào liệt kê cho sự kiện này. Ví dụ tốt nhất về điều này là khi văn bản và danh sách thả xuống thay đổi sự kiện. Đoạn mã dưới đây có thể giúp bạn hiểu logic về cách nó chuyển đổi tên đầu vào thành chữ hoa khi văn bản thay đổi
Mã số
Please Enter name:
tài liệu. getElementById["Tên"]. onchange = function[] {myFunction[]};
hàm myFunction[] {
var x = tài liệu. getElementById["Tên"];
x. giá trị = x. giá trị. Đến trường hợp trên[];
}
đầu ra
Sau khi thay đổi sự kiện
Khóa học Full Stack Web Developer
Để trở thành chuyên gia về MEAN Stack Xem khóa họcOnload sự kiện và cú pháp
Sự kiện tải JavaScript có thể được sử dụng khi chúng tôi có yêu cầu cụ thể để thực thi một chức năng cụ thể sau khi trang được trình bày đầy đủ. Đoạn mã dưới đây có thể giúp bạn hiểu logic
Mã số
hàm checkyourCookies[] {
văn bản var = "";
nếu [hoa tiêu. cookieEnabled == true] {
text = "trang web của bạn Cookie đang hoạt động. “;
} khác {
text = "trang web của bạn Cookies không hoạt động. “;
}
tài liệu. getElementById["OnloadTest"]. bên trongHTML = văn bản;
}
đầu ra
Cú pháp và sự kiện Onfocus
Chức năng Javascript này thực hiện khi lệnh đã cho nhận được tiêu điểm theo sự kiện thay đổi hoặc nhấp chuột. Đoạn mã dưới đây có thể giúp bạn hiểu logic.
Mã số
Đây là kịch bản tốt nhất để sử dụng hàm addEventListener[] để đính kèm sự kiện "tiêu điểm" vào hộp thành phần đầu vào.
Enter your First name:
tài liệu. getElementById["Tên"]. addEventListener["tiêu điểm", myFunction];
hàm myFunction[] {
tài liệu. getElementById["Tên"]. Phong cách. backgroundColor = "Xanh tối";
}
đầu ra
Nhập văn bản tập trung
Cú pháp và sự kiện Onblur
Sự kiện Javascript Onblur này kích hoạt khi một đối tượng nhất định mất tiêu điểm. Chúng ta có thể thực thi đoạn mã dưới đây để hiểu cách triển khai nó
Mã số
Đoạn mã này sử dụng phương thức addEventListener[] và thực hiện sự kiện "làm mờ" thành phần tử đầu vào.
vui lòng viết gì đó và xem kết quả [làm mờ].
tài liệu. getElementById["tên"]. addEventListener["mờ", myFunction];
hàm myFunction[] {
alert["phần tử Input của bạn bị mất tiêu điểm. "];
}
đầu ra
Nâng cao sự nghiệp của bạn với tư cách là nhà phát triển MEAN stack với Nhà phát triển Web Full Stack - Chương trình Thạc sĩ MEAN Stack. đăng ký ngay bây giờ
Sự kết luận
Chúng tôi hy vọng bài viết này đã giúp bạn hiểu các sự kiện JavaScript. Trong bài viết này, chúng ta đã thảo luận về khái niệm cấu trúc mã của các loại sự kiện khác nhau sẽ hữu ích cho các nhà phát triển chuyên nghiệp từ Java và. nền mạng, kiến trúc ứng dụng và những người học khác đang tìm kiếm thông tin về các sự kiện JavaScript
Bên cạnh khóa học, bạn cũng có thể đăng ký trên , một sáng kiến Simplilearn của chúng tôi. Nền tảng này cung cấp nhiều khóa học trực tuyến miễn phí để trợ giúp về kiến thức cơ bản của nhiều ngôn ngữ lập trình, bao gồm cả JavaScript. Ngoài ra, bạn cũng có thể chọn tham gia Khóa học chứng chỉ phát triển web toàn bộ của chúng tôi
Tìm Chương trình đào tạo trực tuyến dành cho nhà phát triển Java Full Stack của chúng tôi tại các thành phố hàng đầu
NameDatePlaceNhóm nhà phát triển Java Full Stack bắt đầu vào ngày 5 tháng 1 năm 2023,Đợt cuối tuầnChi tiết CityView của bạnKhóa học dành cho nhà phát triển Java Full Stack ở SydneyNhóm bắt đầu vào ngày 6 tháng 1 năm 2023,
Các ngày trong tuần
Weekdays batchMelbourneView Details
Thông tin về các Tác giả
Simplilearn là một trong những nhà cung cấp dịch vụ đào tạo trực tuyến hàng đầu thế giới về Tiếp thị kỹ thuật số, Điện toán đám mây, Quản lý dự án, Khoa học dữ liệu, CNTT, Phát triển phần mềm và nhiều công nghệ mới nổi khác