XỬ LÝ MỘT SỐ EVENT JAVASCRIPT CƠ BẢN

Đối với mỗi trang web, đặc biệt là những trang web có sự tương tác với người dùng, thì việc xử lý sự kiện chuột và bàn phím là không thể thiếu. Do đó, bài viết này tôi sẽ giới thiệu với các bạn cách xử lý một số Event JavaScript cơ bản.

Cách đăng ký và huỷ đăng ký Event JavaScript

Đăng ký Event JavaScript

Ở bài viết trước về DOM, bạn biết rằng mỗi phần tử trên trang web là một node. Và chúng ta có thể đăng ký nhận sự kiện cho mỗi node này bằng cách sử dụng phương thức addEventListener như sau:

Node.addEventListener('tên sự kiện', hàm xử lý);

Trong đó:

  • Node: là một phần tử DOM như: document, body, h1, p, img, button,... Nếu bạn không ghi gì thì mặc node đó là document.
  • Tên sự kiện: ứng với sự kiện mà bạn muốn nhận như: click, mousedown, mouseup, mousemove, keydown, keyup, keypress,...
  • Hàm xử lý: là hàm được gọi khi sự kiện bạn đăng ký xảy với node trên.

Chú ý: với một sự kiện bạn có thể đăng ký nhiều hàm xử lý. Khi đó, hàm đăng ký trước sẽ được gọi trước. Ví dụ:

function func1 () {
  console.log('function 1');
}
function func2 () {
  console.log('function 2');
}
addEventListener('click', func1);
addEventListener('click', func2);

Trong ví dụ trên, tôi đã đăng kí sự kiện click cho d_ocument_ với hai hàm xử lý là func1func2. Từ nay, mỗi khi bạn click chuột trái vào trang web thì hàm func1 sẽ được gọi trước, sau đó đến hàm func2.

Huỷ đăng ký Event JavaScript

Tương tự, để huỷ sự kiện đã đăng ký bạn có thể sử dụng phương thức removeEventListener như sau:

Node.removeEventListener('tên sự kiện', hàm xử lý);

Ví dụ:

function func1 () {
  console.log('function 1');
}
function func2 () {
  console.log('function 2');
}
addEventListener('click', func1);
addEventListener('click', func2);

removeEventListener('click', func1);

Tiếp theo ví dụ trên, nếu tôi huỷ đăng ký sự kiện click trên document với hàm func1 bằng phương thức sau: removeEventListener('click', func1); Thì bây giờ, mỗi khi bạn click chuột trái vào trang web, chỉ có hàm func2 được gọi.

Đăng ký event cho nhiều node dựa trên đối tượng event

Bình thường để đăng ký sự kiện cho nhiều node bạn có thể sử dụng phương thức addEventListener cho mỗi node. Tuy nhiên, thực tế bạn có thể chỉ cần sử dụng phương thức trên 1 lần và sử dụng thuộc tính target của đối tượng event để phân biệt node được gọi. Hãy xem ví dụ sau:

<button>A</button>
<button>B</button>
<button>C</button>
<p> Hello </p>
<script>
 document.body.addEventListener("click", function(event) {
   if (event.target.nodeName == "BUTTON")
     console.log("Clicked", event.target.textContent);
   else if (event.target.nodeName == "P")
     console.log("Paragraph clicked", event.target.textContent);
 });
</script>

Trong ví dụ trên, tôi chỉ cần gọi phương thức addEventListener một lần. Sau đó, tôi chỉ cần sử dụng event.target.nodeName để biết được node nào thật sự được click.

Huỷ hàm thực hiện mặc định với event

Một số Event JavaScript có sẵn hàm thực hiện mặc định. Ví dụ: khi bạn click vào một link thì bạn sẽ được chuyển hướng đến trang của link đó, hay khi bạn click chuột phải thì sẽ có một context menu hiện ra,... Tuy nhiên, nếu bạn không muốn thực hiện những hàm mặc định đó thì bạn có thể sử dụng phương thức preventDefault. Ví dụ:

<a href="https://developer.mozilla.org/">MDN</a>
<script>
  var link = document.querySelector("a");
  link.addEventListener("click", function(event) {
    console.log("Nope.");
    event.preventDefault();
  });
</script>

Trong ví dụ trên, khi bạn nhấn vào link thì bạn sẽ không được chuyển đến trang https://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 keydownkeyup 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:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Lam Pham

23 bài viết.
39 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
24 10
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...
Lam Pham viết 6 tháng trước
24 10
White
13 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ả...
Lam Pham viết 6 tháng trước
13 6
White
13 2
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...
Lam Pham viết 2 tháng trước
13 2
Bài viết liên quan
White
43 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...
Huy Hoàng Phạm viết hơn 2 năm trước
43 8
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
23 bài viết.
39 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!