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à func1 và func2. 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 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

• http://eloquentjavascript.net/14_event.html
• Bài tập thực hành: Censored keyboard, tabs.

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:

• Facebook Fanpage: Complete JavaScript
• Facebook Group: Hỏi đáp JavaScript VN
• Portfoflio : Lam Pham