11/08/2018, 20:34

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ý ...

Đố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

  • 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
Bài liên quan

Một số vấn đề cơ bản trong Laravel

Nội dung bài viết: Exception and Error Handler CSRF Protection Restful Resource Controllers Request & Responses Scope Accessors & Mutators Laravel cho phép quản lý 1 cách tập trung các exception với lớp appExceptionsHandler. Sử dụng lớp này cho phép chúng ta quản lý lỗi cũng ...

Trịnh Tiến Mạnh viết 18:14 ngày 12/08/2018

FuelPHP: Một số kiến thức cơ bản về Validation (P2)

Hôm nay mình sẽ giới thiệu tiếp đến các bạn kiến thức Validation trong FuelPHP. Nếu quên các bạn có thể tìm hiểu lại tại đây forge($fieldset = 'default') Phương thức forget() trả về một Vaidation mới, validation này liên kết Fieldset với tên $fieldset. The forge method returns a new ...

Tạ Quốc Bảo viết 17:00 ngày 12/08/2018

FuelPHP: Một số kiến thức cơ bản về Validation

The validation class giúp bạn validate đầu vào. Usage Để bắt đầu validation bạn cần phải tạo ra một object, đây có thể là object mặc định có tên "default" hoặc bạn có thể đặt tên nó nếu bạn cần nhiều object xác nhận. // Use default $val = Validation::forge(); // ... or name it $val = ...

Hoàng Hải Đăng viết 16:46 ngày 12/08/2018

Một số tính năng cơ bản trong Javascript ES6

Lời nói đầu Xin chào 500 anh em, Trong buổi seminar hôm nay mình sẽ giới thiệu về những điểm mới trong JavaScript ES6, Một phiên bản Javascript với cú pháp rất gọn, linh hoạt, dễ tiếp cận hơn phiên bản Javascript trước đó. Hiện tại đã có phiên bản JavaScript ES7,ES8 và sắp tới sẽ có phiên bản ...

Tạ Quốc Bảo viết 16:01 ngày 12/08/2018

Sử dụng JQuery Ajax với một số chức năng cơ bản

Giới thiệu chung AJAX ( A synchronous J avaScript A nd X ML) là một kỹ thuật phát triển web có tính tương tác cao thông qua việc kết hợp các công nghệ: XML, HTML, CSS và JavaScript. Trong đó: HTML (hoặc XHTML) với CSStrong việc hiển thị thông tin Mô hình DOM (Document Object Model), được ...

Trịnh Tiến Mạnh viết 15:27 ngày 12/08/2018
0