Adding an event listener (Video Version)

Tôi đã tạo một trang này để ta nghịch.

Bây giờ thì trang này còn nhạt nhẽo thật.

Chưa có nội dung gì cả, và nút này

không làm gì cả khi tôi click vào.

Ta sẽ thay đổi nút này đi để

khi người dùng click vào nút, dòng chữ

ở trong nút sẽ thay đổi.

Việc đầu tiên là tìm element mà

sẽ kích hoạt event để ta listen.

Trong ví dụ này thì element đó chính là nút này,

Nút này có id="clicker",

nên ta sẽ tạo một biến tên là clickerButton

và dùng document.getElementById

để lưu nút kia vào biến này.

Bước tiếp theo là viết một hàm

để trình duyệt còn gọi lên khi event này xảy ra.

Tôi đặt hàm đó là onButtonClick và

tạm thời tôi cứ để hàm đó trống không thế,

đương nhiên ta sẽ phải viết gì đó

trong hàm đó, không thì đúng là vô dụng.

Để thay đổi nút trên button, ta có thể dùng

biết clickerButton và gán giá trị vào textContent của biến đó.

đặt là

Thế là xong nút này rồi!

Giờ thì chưa có gì lắm, nhưng ta

có thể viết đủ thứ phức tạp hơn nữa khi quen rồi.

Cho đến giờ thì code của ta mới chỉ gán giá trị vào các biến,

vẫn chưa có gì lắm xảy ra khi tôi click vào nút.

Bước cuối cùng là ghép 2 cái kia lại,

tức là code cho trình duyệt biết rằng cần phải gọi

hàm kia mỗi khi có click event

với nút đó.

Ta có thể gọi hàm

addEventLisstener của button đó:

clickerButton.addeventlistener(),

Ta sẽ phải nhập 2 argument vào trong hàm này.

Đầu tiên là tên của event, là "click",

tiếp theo là tên hàm mà ta muốn gọi

khi có event "click", tức là onButtonClick.

Giờ bạn hãy dừng video này lại một chút để click thử vào nút đó xem

Có được không?

Tôi mong là được. Với tôi thì có được.

Ta sẽ xem lại một chút qua cách hoạt động của hàm này,

vì nó cũng hơi phức tạp.

ta gọi hàm này là eventLister function,

cũng gọi là callback function, vì đấy là nhiệm vụ của nó.

Ta chỉ gọi hàm đó lên khi có event xảy ra,

còn khi trang web mới được load lên thì chưa gọi.

Còn nếu ta muốn gọi một hàm ngay khi trang web đang load,

thì ta sẽ phải viết thêm một dòng thế này...

Bạn để ý có dấu ngoặc đơn () ở cuối hàm.

Khi trực tiếp gọi một hàm thì phải có dầu ngoặc đơn,

còn khi không có dấu ngoặc thì tức là không trực tiếp gọi hàm đó,

mà chỉ là cái tên của hàm để được gọi sau này thôi,

như là ở trong argument này đây,

như vậy chỉ là báo cho chương trình biết

"Này, đây là tên hàm mà ta sẽ

cần gọi lên về sau, nhưng bây giờ thì chưa trực tiếp gọi."

Bạn nhớ đừng viết dấu ngoặc đơn vào

sau tên hàm này, vì

như thế tức là bạn sẽ nhập vào

giá trị được trả về của hàm đó, chứ không phải là chính hàm đó.

Nếu tôi thêm dấu ngoặc vào đây,

tôi sẽ thấy dòng chữ trên nút kia thay đổi ngay khi trang web đang load,

chứ không đổi về sau.

Để chữa thì tôi chỉ cần bỏ dấu ngoặc đơn
To fix that, I just remove

kia đi, và giờ hàm này

sẽ chỉ được gọi lên khi click vào nút.

Một cách khác để lập trình cái vừa rồi là

nhập vào một hàm vô danh trong này.

Hàm vô dánh tức là một hàm không có tên
An anonymous function is one

để gọi, mà chỉ có một dòng lệnh ở trong thôi.

Tôi viết một dòng addEventListener

ở dưới cho bạn xem và so sánh

thì sẽ hiểu ngày thôi.

Tôi xoá tên hàm này đi, và

viết thẳng định nghĩa của hàm vào luôn,

viết vào đây thế này.

2 dòng code này có chức năng giống hệt nhau.

Gần như là giống hệt.

Chúng đều thực hiện một hàm

có code giống hệt nhau.

Khác một chút là dòng ở trên

nhập vào tên của một hàm mà ta đã định nghĩa ở trên,

còn hàm dưới thì định nghĩa thẳng hàm cần gọi ở trong luôn,

ngay chỗ nhập argument vào.

Cả 2 cách đều được. Hầu hết các lập trình viên thường dùng hàm có tên

vì như thế dễ đọc code hơn

và cũng dễ sửa lỗi hơn,

và cũng có thể gọi tên hàm đó

ở khác chỗ khác với các event khác nữa.

Bạn muốn dùng cách nào cũng được,

chỉ đừng dùng cả 2 cùng lúc, vì như thế

thì trình duyệt sẽ gọi cả

gọi 2 lần chẳng để làm gì cả.

Tôi sẽ xoá hàm vô danh này đi

bởi vì tôi thích kiểu ở trên hơn.

Giờ bạn có thể làm rất nhiều thứ

với event listner.

Bạn có thể lập trình để dịch chuyển các element trên trang web,

bạn có thể viết listener cho nhiều event khác nhau,

ta sẽ học về cái đó trong bài tới,

và bạn cũng có thể làm việc với DOM

như ta đã học trong các bài trước.

Bạn không chỉ có thể thay đổi các element
And you don't just have

mà người dùng động đến,

mà còn thay đổi element nào trên trang web cũng được.

Bạn cứ thử xem còn có thể làm được những gì.