-
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.
