Target là gì js

Target Selector sẽ lựa chọn phần tử được chỉ ra bởi fragment trong URI của tài liệu.

MDN var link = document.querySelector["a"]; link.addEventListener["click", function[event] { console.log["Nope."]; event.preventDefault[]; }];

Trong ví dụ trên, khi bạn nhấn vào link thì bạn sẽ không được chuyển đến trang //developer.mozilla.org.

Một số Event JavaScript cơ bản

Key event

Key event là sự kiện khi bạn nhấn vào một key trên bàn phím. Có 3 sự kiện với key là:

• keydown: được gọi khi bạn nhấn xuống một key
• keyup: được gọi khi bạn nhả key đó ra
• keypress: được gọi khi bạn nhấn và giữ key
• ...

Ví dụ:

addEventListener["keydown", function[event] { console.log["keydown", event.keyCode]; }]; addEventListener["keyup", function[event] { console.log["keyup", event.keyCode]; }]; addEventListener["keypress", function[event] { console.log["keypress", event.keyCode]; }];

Trong ví dụ này, tôi ghi ra giá trị keyCode của phím được nhấn dựa vào đối tượng event [keyEvent ở đây là giá trị số nguyên của từng phím trong bảng mã Unicode].

Chú ý: với sự kiện keydown và keyup thì giá trị sẽ ứng với chữ cái thường, trong khi sự kiện keypress thì ta sẽ có giá trị của chữ cái viết hoa. Tức là nếu bạn nhấn phím 'a' thì kết quả sẽ là:

keydown 65 keypress 97 keyup 65

Ngoài ra bạn có thể xử lý việc nhấn tổ hợp phím như ví dụ sau:

addEventListener["keydown", function[event] { if [event.ctrlKey] console.log["keydown", "ctrlKey", event.keyCode]; ]; addEventListener["keydown", function[event] { if [event.shiftKey] console.log["keydown", "shiftKey", event.keyCode]; }]; addEventListener["keydown", function[event] { if [event.altKey] console.log["keydown", "altKey", event.keyCode]; }];

Mouse Event

Mouse event là sự kiện khi bạn nhấn hay di chuyển chuột. Một số sự kiện với chuột là:

• click: được gọi khi bạn nhấn chuột 1 lần
• dblclick: được gọi khi bạn nhấn chuột nhanh 2 lần
• mousedown: được gọi khi bạn nhấn chuột xuống
• mouseup: được gọi khi bạn nhả chuột ra
• mousemove: được gọi khi bạn nhấn và kéo chuột
• ...

Đối với sự kiện nhấn chuột, có nhiều bài toán mà bạn sẽ cần phải xác định vị trí nhấn chuột, kéo chuột,... tôi sẽ giới thiệu với bạn ở một bài viết khác sau.

Kết luận

Trên đây là một số cách xử lý Event JavaScript cơ bản. Tôi có thể tóm tắt lại như sau:

• addEventListener : đăng ký sự kiện
• removeEventListener : huỷ đăng ký sự kiện
• preventDefault: bỏ đi hàm xử lý mặc định với sự kiện
• Một số sự kiện với key: keydown, keyup, keypress,...
• Một số sự kiện với mouse: click, dbclick, mousedown, mouseup, mousemove,...

Tham khảo

Xin chào và hẹn gặp lại ở bài viết tiếp theo trong series JavaScript cơ bản. Thân ái,

Bản gốc: Blog Complete JavaScript

Theo dõi Lam Pham trên Kipalog để nhận thông báo khi có bài viết mới nhất:

Cùng một tác giả

36 13

Trước khi vào nội dung bài viết. Tôi xin đính chính giúp anh trả lời những câu hỏi chỉ là tựa đề của một bài hát tôi không có ý xưng hô là anh. Bài...

17 6

Có thể bạn thừa biết, JavaScript là một ngôn ngữ chạy [Link]. Điều đó có nghĩa là nếu bạn thực hiện một tác vụ quá lớn trên giao diện chính thì khả...

16 4

Xin chào bạn Có thể bạn đã biết, JavaScript là một ngôn ngữ lập trình rất mạnh, nhưng lại vô cùng rắc rối, phức tạp. Để có thể nắm vững được Java...

Bài viết liên quan

69 8

Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...