Xử Lý Sự Kiện (Event) Trong Javascript - Openplanning

Trang chủ » Số Event » Xử Lý Sự Kiện (Event) Trong Javascript - Openplanning

Có thể bạn quan tâm

  • Tất cả tài liệu
  • Java
    • Java Basic
    • Java Collections Framework
    • Java IO
    • Java New IO
    • Java Date Time
    • Servlet/JSP
    • Eclipse Tech
      • SWT
      • RCP
      • RAP
      • Eclipse Plugin Tools
    • XML & HTML
    • Java Opensource
    • Java Application Servers
  • Maven
  • Gradle
  • Servlet/Jsp
  • Thymeleaf
  • Spring
    • Spring Boot
    • Spring Cloud
  • Struts2
  • Hibernate
  • Java Web Service
  • JavaFX
  • SWT
  • Oracle ADF
  • Android
  • iOS
  • Python
  • Swift
  • C#
  • C/C++
  • Ruby
  • Dart
  • Batch
  • Database
    • Oracle
    • MySQL
    • SQL Server
    • PostGres
    • Other Database
  • Oracle APEX
  • Report
  • Client
  • ECMAScript / Javascript
  • TypeScript
  • NodeJS
  • ReactJS
  • Flutter
  • AngularJS
  • HTML
  • CSS
  • Bootstrap
  • OS
    • Ubuntu
    • Solaris
    • Mac OS
  • VPS
  • Git
  • SAP
  • Amazon AWS
  • Khác
    • Chưa phân loại
    • Phần mềm & ứng dụng tiện ích
    • VirtualBox
    • VmWare
Xử lý sự kiện (Event) trong Javascript
  1. Javascript Events
  2. Ví dụ với các sự kiện

1. Javascript Events

Sự kiện (event) là một tín hiệu cho thấy một cái gì đó đã xẩy ra. Chẳng hạn bạn nhấn chuột vào một nút (button), hoặc bạn đóng trình duyệt,.. Tất cả các node của DOM phát ra (generate) các tín hiệu như vậy, nhưng có những sự kiện khác ngoài DOM chẳng hạn sự kiện bạn đóng cửa sổ trình duyệt.Dưới đây là danh sách các sự kiện DOM hữu ích nhất:Các sự kiện chuột (Mouse):
Sự kiệnMô tả
clickSự kiện xẩy ra khi người dùng nhấp (click) trên một phần tử (element).
contextmenuSự kiện xẩy ra khi người dùng nhấn phải chuột (right-clicks) vào phần tử để mở ra một context-menu.
dblclickSự kiện xẩy ra khi người dùng nhấn kép (double-clicks) trên một phần tử.
mousedownSự kiện xẩy ra khi người dùng nhấn một nút chuột lên trên một phần tử.
mouseupSự kiện xẩy ra khi người dùng nhả tay ra khỏi nút của chuột đang nhấn trên một phần tử.
mouseenterSự kiện xẩy ra khi con trỏ (pointer) di chuyển vào một phần tử.
mouseleaveSự kiện xẩy ra khi con trỏ (pointer) di chuyển ra khỏi một phần tử.
mousemoveSự kiện xẩy ra khi con trỏ di chuyển trên bề mặt của phần tử.
mouseoutSư kiện xẩy ra khi người dùng di chuyển con trỏ ra khỏi một phần tử hoặc ra khỏi một trong những phần tử con của nó.
mouseoverSự kiện xẩy ra khi người dùng di chuyển con trỏ vào một phần tử hoặc di chuyển vào một trong các phần tử con của nó.
Sự kiện của các phần tử Form.
EventMô tả
submitKhi người dùng submit (Gửi đi) nội dung của <form>.
focusKhi người dùng tập trung (focus) vào một phần tử, ví dụ <input>.
blurKhi người dùng rời khỏi một phần tử, ví dụ <input>.
Sự kiện bàn phím:
EventMô tả
keydownSự kiện xẩy ra khi người dùng nhấn một phím (key) xuống.
keyupSự kiện xẩy ra khi người dùng nhả tay ra khỏi một phím.
keypressSự kiện xẩy ra khi người dùng nhấn (press) vào phím (Hoàn thành 2 hành động, nhấn xuống và nhả ra).
Các sự kiện của Document.
EventMô tả
DOMContentLoadedKhi mà nội dung HTML đã được tải (loaded) và đã được xử lý. Mô hình DOM đã được tạo ra hoàn chỉnh.
Các sự kiện CSS:
EventMô tả
animationstartSự kiện xẩy ra khi quá trình hoàn hình CSS bắt đầu.
animationendSự kiện xẩy ra khi quá trình hoạt hình CSS hoàn thành.
animationiterationSự kiện xẩy ra khi quá trình hoạt hình CSS lặp lại.
Xử lý sự kiện:Để xử lý sự kiện, bạn cần phải gắn sự kiện với một bộ xử lý (handler), Bộ xử lý có thể là một hàm. Khi sự kiện xẩy ra bộ xử lý sẽ được gọi để hoạt động. Bộ xử lý (handler) là cách để chạy các mã Javascript tương ứng với các hành động của người dùng.Bộ xử lý (handler) có thể được sét trong HTML với thuộc tính (attribute) on{event}. Chẳng hạn sự kiện click:<input value="Click me" onclick="alert('Click!')" type="button"> <input value="Click me" onclick="someFunction()" type="button">Đối tượng this đại diện cho phần tử phát ra sự kiện.<input value="Click me" onclick="someFunction(this)" type="button">Khi sự kiện xẩy ra, Javascript tạo ra đối tượng event và bạn có thể sử dụng nó như một giá trị của tham số.<input value="Click me" onclick="someFunction(event)" type="button">Bạn cũng có thể truy cập vào phần tử phát ra sự kiện thông qua đối tượng event.var target = event.target;

