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

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

0:00:09.936,0:00:12.150
"What does Oh Noes say?"

0:00:12.150,0:00:16.599
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?

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

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

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

0:00:30.009,0:00:33.445
Tôi muốn nghe file đó ngay ở trang này.

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

0:00:37.891,0:00:40.957
khi người dùng click vào link.

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

0:00:45.109,0:00:48.078
(gõ...)

0:00:55.770,0:00:58.099
Giờ sẽ định nghĩa một hàm callback.

0:00:58.099,0:01:03.735
Cái này sẽ hay đây.[br]This is going to be

0:01:03.735,0:01:10.165
Trong hàm callback, ta cần tạo một thẻ audio.

0:01:10.165,0:01:12.033
(gõ...)

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

0:01:19.825,0:01:26.104
Và audio.src thì là... ta đặt nó là

0:01:26.104,0:01:32.563
href từ trên này... thẻ audio cũng gần giống thẻ img.

0:01:32.563,0:01:37.335
Rồi ta viết audioEl.autoplay = true,

0:01:37.335,0:01:40.333
tức là sẽ bật audio ngay khi nhận được link.

0:01:40.333,0:01:42.953
Cuối cùng là đưa nó vào trong trang web.

0:01:42.953,0:01:45.574
Đặt ở vị trí nào không quan trọng,

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

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

0:01:52.295,0:01:55.387
đặt autoplay, và đẩy nó lên trang web.

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

0:01:59.444,0:02:01.376
khi link được click vào.

0:02:01.376,0:02:03.723
(gõ...)

0:02:08.282,0:02:12.951
rồi tuyền tên của hàm vào.

0:02:12.951,0:02:17.385
Bây giờ bạn dừng video lại mà thử xem xem.

0:02:17.385,0:02:19.729
♪ ... ♪

0:02:19.729,0:02:21.110
Có được chưa?

0:02:21.110,0:02:26.337
Như tôi thấy thì có nghe thấy file đó rồi,

0:02:26.337,0:02:29.789
nhưng link đó vẫn hiện ra trên cửa sổ mới.

0:02:29.789,0:02:33.476
Ta muốn làm sao để chỉ bật audio thôi chứ không

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

0:02:37.548,0:02:42.920
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).

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

0:02:47.148,0:02:50.321
trình duyệt sẽ dẫn tới link đó.

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

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

0:02:58.004,0:03:02.731
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'

0:03:02.731,0:03:05.299
gọi là `preventDefault()`.

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

0:03:09.897,0:03:15.830
trong này ta viết `e.preventDefault();`

0:03:15.830,0:03:19.420
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

0:03:19.420,0:03:21.399
của event này nữa.

0:03:21.399,0:03:25.995
Giờ hãy dừng video lại mà thử xem.

0:03:25.995,0:03:28.385
Bạn nghe thấy tiếng rồi chứ?

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

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

0:03:34.959,0:03:39.514
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,

0:03:39.514,0:03:44.650
nhưng rồi tăng trải nhiệm người dùng lên với JS.

0:03:44.650,0:03:48.361
Thường bạn sẽ dùng preventDefault() khi

0:03:48.361,0:03:50.445
viết listener cho event click.

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

0:03:54.447,0:03:57.485
bởi vì mặc định thì trình duyệt sẽ tải lại trang web

0:03:57.485,0:03:59.264
khi gửi form đến server.

0:03:59.264,0:04:02.640
Điều quan trọng ở đây là trải nhiệm người dùng,

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

0:04:06.730,0:04:08.953
hãy tìm cách cải thiện nó lên.

0:04:08.953,0:04:11.366
Trong khoá học này sẽ không nói hết về chủ đề này

0:04:11.366,0:00:00.000
mà bạn có thể tìm thêm đủ thứ thông tin khác trên internet được.