< Return to Video

Preventing default behavior of events (Video Version)

  • 0:00 - 0:06
    Giờ tôi sẽ cho bạn thấy một tính năng nữa của đối tượng event.
  • 0:06 - 0:10
    Trang web mà tôi đã tạo ra này sẽ trả lời một câu hỏi bất hủ:
  • 0:10 - 0:12
    "What does Oh Noes say?"
  • 0:12 - 0:17
    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:17 - 0:21
    Nếu bạn click vào link này, bạn sẽ được dẫn tới một file mp3
  • 0:21 - 0:25
    mà trình duyệt sẽ chạy, nội dung là câu trả lời cho câu hỏi đó.
  • 0:25 - 0:30
    Nhưng mà tôi không muốn trình duyệt chuyển đến một trang khác.
  • 0:30 - 0:33
    Tôi muốn nghe file đó ngay ở trang này.
  • 0:33 - 0:38
    Có thể lập trình được như thế nếu ta dùng JavaScript để chạy thẻ
  • 0:38 - 0:41
    khi người dùng click vào link.
  • 0:41 - 0:45
    Đầu tiên, ta cần gán link đó vào một biến.
  • 0:45 - 0:48
    (gõ...)
  • 0:56 - 0:58
    Giờ sẽ định nghĩa một hàm callback.
  • 0:58 - 1:04
    Cái này sẽ hay đây.
    This is going to be
  • 1:04 - 1:10
    Trong hàm callback, ta cần tạo một thẻ audio.
  • 1:10 - 1:12
    (gõ...)
  • 1:16 - 1:20
    Đây là một thẻ mới, các trình duyệt phiên bản gần đây mới có.
  • 1:20 - 1:26
    Và audio.src thì là... ta đặt nó là
  • 1:26 - 1:33
    href từ trên này... thẻ audio cũng gần giống thẻ img.
  • 1:33 - 1:37
    Rồi ta viết audioEl.autoplay = true,
  • 1:37 - 1:40
    tức là sẽ bật audio ngay khi nhận được link.
  • 1:40 - 1:43
    Cuối cùng là đưa nó vào trong trang web.
  • 1:43 - 1:46
    Đặt ở vị trí nào không quan trọng,
  • 1:46 - 1:48
    vì ta đâu có nhìn thấy nó đâu, chỉ nghe thôi.
  • 1:48 - 1:52
    Bây giờ khi người dùng click vào, trình duyệt sẽ tạo một , đặt source,
  • 1:52 - 1:55
    đặt autoplay, và đẩy nó lên trang web.
  • 1:55 - 1:59
    Cuối cùng, ta viết để gọi hàm event listener
  • 1:59 - 2:01
    khi link được click vào.
  • 2:01 - 2:04
    (gõ...)
  • 2:08 - 2:13
    rồi tuyền tên của hàm vào.
  • 2:13 - 2:17
    Bây giờ bạn dừng video lại mà thử xem xem.
  • 2:17 - 2:20
    ♪ ... ♪
  • 2:20 - 2:21
    Có được chưa?
  • 2:21 - 2:26
    Như tôi thấy thì có nghe thấy file đó rồi,
  • 2:26 - 2:30
    nhưng link đó vẫn hiện ra trên cửa sổ mới.
  • 2:30 - 2:33
    Ta muốn làm sao để chỉ bật audio thôi chứ không
  • 2:33 - 2:38
    dẫn tới link kia, bởi vì đến cũng không để làm gì.
  • 2:38 - 2:43
    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).
  • 2:43 - 2:47
    Mặc định thì khi người dùng click vào một link,
  • 2:47 - 2:50
    trình duyệt sẽ dẫn tới link đó.
  • 2:50 - 2:54
    Nhưng khi ta muốn xử lí link đó kiểu khác trong JS,
  • 2:54 - 2:58
    ta thường không muốn truyển tới một trang web khác như thế.
  • 2:58 - 3:03
    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'
  • 3:03 - 3:05
    gọi là `preventDefault()`.
  • 3:05 - 3:10
    Ta phải gọi đối tượng event mà ta nhập vào đó,
  • 3:10 - 3:16
    trong này ta viết `e.preventDefault();`
  • 3:16 - 3:19
    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
  • 3:19 - 3:21
    của event này nữa.
  • 3:21 - 3:26
    Giờ hãy dừng video lại mà thử xem.
  • 3:26 - 3:28
    Bạn nghe thấy tiếng rồi chứ?
  • 3:28 - 3:31
    Như vậy là trải nghiệm người dùng sẽ tốt hơn hẳn.
  • 3:31 - 3:35
    Cái vừa rồi ta vừa làm gọi là "progressive enchancement" (tăng tiến),
  • 3:35 - 3:40
    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,
  • 3:40 - 3:45
    nhưng rồi tăng trải nhiệm người dùng lên với JS.
  • 3:45 - 3:48
    Thường bạn sẽ dùng preventDefault() khi
  • 3:48 - 3:50
    viết listener cho event click.
  • 3:50 - 3:54
    Cũng có lúc bạn sẽ dùng khi xử lý form,
  • 3:54 - 3:57
    bởi vì mặc định thì trình duyệt sẽ tải lại trang web
  • 3:57 - 3:59
    khi gửi form đến server.
  • 3:59 - 4:03
    Điều quan trọng ở đây là trải nhiệm người dùng,
  • 4:03 - 4:07
    nếu trải nhiệm người dùng trên trang web của bạn chưa được tốt
  • 4:07 - 4:09
    hãy tìm cách cải thiện nó lên.
  • 4:09 - 4:11
    Trong khoá học này sẽ không nói hết về chủ đề này
  • 4:11 - 0:00
    mà bạn có thể tìm thêm đủ thứ thông tin khác trên internet được.
Title:
Preventing default behavior of events (Video Version)
Description:

more » « less
Video Language:
English
Duration:
04:17

Vietnamese subtitles

Incomplete

Revisions