Bài 8: Tìm hiểu sự kiện trong Javascript

Bởi Phuoc Nguyen vào January 2016

Ở bài học trước chúng ta đã tìm hiểu về Javascript và HTML DOM, các bạn cũng đã biết qua về cách có thể can thiệp vào dữ liệu cũng như thực hiện thay đổi giá trị và lấy giá trị. Trong bài này, các bạn cũng sẽ được tìm hiểu đến phần quan trọng cũng như là phần thú vị nhất trong Javascript. Đó chính là sự kiện trong Javascript (JS).

Sự kiện trong Javascript (JS) có thể hiểu đơn giản là “điều gì đó sẽ xảy ra và khi đó chúng ta sẽ thực hiện hành động nào đó tương ứng với điều sẽ xảy ra”, hay có một ví dụ thực tế hơn “Khi có một thiên thạch rơi (sự kiện “rơi”) gần đến chỗ bạn, thì hành động của bạn lúc đó sẽ là…chạy và chạy” có đúng không nào.

Vì thế, Javascript xử lý các sự kiện cũng như cách mà chúng ta hiểu, mà ở trong những phần trước, nếu các bạn để ý là khi chúng ta “click” vào một “button” hay một “đối tượng” (element) nào đó trong HTML, thì chúng ta thường thấy có sự kiện “onclick” hay lúc “rê chuột” (hover) thì có sự kiện “onmouseover” và lúc đó chúng ta sẽ thực hiện hàm nào đó hay các câu lệnh mà chúng ta viết trực tiếp ở HTML.

Các bạn có thể tìm hiểu về danh sách các sự kiện trong HTML tại đây http://www.w3schools.com/tags/ref_eventattributes.asp.

Ví dụ

Câu hỏi: Vậy liệu có cách nào mà không cần dùng đến thuộc tính trong HTML mà trong chúng ta có thể viết thẳng bên trong Javascript không? Giống như cách mà jQuery đã làm.

Trả lời: Xin thưa các bạn là còn, và chúng ta sẽ cùng tìm hiểu đến với hàm “addEventListener()” nhé.

Tìm hiểu “addEventListener()”

Tuy nhiên, ví dụ trên chỉ là một nửa của vấn đề bởi vì chúng ta sẽ còn 1 đối số cuối cùng nữa của “addEventListener()” mà tôi chưa đề cập ở ví dụ trên có tên gọi là “useCapture”. Các bạn hãy xem qua ví dụ dưới đây nhé.

event-listener-three-actors-model

1. Chưa có đối số thứ 3 (Mặc định đối số thứ 3 có giá trị là “false” nếu không tồn tại)

Kết luận ở trường hợp này, khi chúng ta click vào một đối tượng nào đó có sự kiện trùng với đối tượng cha hoặc lớn hơn nữa như ông nội, ông ngoại gì đấy cũng có sự kiện tương tự thì sẽ chạy theo thứ tự “từ nhỏ đến lớn hay từ trong ra ngoài”.

2. Có đối số thứ 3

Vậy các bạn phần nào hiểu được đối số thứ 3 rồi phải không. Nó giúp chúng ta đảo ngược lại bằng cách sẽ gọi “từ lớn về nhỏ hay từ cao xuống thấp”. Tuy nhiên, các bạn vẫn chưa hiểu đúng về nó đâu nhé. Hãy xem qua ví dụ cuối.

Nhưng sự thật là nó đã chạy đúng rồi đấy các bạn ạ. Thẻ “p” được gán giá trị “true” cho đối số thứ 3, giúp nó sẽ trở thành đối tượng ưu tiên. Nghe qua thật khó hiểu nhưng tôi sẽ có một bảng nho nhỏ ở đây để các bạn hiểu được nó rõ ràng hơn.

Cho thẻ “a” là (1), thẻ “p” là (2) và thẻ “div” là (3)

Giá trị đối số thứ 3 Ưu tiên khi chạy Sự kiện trùng nhau
(1) True(2) False

(3) False

(1) a(2) p

(3) div

(1) False(2) True

(3) False

(2) p(1) a

(3) div

(1) False(2) False

(3) True

(3) div(1) a

(2) p

(1) False(2) True

(3) True

(3) div(2) p

(1) a

(1) True(2) False

(3) True

(3) div(1) a

(2) p

Bảng tóm tắt các trường hợp xảy có thể xảy ra khi các bạn dùng giá trị “true”, “false” lẫn lộn mà cách chạy của nó sẽ có phần khác nhau. Các bạn sẽ rút ra được kết luận là “Tác dụng của đối số thứ 3 chính là thay đổi sự ưu tiên thành “từ lớn xuống nhỏ hay từ ngoài vào trong” khi trùng sự kiện với nhau.”

Ghi chú

  1.             ‘event’: tên của event, giống với khi dùng thuộc tính HTML nhưng bỏ chữ “on” ở đầu sự kiện như “onclick => click”, “onload => load”.
  2.             Function: hàm thực thi khi sự kiện được gọi.
  3.             useCapture: thay đổi độ ưu tiên khi trùng sự kiện.

Trong bài này, chúng ta cũng đã kết thúc phần tìm hiểu Javascript Cơ bản tại đây. Ở các bài viết sau, tôi sẽ hướng dẫn các bạn về các hàm thông dụng trong Javascript và các thủ thuật trong Javascript và cách ứng dụng của nó vào trong thực tế như thế nào.
Nguồn: http://thienanblog.com/javascript/javascript-co-ban/bai-8-tim-hieu-su-kien-trong-javascript/