Bắt sự kiện nhấn phím trong js

Đối với từng trang web, đặc biệt là những trang web có sự tương tác với những người dùng, câu hỏi xử lý sự kiện chuột và keyboard là quan trọng thiếu. Do vậy, nội dung bài viết này bản thân sẽ giới thiệu với các bạn cách cách xử lý một số sự kiện JavaScript cơ bản. Qua đó, bạn có thể tiếp tục mày mò và quản lý về JS event.

Bạn đang xem: Bắt sự kiện nhấn phím trong js

Cách đk và huỷ đăng ký sự kiện JavaScript

Đăng ký sự kiện JavaScript

Ở bài viết trước về DOM, các bạn biết rằng mỗi thành phần trên trang web là một trong những node. Và chúng ta có thể đăng ký kết nhận sự kiện cho mỗi node này bằng phương pháp 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 như bạn không ghi gì thì mặc node chính là document.Tên sự kiện: ứng với việc kiện mà bạn có nhu cầu 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 1 JS event, bạn cũng có thể đăng ký các hàm xử lý. Lúc đó, hàm đk trước sẽ tiến hành 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ụ như trên, mình đã đăng kí sự khiếu nại click cho document với hai hàm cách xử lý là func1 cùng func2. Trường đoản cú nay, mỗi khi bạn bấm chuột trái vào trang web thì hàm func1 sẽ được gọi trước, tiếp đến đến hàm func2.

Huỷ đăng ký sự kiện JavaScript

Tương tự, để huỷ event trong JavaScript đã đăng ký, chúng ta cũng 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 lấy một ví dụ trên, giả dụ mình huỷ đăng ký sự kiện click trên document với hàm func1 bởi phương thức sau:


removeEventListener("click", func1);
Thì bây giờ, mỗi khi bạn bấm vào trái vào trang web, chỉ tất cả hàm func2 được gọi.

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

Bình thường để đăng ký event trong JavaScript cho các node chúng ta có thể sử dụng phương thức addEventListener cho từng node. Mặc dù nhiên, bạn có thể chỉ cần áp dụng phương thức trên 1 lần và áp dụng thuộc tính target của đối tượng người dùng event để rõ ràng node được gọi.

Hãy xem ví dụ như sau:


button>Abutton>button>Bbutton>button>Cbutton>p>Hellop>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 lấy ví dụ trên, mình chỉ cần gọi phương thức addEventListener một lần. Sau đó, mình chỉ việc sử dụng event.target.nodeName để hiểu rằng node nào thật sự được click.

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

Một số sự kiện JavaScript gồm sẵn hàm tiến hành mặc định. Ví dụ: khi chúng ta click vào trong 1 link thì các bạn sẽ được chuyển hướng đến trang của links đó, tuyệt khi bạn bấm vào phải thì sẽ sở hữu một context menu hiện nay ra,...

Xem thêm: Xem Phim Hoàng Hôn Dịu Dàng (52 Tập), Hoàng Hôn Dịu Dàng

Tuy nhiên, nếu như bạn không muốn tiến hành những hàm mang định kia thì chúng ta có thể sử dụng thủ tục preventDefault.

Ví dụ:


a href="https://developer.mozilla.org/">MDNa>script> var link = document.querySelector("a"); link.addEventListener("click", function (event) console.log("Nope."); event.preventDefault(); );script>
Trong lấy một ví dụ trên, khi bạn nhấn vào liên kết thì bạn sẽ không được chuyển mang đến trang https://developer.mozilla.org.

Một số sự kiện JavaScript cơ bản

Key event

Key sự kiện 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 chúng ta nhấn xuống một keykeyup: được gọi khi bạn nhả key đó rakeypress: được gọi khi chúng ta nhấn cùng 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ụ như này, mình ghi ra quý giá keyCode của phím được dấn dựa vào đối tượng người sử dụ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ự khiếu nại keydownkeyup thì giá trị sẽ ứng với chữ cái thường, trong những khi sự kiện keypress thì ta sẽ sở hữu giá trị của chữ cái viết hoa. Có nghĩa là nếu chúng ta nhấn phím "a" thì công dụng sẽ là:


