Hướng dẫn JS

JS TRANG CHỦ Giới thiệu JS JS Đến đâu Đầu ra JS Tuyên bố JS Cú pháp JS Bình luận JS Biến JS JS Hãy JS Const Toán tử JS Số học JS Chuyển nhượng JS Các loại dữ liệu JS Các hàm JS Đối tượng JS Sự kiện JS Chuỗi JS Phương thức chuỗi JS Tìm kiếm chuỗi JS Mẫu chuỗi JS Số JS Phương thức số JS Mảng JS Phương thức mảng JS Sắp xếp mảng JS Lặp lại mảng JS JS Array Const JS ngày Định dạng ngày JS Ngày lấy phương thức JS Phương pháp đặt ngày JS Toán JS JS ngẫu nhiên JS Booleans So sánh JS Điều kiện JS Chuyển đổi JS JS Loop cho JS Loop For In JS Loop For Of JS lặp trong khi JS Break JS lặp lại Bộ JS Bản đồ JS JS Typeof Chuyển đổi loại JS JS Bitwise JS RegExp Lỗi JS Phạm vi JS JS Hoists Chế độ nghiêm ngặt JS JS từ khóa này Hàm mũi tên JS Lớp JS JS JSON Gỡ lỗi JS Hướng dẫn kiểu JS Các phương pháp hay nhất về JS JS sai lầm Hiệu suất JS JS dành riêng từ

Phiên bản JS

Phiên bản JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Lịch sử JS

Đối tượng JS

Định nghĩa đối tượng Thuộc tính đối tượng Phương thức đối tượng Hiển thị đối tượng Người truy cập đối tượng Trình tạo đối tượng Nguyên mẫu đối tượng Đối tượng lặp lại Bộ đối tượng Bản đồ đối tượng Tham chiếu đối tượng

Các hàm JS

Định nghĩa hàm Tham số chức năng Lời mời hàm Gọi hàm Áp dụng chức năng Chức năng đóng cửa

Lớp JS

Giới thiệu Lớp học Kế thừa giai cấp Lớp tĩnh

JS Async

Gọi lại JS JS không đồng bộ JS hứa JS Async / Await

JS HTML DOM

Giới thiệu DOM Phương thức DOM Tài liệu DOM Phần tử DOM DOM HTML Các biểu mẫu DOM DOM CSS Hoạt ảnh DOM Sự kiện DOM Trình xử lý sự kiện DOM Điều hướng DOM Nút DOM Bộ sưu tập DOM Danh sách nút DOM

BOM trình duyệt JS

Cửa sổ JS Màn hình JS Vị trí JS Lịch sử JS JS Navigator JS Popup Alert Thời gian JS JS Cookies

API web JS

Giới thiệu API Web API biểu mẫu web API lịch sử web API lưu trữ web API công nhân web API tìm nạp web API vị trí địa lý web

JS AJAX

Giới thiệu về AJAX AJAX XMLHttp Yêu cầu AJAX Phản hồi AJAX Tệp XML AJAX AJAX PHP AJAX ASP Cơ sở dữ liệu AJAX Ứng dụng AJAX Ví dụ về AJAX

JS JSON

Giới thiệu JSON Cú pháp JSON JSON so với XML Các loại dữ liệu JSON Phân tích cú pháp JSON JSON Stringify Đối tượng JSON Mảng JSON Máy chủ JSON JSON PHP HTML JSON JSON JSONP

JS so với jQuery

Bộ chọn jQuery jQuery HTML jQuery CSS jQuery DOM

Đồ họa JS

Đồ họa JS JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

Ví dụ về JS

Ví dụ về JS JS HTML DOM Đầu vào HTML JS Đối tượng HTML JS Sự kiện HTML JS Trình duyệt JS Trình chỉnh sửa JS Bài tập JS JS Quiz Chứng chỉ JS

Tham khảo JS

Đối tượng JavaScript Đối tượng DOM HTML


Sự kiện JavaScript


Sự kiện HTML là "những thứ" xảy ra với các phần tử HTML.

Khi JavaScript được sử dụng trong các trang HTML, JavaScript có thể "phản ứng" trên các sự kiện này.


Sự kiện HTML

Một sự kiện HTML có thể là một cái gì đó mà trình duyệt làm hoặc một cái gì đó người dùng làm.

Dưới đây là một số ví dụ về các sự kiện HTML:

  • Một trang web HTML đã tải xong
  • Một trường đầu vào HTML đã được thay đổi
  • Một nút HTML đã được nhấp vào

Thông thường, khi các sự kiện xảy ra, bạn có thể muốn làm điều gì đó.

JavaScript cho phép bạn thực thi mã khi các sự kiện được phát hiện.

HTML cho phép các thuộc tính của trình xử lý sự kiện, với mã JavaScript , được thêm vào các phần tử HTML.

Với các dấu ngoặc kép:

<element event='some JavaScript'>

Với dấu ngoặc kép:

<element event="some JavaScript">

Trong ví dụ sau, một onclickthuộc tính (có mã), được thêm vào một <button>phần tử:

Thí dụ

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

Trong ví dụ trên, mã JavaScript thay đổi nội dung của phần tử với id = "demo".

Trong ví dụ tiếp theo, mã thay đổi nội dung của phần tử của chính nó (sử dụng this.innerHTML):

Thí dụ

<button onclick="this.innerHTML = Date()">The time is?</button>

Mã JavaScript thường dài vài dòng. Phổ biến hơn là thấy các thuộc tính sự kiện gọi các hàm:

Thí dụ

<button onclick="displayDate()">The time is?</button>


Sự kiện HTML phổ biến

Dưới đây là danh sách một số sự kiện HTML phổ biến:

Biến cố Sự miêu tả
sự thay đổi Một phần tử HTML đã được thay đổi
trong một cái nhấp chuột Người dùng nhấp vào một phần tử HTML
onmouseover Người dùng di chuyển chuột qua một phần tử HTML
onmouseout Người dùng di chuyển chuột khỏi phần tử HTML
onkeydown Người dùng nhấn một phím bàn phím
đang tải Trình duyệt đã tải xong trang

Danh sách dài hơn nhiều: W3Schools JavaScript Tham chiếu HTML DOM Sự kiện .


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

Trình xử lý sự kiện có thể được sử dụng để xử lý và xác minh thông tin nhập của người dùng, hành động của người dùng và hành động của trình duyệt:

  • Những việc nên làm mỗi khi tải trang
  • Những việc nên làm khi đóng trang
  • Hành động sẽ được thực hiện khi người dùng nhấp vào nút
  • Nội dung cần được xác minh khi người dùng nhập dữ liệu
  • Và nhiều hơn nữa ...

Nhiều phương pháp khác nhau có thể được sử dụng để cho phép JavaScript hoạt động với các sự kiện:

  • Thuộc tính sự kiện HTML có thể thực thi mã JavaScript trực tiếp
  • Các thuộc tính sự kiện HTML có thể gọi các hàm JavaScript
  • Bạn có thể gán các hàm xử lý sự kiện của riêng mình cho các phần tử HTML
  • Bạn có thể ngăn không cho gửi hoặc xử lý các sự kiện
  • Và nhiều hơn nữa ...

Bạn sẽ tìm hiểu thêm rất nhiều về các sự kiện và trình xử lý sự kiện trong các chương HTML DOM.


Kiểm tra bản thân với các bài tập

Bài tập:

Phần <button>tử sẽ làm điều gì đó khi ai đó nhấp vào nó. Cố gắng sửa nó!

<button ="alert('Hello')">Click me.</button>