Bạn có nhớ tại sao tôi lại

biến trang này thành cá sấu không?

Vì tôi rất rất sợ cá sấu.

Giờ tôi nghĩ là mình đã sẵn sàng để đối mặt với nỗi sợ của mình hơn nữa,

để còn đưa nhiều cá sấu lên trang này hơn nữa.

Làm sao làm thế được?

Tôi nghĩ là sẽ rất hay

nếu tôi có thể bao phủ cả trang web này

với ảnh cá sấu khi tôi click chuột.

Ta sẽ lập trình cái đó.

Tôi đã viết trước một đoạn

pseudocode trong thẻ script này đây.

Nếu bạn không biết pseudocode là gì,

thì nó là một dạng code cho người thường dễ đọc hơn.

Tôi thấy dùng pseudocode thì sẽ dễ hiểu hơn,

nhất là với những tính năng phức tạp

mà tôi muốn lập trình.

Giờ tôi sẽ chuyển đoạn pseudocode này thành code thật.

Việc đầu tiên là khi người dùng click vào trang web.

Tôi cần nhận được thông tin bất cứ khi nào

người dùng click vào bất cứ điểm nào trên trang web.

Để được thế thì tôi sẽ thêm một event listener

vào cái . Viết... "body"

rồi dùng hàm on().

rồi tên của event: "click".

Rồi ta nhập vào một hàm callback.

Trong hàm callback này,

ta cần tạo một ảnh mới.

Tôi sẽ lưu nó vào một biến...

$img = ... rồi nhập vào thẻ ,

và ta đổi nguồn ảnh đi...

tôi sẽ dùng nguồn ảnh trên này,

và đặt chiều rộng là 100,

rồi ta cần

đặt ảnh này vào một chỗ nào đó trên trang web.

Tôi sẽ đặt nó vào cuối body.

Được rồi.

Hiện tại thì khi click vào, tôi mới chỉ thấy

ảnh cá sấu này hiện ra phía cuối trang web.

Nếu muốn, bạn có thử dừng bài lại

và tự thử xem nó thế nào.

Nhưng giờ tôi lại muốn đặt ảnh đó vào vị trí

đúng như vị trí tôi click chuột trên trang web nữa.

Làm sao để biết vị trí click ở đâu?

Mỗi khi có event của con chuột,

trình duyệt sẽ thông báo cho trang web thông tin đó,

và jQuery sẽ lưu thông tin đó trong đối được event của jQuery.

Thế đối tượng event đó ở đâu?

Thực ra là jQuery có truyền đối tượng nó vào

làm parameter đầu tiên của hàm callback.

Tôi sẽ đặt tên cho parameter đó để ta con sử dụng

tên nó ở trong hàm callback.

Đôi khi tôi sẽ muốn console log cái event này

để kiểm tra nội dung các thuộc tính của nó trước khi làm gì với nó,

để xem làm mình sẽ làm việc với những thông tin gì.

Nếu bạn dừng video này lại và click vào trang thử xem,

bạn sẽ thấy trong log có một đối tượng jQuery

với mỗi dãy dài các thuộc tính.

Bạn cũng có thể đọc tài liệu của jQuery

để xem có những thuộc tính gì và ý nghĩa của chúng là gì.

Có 2 thuộc tính mà tôi

quan tâm đến chính là pageX và pageY,

đó là toạ đọ của

vị trí click chuột trên trang web

tôi có thể dùng toạ độ đó để xác định vị trí cho ảnh bằng CSS.

Đầu tiên tôi sẽ

đặt thuộc tính CSS là absolute.

Nếu bạn không nhớ CSS absolute là thế nào,

bạn có thể quay lại coi khoá học về HTML CSS.

Giờ tôi sẽ đặt vị trí

theo vị trí con chuột.

tôi sẽ đặt

top bằng

'event.pageY',

tức là sử dụng thuộc tính pageY

của đối tượng event trong jQuery mà

trình duyệt nhập vào hàm callback này.

Rồi tôi đặt giá trị left

là 'event.pageX'.

Tôi sẽ thêm đơn vị nữa: px,

bởi vì ta cần xác định đơn vị

để CSS biết phải dùng đơn vị nào

hay là dùng phần trăm,

đại loại thế.

Ta dùng pixel, bỏi vì

pageY và pageX là số pixel.

Chúng là các giá trị pixel.

Okay, giờ đến chỗ hay này.

Hãy dừng bài lại, click thử vào trang xem.

Hay nhỉ, cá sấu xuất hiện mọi nơi.

Giờ thì tôi thích cá sấu rồi, không sợ nữa.

Vậy là cái đối tượng event này có thể rất hữu dụng.

Ta có thể sử dụng nó trong các trường hợp như thế này

để tìm vị trí của con chuột,

ví dụ như để làm ứng dụng vẽ, hay là game click chuột,

hay tương tác kéo thả.

Ta cũng có thể dùng đối tượng event

để biết là phím nào được nhấn khi event xảy ra,

để viết ứng dụng tương tác với bàn phím

như là game 2d hay là

trình soạn thảo code online, như là trang này đây.

Hay nhỉ.