Sự kiện chuột – xem video tại: https://drive.google.com/file/d/16uKt2cEmz6F38BKbdevkw3E_jcJ_KIO2/view

Mục tiêu

Luyện tập thao tác sự kiện click chuột.

Mô tả bài toán- sự kiện chuột

Làm sử dụng sự kiện click chuột để di chuyển hình ảnh một quả bóng. Mỗi lần click quả bóng sẽ được di chuyển sang trái/phải một khoảng cách.

Để hoàn thành bài thực hành, bạn cần:

  • Đưa mã nguồn lên GitHub
  • Dán link của repository lên phần nộp bài trên CodeGymX

Các bước thực hiện

Bước 1: Tạo giao diện như hình

Sự kiện chuột

Mã nguồn tham khảo:

Bước 2: Tạo biến imgObj để lưu ảnh

Bước 3: Sử dụng hàm getElementById () để nhận được một đối tượng DOM và sau đó gán nó cho biến imgObj.

Bước 4: Tạo hàm init () để khởi tạo imgObj mà chúng ta đã đặt vị trí và các thuộc tính còn lại.

Bước 5: Tạo hàm moveRight () để tăng khoảng cách trái 10 pixel. Bạn cũng có thể đặt nó là một giá trị âm để di chuyển nó sang bên trái.

Bước 6: Gọi hàm init() khi trình duyệt được tải lần đầu

Bước 7: Xác định sự kiện onclick cho button

Bước 8: Chạy chương trình. Click chuột vào button Click Me và quan sát kết quả.

Trên đây CodeGym đã cùng với bạn luyện tập thao tác sự kiện chuột. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!