Trong các bài học trước, chúng ta đã học về cú pháp của JavaScript, nhưng chúng ta vẫn chưa biết được làm thế nào để “đính kèm” JavaScript để các yếu tố HTML của chúng tôi. Đó là những gì tôi sẽ chỉ cho bạn trong bài học này.
Standalone JavaScript
Đầu tiên, chúng ta hãy nhìn vào những gì một mảnh Standalone JavaScript trông như thế nào:
<script type="text/javascript"> <!-- alert('Hey, remember to tell your friends about Quackit.com!'); --> </script> Nếu chúng ta đặt ở trên JavaScript giữa các ‘đầu’ thẻ (hoặc ‘cơ thể’ thẻ), nó sẽ chạy ngay khi chúng ta nạp trang.
Bây giờ điều này là tốt – miễn là bạn muốn nó chạy ngay sau khi tải trang!
Nhưng, nếu bạn không muốn nó chạy ngay sau khi tải trang? bạn chỉ muốn nó chạy khi người dùng nhấp chuột vào một nút?
Dễ dàng! Bạn cần một “event handler” Dưới đây sẽ hướng dẫn cho bạn.
Event Handler là gì?
Bạn hiểu đơn giản Event Handler nói về những sự kiện, cách thức làm việc sự kiện và quản lý sự kiện trong ứng dụng.
Trong code của bạn, xử lý sự kiện chỉ đơn giản là một thuộc tính đặc biệt mà bạn thêm vào phần HTML của bạn. Ví dụ, để chạy một số JavaScript khi người dùng nhấp vào một phần tử, bạn thêm onClick thuộc tính vào phần tử.
Các ví dụ dưới đây chứng minh điều này cho bạn.
Thêm Javascript vào phần tử HTML
Dưới đây là một ví dụ cơ bản của việc thêm Javascript vào phần tử HTML. Trong trường hợp này, khi người dùng nhấp chuột vào nút chúng tôi tạo, một hộp cảnh báo JavaScript được hiển thị. Điều này được thực hiện bằng cách thêm một onClick thuộc tính và cách đặt các mã JavaScript hộp cảnh báo vào nó.
Khi bạn sử dụng JavaScript như thế này, bạn không cần phải sử dụng script thẻ (như chúng tôi đã làm ở trên). Đơn giản chỉ cần đặt JavaScript trong xử lý sự kiện (event handler) và nó sẽ làm việc.
JavaScript “On Double Click”
Bạn có một cách dễ dàng sử dụng sự kiện khác để kích hoạt JavaScript. Ví dụ, bạn có thể chạy JavaScript chỉ khi nhấp chuột đôi các phần tử HTML. Chúng tôi có thể làm điều này bằng cách sử dụng onDblClick xử lý sự kiện.
Có rất nhiều sự kiện xử lý khác mà bạn có thể sử dụng trong Javascript / HTML code của bạn. Tổng cộng, có 18 xử lý sự kiện (như được liệt kê bởi W3C). Tôi sẽ giới thiệu chi tiết hơn sau này .
Xem thêm: Các loại JavaScript Popup Boxes
Còn nhiều bài viết hữu ích, các bạn nhớ đón đọc nhé. Chúc các bạn học thiết kế web, lập trình web tiến bộ.
