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

Cập nhật lần cuối: 10 Tháng Tám 2017

Javascript cơ bản

1,399 Lượt xem

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

Tác giả: ĐOÀN CÔNG TUẤN

Với niềm đam mê về khoa học công nghệ thông tin, đặc biệt là lập trình. Tôi đã thành lập blog Tuandc.com để lưu trữ và chia sẻ những kiến thức thực tế có được trong quá trình làm việc. Với kinh nghiệm gần 10 năm làm việc trong lĩnh vực, những kiến thức tôi chia sẻ hy vọng sẽ giúp được phần nào đó.