2. Ví dụ với các sự kiện

Sự kiện đơn giản và hay bắt gặp là sự kiện người dùng nhấp chuột (click) trên một phần tử. Dưới đây là một ví dụ đơn giản, người dùng nhấn vào nút "=" để tính tổng 2 số.onclick-example.html<!DOCTYPE html> <html> <head> <title>Hello Javascript</title> <script type = "text/javascript"> function doCalculate() { var a = document.getElementById("a").value; // A String value var b = document.getElementById("b").value; // A String value var c = Number(a) + Number(b); document.getElementById("c").value = c; } </script> </head> <body> <h3>Click Event example</h3> <input id = "a" type="text" value= "100"/> <br/> + <br/> <input id = "b" type="text" value = "200"/> <br/> <button onclick="doCalculate()"> = </button> <br/> <input id = "c" type="text" value = ""/> </body> </html>-Đối tượng this chính là phần tử phát ra sự kiện. Bạn có thể truyền (pass) đối tượng này vào hàm xử lý sự kiện.this-obj-example.html<!DOCTYPE html> <html> <head> <title>Event Example</title> <script type = "text/javascript"> function changeSize(target) { var random = Math.round(Math.random() * 100) + 200; target.style.width = random + "px"; target.style.height = random + "px"; } </script> </head> <body> <h3>Event with 'this' object</h3> <button onclick="changeSize(this)">Click Me to Change Size</button> </body> </html>-Khi sự kiện xẩy ra một đối tượng event được Javascript tạo ra, nó chứa các thông tin liên quan tới sự kiện. Ví dụ với sự kiện chuột đối tượng event có thể chứa các thông tin như vị trí chuột so với trình duyệt, vị trí chuột so với phần tử phát ra sự kiện,... Bạn có thể sử dụng đối tượng event để truyền vào (pass) hàm xử lý sự kiện.<input value="Click me" onclick="someFunction(event)" type="button">mouse-events-example.html<!DOCTYPE html> <html> <head> <title>Javascript Mouse Events</title> <script src="mouse-events-example.js"></script> <style> .my-div { width: 290px; height: 100px; background: blue; } </style> </head> <body> <h3>Mouse Events (Enter, Move, Leave)</h3> <div class="my-div" onmouseenter="mouseenterHandler(event)" onmouseleave="mouseleaveHandler(event)" onmousemove="mousemoveHandler(event)"> </div> <h3>Mouse position</h3> <div style="color:red;" id="position-div"> </div> <h3>Statistics</h3> <div style="color:red;" id="statistics-div"> </div> </body> </html>mouse-events-example.jsvar enterCount = 0; var moveCount = 0; var leaveCount = 0; function mouseleaveHandler(evt) { leaveCount += 1; showPosition(evt); showStatistics(); } function mouseenterHandler(evt) { enterCount += 1; showPosition(evt); showStatistics(); } function mousemoveHandler(evt) { moveCount += 1; showPosition(evt); showStatistics(); } function showPosition(evt) { var html = "offsetX: " + evt.offsetX +"<br/>" // + "offsetY: " + evt.offsetY; document.getElementById("position-div").innerHTML = html; } function showStatistics() { var html = "enterCount:" + enterCount + "<br/>" // + "moveCount:" + moveCount + "<br/>" // + "leaveCount:" + leaveCount; document.getElementById("statistics-div").innerHTML = html; }-Bạn có thể truy cập vào phần tử phát ra sự kiện thông qua đối tượng event.event-obj-example.html<!DOCTYPE html> <html> <head> <title>Event Example</title> <script type = "text/javascript"> function changeSize(evt) { var target = evt.target; var random = Math.round(Math.random() * 100) + 100; target.style.width = random + "px"; target.style.height = random + "px"; } </script> </head> <body> <h3>Access 'target' object via 'event' object</h3> <button onclick="changeSize(event)">Click Me to Change Size</button> </body> </html>-Ví dụ một hàm xử lý với nhiều tham số.multi-params-example.html<!DOCTYPE html> <html> <head> <title>Event Example</title> <script type = "text/javascript"> function changeSize(borderColor, target, evt, bgColor) { var random = Math.round(Math.random() * 100) + 100; target.style.width = random + "px"; target.style.height = random + "px"; target.style.borderColor = borderColor; target.style.backgroundColor = bgColor; } </script> </head> <body> <h3>A Handler has multiple parameters</h3> <a href="">Reset</a> <br/><br/> <button onclick="changeSize('red', this, event, 'green')">Click Me</button> </body> </html>

Các hướng dẫn ECMAScript, Javascript

  • Giới thiệu về Javascript và ECMAScript
  • Bắt đầu nhanh với Javascript
  • Hộp thoại Alert, Confirm, Prompt trong Javascript
  • Bắt đầu nhanh với JavaScript
  • Biến (Variable) trong JavaScript
  • Các toán tử Bitwise
  • Mảng (Array) trong JavaScript
  • Vòng lặp trong JavaScript
  • Hàm trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Number
  • Hướng dẫn và ví dụ JavaScript Boolean
  • Hướng dẫn và ví dụ JavaScript String
  • Câu lệnh rẽ nhánh if/else trong JavaScript
  • Câu lệnh rẽ nhánh switch trong JavaScript
  • Hướng dẫn xử lý lỗi trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Date
  • Hướng dẫn và ví dụ JavaScript Module
  • Lịch sử phát triển của module trong JavaScript
  • Hàm setTimeout và setInterval trong JavaScript
  • Hướng dẫn và ví dụ Javascript Form Validation
  • Hướng dẫn và ví dụ JavaScript Web Cookie
  • Từ khóa void trong JavaScript
  • Lớp và đối tượng trong JavaScript
  • Kỹ thuật mô phỏng lớp và kế thừa trong JavaScript
  • Thừa kế và đa hình trong JavaScript
  • Tìm hiểu về Duck Typing trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Symbol
  • Hướng dẫn JavaScript Set Collection
  • Hướng dẫn JavaScript Map Collection
  • Tìm hiểu về JavaScript Iterable và Iterator
  • Hướng dẫn sử dụng biểu thức chính quy trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Promise, Async Await
  • Hướng dẫn và ví dụ Javascript Window
  • Hướng dẫn và ví dụ Javascript Console
  • Hướng dẫn và ví dụ Javascript Screen
  • Hướng dẫn và ví dụ Javascript Navigator
  • Hướng dẫn và ví dụ Javascript Geolocation API
  • Hướng dẫn và ví dụ Javascript Location
  • Hướng dẫn và ví dụ Javascript History API
  • Hướng dẫn và ví dụ Javascript Statusbar
  • Hướng dẫn và ví dụ Javascript Locationbar
  • Hướng dẫn và ví dụ Javascript Scrollbars
  • Hướng dẫn và ví dụ Javascript Menubar
  • Hướng dẫn xử lý JSON trong JavaScript
  • Xử lý sự kiện (Event) trong Javascript
  • Hướng dẫn và ví dụ Javascript MouseEvent
  • Hướng dẫn và ví dụ Javascript WheelEvent
  • Hướng dẫn và ví dụ Javascript KeyboardEvent
  • Hướng dẫn và ví dụ Javascript FocusEvent
  • Hướng dẫn và ví dụ Javascript InputEvent
  • Hướng dẫn và ví dụ Javascript ChangeEvent
  • Hướng dẫn và ví dụ Javascript DragEvent
  • Hướng dẫn và ví dụ Javascript HashChangeEvent
  • Hướng dẫn và ví dụ Javascript URL Encoding
  • Hướng dẫn và ví dụ Javascript FileReader
  • Hướng dẫn và ví dụ Javascript XMLHttpRequest
  • Hướng dẫn và ví dụ Javascript Fetch API
  • Phân tích XML trong Javascript với DOMParser
  • Giới thiệu về Javascript HTML5 Canvas API
  • Làm nổi bật Code với thư viện Javascript SyntaxHighlighter
  • Polyfill là gì trong khoa học lập trình?
Show More
  • Các hướng dẫn HTML
  • Các hướng dẫn CSS
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn TypeScript
  • Các hướng dẫn lập trình Dart

Các hướng dẫn ECMAScript, Javascript

  • Giới thiệu về Javascript và ECMAScript
  • Bắt đầu nhanh với Javascript
  • Hộp thoại Alert, Confirm, Prompt trong Javascript
  • Bắt đầu nhanh với JavaScript
  • Biến (Variable) trong JavaScript
  • Các toán tử Bitwise
  • Mảng (Array) trong JavaScript
  • Vòng lặp trong JavaScript
  • Hàm trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Number
  • Hướng dẫn và ví dụ JavaScript Boolean
  • Hướng dẫn và ví dụ JavaScript String
  • Câu lệnh rẽ nhánh if/else trong JavaScript
  • Câu lệnh rẽ nhánh switch trong JavaScript
  • Hướng dẫn xử lý lỗi trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Date
  • Hướng dẫn và ví dụ JavaScript Module
  • Lịch sử phát triển của module trong JavaScript
  • Hàm setTimeout và setInterval trong JavaScript
  • Hướng dẫn và ví dụ Javascript Form Validation
  • Hướng dẫn và ví dụ JavaScript Web Cookie
  • Từ khóa void trong JavaScript
  • Lớp và đối tượng trong JavaScript
  • Kỹ thuật mô phỏng lớp và kế thừa trong JavaScript
  • Thừa kế và đa hình trong JavaScript
  • Tìm hiểu về Duck Typing trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Symbol
  • Hướng dẫn JavaScript Set Collection
  • Hướng dẫn JavaScript Map Collection
  • Tìm hiểu về JavaScript Iterable và Iterator
  • Hướng dẫn sử dụng biểu thức chính quy trong JavaScript
  • Hướng dẫn và ví dụ JavaScript Promise, Async Await
  • Hướng dẫn và ví dụ Javascript Window
  • Hướng dẫn và ví dụ Javascript Console
  • Hướng dẫn và ví dụ Javascript Screen
  • Hướng dẫn và ví dụ Javascript Navigator
  • Hướng dẫn và ví dụ Javascript Geolocation API
  • Hướng dẫn và ví dụ Javascript Location
  • Hướng dẫn và ví dụ Javascript History API
  • Hướng dẫn và ví dụ Javascript Statusbar
  • Hướng dẫn và ví dụ Javascript Locationbar
  • Hướng dẫn và ví dụ Javascript Scrollbars
  • Hướng dẫn và ví dụ Javascript Menubar
  • Hướng dẫn xử lý JSON trong JavaScript
  • Xử lý sự kiện (Event) trong Javascript
  • Hướng dẫn và ví dụ Javascript MouseEvent
  • Hướng dẫn và ví dụ Javascript WheelEvent
  • Hướng dẫn và ví dụ Javascript KeyboardEvent
  • Hướng dẫn và ví dụ Javascript FocusEvent
  • Hướng dẫn và ví dụ Javascript InputEvent
  • Hướng dẫn và ví dụ Javascript ChangeEvent
  • Hướng dẫn và ví dụ Javascript DragEvent
  • Hướng dẫn và ví dụ Javascript HashChangeEvent
  • Hướng dẫn và ví dụ Javascript URL Encoding
  • Hướng dẫn và ví dụ Javascript FileReader
  • Hướng dẫn và ví dụ Javascript XMLHttpRequest
  • Hướng dẫn và ví dụ Javascript Fetch API
  • Phân tích XML trong Javascript với DOMParser
  • Giới thiệu về Javascript HTML5 Canvas API
  • Làm nổi bật Code với thư viện Javascript SyntaxHighlighter
  • Polyfill là gì trong khoa học lập trình?
Show More
  • Các hướng dẫn HTML
  • Các hướng dẫn CSS
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn TypeScript
  • Các hướng dẫn lập trình Dart

Các bài viết mới nhất

  • Dart Stream Single và Broadcast
  • Xử lý lỗi trong Dart Stream
  • Hướng dẫn và ví dụ Dart Stream
  • So sánh đối tượng trong Dart với thư viện Equatable
  • Flutter BloC cho người mới bắt đầu
  • Xử lý lỗi 404 trong Flutter GetX
  • Ví dụ đăng nhập và đăng xuất với Flutter Getx
  • Hướng dẫn và ví dụ Flutter NumberTextInputFormatter
  • Hướng dẫn và ví dụ Flutter multi_dropdown
  • Hướng dẫn và ví dụ Flutter flutter_form_builder
  • Hướng dẫn và ví dụ Flutter GetX obs Obx
  • Hướng dẫn và ví dụ Flutter GetX GetBuilder
  • Từ khoá part và part of trong Dart
  • Hướng dẫn và ví dụ Flutter InkWell
  • Hướng dẫn và ví dụ Flutter Radio
  • Bài thực hành Flutter SharedPreferences
  • Hướng dẫn và ví dụ Flutter Slider
  • Hướng dẫn và ví dụ Flutter SkeletonLoader
  • Chỉ định cổng cố định cho Flutter Web trên Android Studio
  • Tạo Module trong Flutter
Show More
  • Các hướng dẫn ECMAScript, Javascript

Từ khóa » Số Event