[Javascript Căn bản] Sự kiện trong JavaScript

[Javascript Căn bản] Sự kiện trong JavaScript

Sự kiện (events) là một điểm ngắt đánh dấu bắt đầu một hành động nào đó. Trong lập trình, sự kiện là rất quan trọng để nhận biết khi nào đoạn mã được thực thi bởi sự kiện gì do người dùng hoặc trình duyệt thực hiện. Trong bài viết này mình sẽ chia sẻ về sự kiện trong HTML và cách sử dụng sự kiện HTML để gọi thực thi trong Javascript.

Sử dụng sự kiện trong HTML để gọi các mã lệnh Javascript

Thông thường sự kiện trên HTML bao gồm:

  • Trang web tải xong.
  • Input thay đổi giá trị.
  • Một nút được nhấn.

Cú pháp của sự kiện trong HTML là <element event='some JavaScript'> hoặc <element event="some JavaScript">.

  • element: là thẻ HTML chứa sự kiện.
  • event: là tên sự kiện sẽ xảy ra.
  • some JavaScript: là mã Javascript, nó có thể được đặt trong dấu nháy đơn ' hoặc dấu nháy kép ".

Ví dụ:

<button onclick="document.getElementById('demo').innerHTML = Date()">Hiển thị thời gian</button>
hoặc
<button onclick="this.innerHTML = Date()">Hiển thị thời gian</button>
  • this là thuộc tính sẽ đại diện cho chính element của nó. Ví dụ đoạn mã thứ 2 ở trên, khi bấm sẽ thay luôn từ “Hiển thị thời gian” mà không hiển thị sang một element khác.
  • Để gọi hàm bạn chỉ cần gọi tên hàm ví dụ onclick="function()"

Một số ví dụ

  • Sự kiện onclick của chuột.
<button onclick="myFunction()">Nhấn vào đây</button>
  • Sự kiện Onkeydown của bàn phím.
<input type="text" onkeydown="myFunction()">
  • Sự kiện onload của trang khi tải trang.
<body onload="myFunction()">
  • Sự kiện onchange khi thay đổi giá trị.
<select onchange="myFunction()">
  • Sự kiện ondrag khi sử dụng drag trên element.
<p draggable="true" ondrag="myFunction(event)">Kéo tui đi!</p>
  • Sự kiện oncopy khi copy nội dung trong element.
<input type="text" oncopy="myFunction()" value="Copy thử đoạn này !">
  • Sự kiện onafterprint sau khi in tài liệu từ web.
<body onafterprint="myFunction()">
  • Sự kiện onplay khi chạy media.
<video onplay="myFunction()">

Bạn có thể tìm hiểu thêm về HTML DOM Event tại https://www.w3schools.com/jsref/dom_obj_event.asp.

Trong bài sau mình sẽ giới thiệu đến các bạn Xử lý chuỗi trong JavaScript