keydown 65keypress 97keyup 65
Ngoài ra chúng ta có thể xử lý việc nhấn tổ hợp phím như lấy ví dụ như 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 dịch chuyển chuột. Một trong những sự kiện với con chuột là:

click: được gọi khi chúng ta nhấn con chuột 1 lầndblclick: được gọi khi bạn nhấn chuột nhanh 2 lầnmousedown: được gọi khi bạn nhấn con chuột xuốngmouseup: được gọi khi chúng ta nhả chuột ramousemove: được gọi khi bạn nhấn và kéo chuột...

Đối với việc kiện nhận chuột, có rất nhiều bài toán mà các bạn sẽ cần bắt buộc xác định vị trí nhận chuột, kéo chuột,... Mình sẽ ra mắt với bạn ở một nội dung bài viết khác sau.

Kết luận

Trên đây là một số cách xử lý sự kiện JavaScript cơ bản. Mình rất có thể tóm tắt lại như sau:

addEventListener : đk sự kiệnremoveEventListener : huỷ đăng ký sự kiệnpreventDefault: vứt đi hàm xử lý mặc định với việc kiệnMột số sự khiếu nại với key: keydown, keyup, keypress,...Một số sự kiện với mouse: click, dbclick, mousedown, mouseup, mousemove,...

Hy vọng chúng ta cũng có thể nắm được những kiến thức cơ bạn dạng về JS event.

Xin xin chào và hẹn chạm mặt lại bạn ở nội dung bài viết tiếp theo, thân ái!

Tham khảo


★ nếu như bạn thấy nội dung bài viết này hay thì nên theo dõi mình trên Facebook để dìm được thông tin khi có bài viết mới duy nhất nhé:


JavaScript
DOM, Event
Cơ phiên bản về DOM JavaScript - DOM là gì?
HTML String sang DOM Node với DOMParser
Chia sẻ:

Bình luận


Bài viết new cập nhật


Phân biệt var cùng let trong JavaScriptArrow function là gì?Function expression vào JavaScriptHàm là gì? Hàm vào JavaScriptVòng lặp trong JavaScriptSwitch - Case vào JavaScriptToán tử Nullish Coalescing (??) trong JSHàm alert, confirm cùng prompt

Freebie new cập nhật


18 trang web tải không lấy phí icon SVG cho cá nhân và yêu mến mại10 website tạo palette màu cực tốt10 website tải ảnh miễn phí quality cao10 cỗ icon miễn phí giành cho dân IT10 Figma templates mang đến web và di động miễn phí10 hosting miễn tổn phí cho web tĩnh
Cơ bản về DOM JavaScript - DOM là gì?JavaScript Service Worker cơ bảnLập trình JavaScript với FCC - Wikipedia ViewerHọc React qua lấy một ví dụ #1: Slideshow
*

Complete JavaScript là trang blog về lập trình - chuyên share kiến thức về xây dựng JavaScript, một trong những thư viện/framework Javascript (React.js, Gatsby.js,...) cùng những kỹ năng và kiến thức khác liên quan đến lập trình sẵn web (HTML, CSS,...).


Mạng xã hội
Dự án cá nhân
Gatsby Blog TemplateShiba.cssTic Tac ToeReact ứng dụng TemplateMarkdown EditorNinePatch.jsDrum MachinePomodoro ClockBasic Calculator
Các trang web
Blog Thuật toánLam Dev BlogLam Pham BlogAmazing CSSPortfolioMy android AppsCộng đồng JavaScriptFanpage
Tài nguyên
JavaScriptReactThủ thuật ITCuộc sống ITFreebieBlogTags
Trang chủGiới thiệuLiên hệDịch vụHire me on UpworkĐiều khoảnChính sách