Giờ tôi sẽ cho bạn thấy một tính năng nữa của đối tượng event.

Trang web mà tôi đã tạo ra này sẽ trả lời một câu hỏi bất hủ:

"What does Oh Noes say?"

Tức là, anh ta sẽ trả lời thế nào nếu bạn có thể nghe được tiếng anh ta nói?

Nếu bạn click vào link này, bạn sẽ được dẫn tới một file mp3

mà trình duyệt sẽ chạy, nội dung là câu trả lời cho câu hỏi đó.

Nhưng mà tôi không muốn trình duyệt chuyển đến một trang khác.

Tôi muốn nghe file đó ngay ở trang này.

Có thể lập trình được như thế nếu ta dùng JavaScript để chạy thẻ

khi người dùng click vào link.

Đầu tiên, ta cần gán link đó vào một biến.

(gõ...)

Giờ sẽ định nghĩa một hàm callback.

Cái này sẽ hay đây.
This is going to be

Trong hàm callback, ta cần tạo một thẻ audio.

(gõ...)

Đây là một thẻ mới, các trình duyệt phiên bản gần đây mới có.

Và audio.src thì là... ta đặt nó là

href từ trên này... thẻ audio cũng gần giống thẻ img.

Rồi ta viết audioEl.autoplay = true,

tức là sẽ bật audio ngay khi nhận được link.

Cuối cùng là đưa nó vào trong trang web.

Đặt ở vị trí nào không quan trọng,

vì ta đâu có nhìn thấy nó đâu, chỉ nghe thôi.

Bây giờ khi người dùng click vào, trình duyệt sẽ tạo một , đặt source,

đặt autoplay, và đẩy nó lên trang web.

Cuối cùng, ta viết để gọi hàm event listener

khi link được click vào.

(gõ...)

rồi tuyền tên của hàm vào.

Bây giờ bạn dừng video lại mà thử xem xem.

♪ ... ♪

Có được chưa?

Như tôi thấy thì có nghe thấy file đó rồi,

nhưng link đó vẫn hiện ra trên cửa sổ mới.

Ta muốn làm sao để chỉ bật audio thôi chứ không

dẫn tới link kia, bởi vì đến cũng không để làm gì.

Muốn làm như thế, ta cần bảo trình duyệt đừng thực hiện default behavior (xử lí mặc định).

Mặc định thì khi người dùng click vào một link,

trình duyệt sẽ dẫn tới link đó.

Nhưng khi ta muốn xử lí link đó kiểu khác trong JS,

ta thường không muốn truyển tới một trang web khác như thế.

Ta có thể tránh default behavior như thế bằng cách gọi một hàm của thuộc tính 'event'

gọi là `preventDefault()`.

Ta phải gọi đối tượng event mà ta nhập vào đó,

trong này ta viết `e.preventDefault();`

Như vậy là trình duyệt sẽ không thực hiện những thao tác xử lý mặc định

của event này nữa.

Giờ hãy dừng video lại mà thử xem.

Bạn nghe thấy tiếng rồi chứ?

Như vậy là trải nghiệm người dùng sẽ tốt hơn hẳn.

Cái vừa rồi ta vừa làm gọi là "progressive enchancement" (tăng tiến),

tức là bắt đầu trăng web với HTML với những thao tác xử lý mặc định của trình duyệt,

nhưng rồi tăng trải nhiệm người dùng lên với JS.

Thường bạn sẽ dùng preventDefault() khi

viết listener cho event click.

Cũng có lúc bạn sẽ dùng khi xử lý form,

bởi vì mặc định thì trình duyệt sẽ tải lại trang web

khi gửi form đến server.

Điều quan trọng ở đây là trải nhiệm người dùng,

nếu trải nhiệm người dùng trên trang web của bạn chưa được tốt

hãy tìm cách cải thiện nó lên.

Trong khoá học này sẽ không nói hết về chủ đề này

mà bạn có thể tìm thêm đủ thứ thông tin khác trên internet được.