Dom EventHandler Trong JavaScript - Lập Trình Từ Đầu

Trang chủ » Phần Tử Html Nào Có Thể Sử Dụng đến Sự Kiện Onmouseup » Dom EventHandler Trong JavaScript - Lập Trình Từ Đầu

Có thể bạn quan tâm

1. Dom EventHandler trong JavaScript là gì?

Dom EventHandler – trình xử lý sự kiện. Nó có nghĩa là sẽ thực hiện nhiệm vụ mà ta đưa ra. Đây là các hành động nhằm tạo ra các trang web động / tương tác, hồi đáp lại cho người dùng bằng Js.

Như bài trước chúng ta đã học về Event – sự kiện . Ta cũng đã nắm được cơ bản về khái niệm sự kiện rồi. Bài này ta sẽ được biết về danh sách các sự kiện trong Js. Và do trong Js có rất nhiều sự kiện khác nhau. Mỗi đối tượng HTML cũng có những sự kiện khác nhau nên bài này mình sẽ chỉ liệt kê và đưa ra một vài ví dụ về những sự kiện hay dùng thôi nhé.

Theo quy ước, tên của trình xử lý sự kiện luôn bắt đầu bằng từ on , do đó, trình xử lý sự kiện cho sự kiện nhấp được gọi là onclick , tương tự như trình xử lý sự kiện cho sự kiện tải được gọi là onload , trình xử lý sự kiện cho sự kiện mờ được gọi là onblur , …

Bảng các sự kiện hay dùng trong Js:

Tên Event Mô tả
onclick Xảy ra khi click vào thẻ HTML
onclick Xảy ra khi click vào thẻ HTML
onchange Xảy ra khi giá trị (value) của thẻ HTML đổi. Thường dùng trong các đối thẻ form input
onmouseover Xảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTML
onmouseout Xảy ra khi con trỏ chuột bắt đầu rời khỏi thẻ HTML
onmouseenter Tương tự như onmouseover
onmouseleave Tương tự như onmouseout
onmousemove Xảy ra khi con chuột di chuyển bên trong thẻ HTML
onkeydown Xảy ra khi gõ một phím bất kì vào ô input
onload Sảy ra khi thẻ HTML bắt đầu chạy, nó giống như hàm khởi tạo trong lập trình hướng đối tượng vậy đó.
onkeyup Xảy ra khi bạn gõ phím nhưng lúc bạn nhã phím ra sẽ được kích hoạt
onkeypress Xảy ra khi bạn nhấn môt phím vào ô input
onblur Xảy ra khi con trỏ chuột rời khỏi ô input
oncopy Xảy ra khi bạn copy nội dung của thẻ
oncut Xảy ra khi bạn cắt nội dung của thẻ
onpaste Xảy ra khi bạn dán nội dung vào thẻ

Có một số cách để chỉ định một trình xử lý sự kiện. Cách đơn giản nhất là thêm chúng trực tiếp vào thẻ bắt đầu của các thành phần HTML bằng cách sử dụng các thuộc tính xử lý sự kiện đặc biệt. Tuy nhiên, để giữ Js tách biệt khỏi HTML, ta nên thiết lập trình xử lý sự kiện trong tệp Js bên ngoài hoặc trong các thẻ script

<button type="button" id="myBtn">Click Me</button> <script> function sayHello() { alert('Hello World!'); } document.getElementById("myBtn").onclick = sayHello; </script>

Do các thuộc tính HTML không phân biệt chữ hoa chữ thường nên onclick cũng có thể được viết dưới dạng onClick, OnClick hoặc ONCLICK. Nhưng giá trị của nó lại là trường hợp phân biệt hoa thường.

Nói chung lại nó được phân thành 4 nhóm chính

  • Sự kiện về chuột
  • Sự kiện về bàn phím
  • Sự kiện biểu mẫu
  • Sự kiện Document / Window
2. Sự kiện Onclick trong JavaScript

Js có thể thực thi một sự kiện xảy ra. Nó giống như việc khi người dùng ấn chọn vào một phần tử HTML vậy. Và để có thể thực thi được đoạn mã khi người dùng chọn một phần tử, ta sẽ sử dụng onclick

Ví dụ các sự kiện HTML:

  • Khi người dùng nhấp chuột
  • Khi một trang web đã tải
  • Khi một hình ảnh đã được tải
  • Khi chuột di chuyển qua một phần tử
  • Khi một trường đầu vào được thay đổi
  • Khi một biểu mẫu HTML được gửi đi
  • Khi người dùng gõ phím

Ví dụ: nội dung của thẻ <h1> sẽ thay đổi khi người dùng chọn nó

<!DOCTYPE html> <html> <body> <h2>JavaScript Dom</h2> <h2 onclick="this.innerHTML='laptrinhtudau.com'">Chọn phần này đi!</h2> </body> </html>

Hay một ví dụ khác về một hàm được gọi từ trình quản lý sự kiện:

<!DOCTYPE html> <html> <body> <h2>JavaScript HTML Events</h2> <h2 onclick="changeText(this)">Chọn phần này đi!</h2> <script> function changeText(id) { id.innerHTML = "laptrinhtudau.com"; } </script> </body> </html>

Để gán sự kiện cho các phần tử HTML, ta có thể sử dụng các thuộc tính sự kiện

<!DOCTYPE html> <html> <body> <h2>JavaScript HTML Events</h2> <p>Click the button to display the date.</p> <button onclick="displayDate()">Hôm này là bao nhiêu?</button> <script> function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> <p id="demo"></p> </body> </html>

Trong ví dụ trên, một hàm có tên displayDate sẽ được thực thi khi nút được chọn.

HTML DOM cho phép ta chỉ định các sự kiện cho các phần tử HTML bằng Js:

<!DOCTYPE html> <html> <body> <h2>JavaScript HTML Events</h2> <p>Nhấp vào "Dùng thử" để thực thi hàm displayDate ().</p> <button id="myBtn">Dùng thử</button> <p id="demo"></p> <script> document.getElementById("myBtn").onclick = displayDate; function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> </body> </html>

Trong ví dụ trên, một hàm có tên displayDate được gán cho một phần tử HTML với id=”myBtn” . Chức năng sẽ được thực hiện khi nút được nhấp.

3. Sự kiện Onload và Onunload trong JavaScript

Sự kiện onload và onunload được kích hoạt khi người dùng truy cập hoặc rời khỏi trang. Sự kiện onload có thể được sử dụng để kiểm tra loại trình duyệt và phiên bản trình duyệt của khách truy cập. Đồng thời tải phiên bản phù hợp của trang web dựa trên thông tin. Sự kiện onload và onunload có thể được sử dụng để xử lý cookie.

<!DOCTYPE html> <html> <body onload="checkCookies()"> <h2>JavaScript HTML Events</h2> <p id="demo"></p> <script> function checkCookies() { var text = ""; if (navigator.cookieEnabled == true) { text = "Đã bật cookie."; } else { text = "Cookie không được kích hoạt."; } document.getElementById("demo").innerHTML = text; } </script> </body> </html>

Sử dụng onunload để hủy tải trang

<body onunload="alert('Bạn có chắc chắn muốn rời trang này?');"> <h1>Trang web của tôi</h1> <p>Đây là nội dung trang web của tôi.</p> </body> 4. Sự kiện Onchange trong JavaScript

Sự kiện onchange thường được sử dụng với việc xác nhận các trường đầu vào.

Ví dụ: Hàm upperCase() sẽ được gọi khi người dùng thay đổi nội dung của trường đầu vào

<!DOCTYPE html> <html> <body> <h2>JavaScript Dom</h2> Nhập gì đó: <input type="text" id="fname" onchange="upperCase()"> <p>Khi bạn rời khỏi trường nhập, một hàm được kích hoạt để chuyển văn bản đầu vào thành chữ hoa.</p> <script> function upperCase() { const x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </body> </html> 5. Sự kiện onmouseover và onmouseout trong JavaScript

Sự kiện onmouseover và onmouseout có thể được sử dụng để kích hoạt một chức năng khi người dùng di chuyển qua hoặc rời khỏi phần tử HTML.

<!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;"> Mouse Over Me</div> <script> function mOver(obj) { obj.innerHTML = "Thank You" } function mOut(obj) { obj.innerHTML = "Di chuột qua tôi nè" } </script> </body> </html> 6. Sự kiện onmousedown, onmouseup và onclick

Các sự kiện onmousedown , onmouseup và onclick đều là các phần của một cú nhấp chuột. Đầu tiên khi một nút chuột được nhấp, sự kiện onmousedown được kích hoạt. Sau đó, khi thả nút chuột, sự kiện onmouseup được kích hoạt. Và cuối cùng, khi nhấp chuột hoàn tất, sự kiện onclick được kích hoạt.

Ví dụ:

<!DOCTYPE html> <html> <body> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;"> Bấm và giữ thử vào đây đi</div> <script> function mDown(obj) { obj.style.backgroundColor = "#1ec5e5"; obj.innerHTML = "Thank you"; } function mUp(obj) { obj.style.backgroundColor="#D94A38"; obj.innerHTML="Laptrinhtudau.com"; } </script> </body> </html> 7. Một số ví dụ về những sự kiện khác

Sử dụng onfocus thay đổi màu nền của trường nhập liệu khi nó được chọn.

<!DOCTYPE html> <html> <head> <script> function myFunction(x) { x.style.background = "yellow"; } </script> </head> <body> Nhập gì đó: <input type="text" onfocus="myFunction(this)"> <p>Khi trường nhập được chọn, một chức năng được kích hoạt làm thay đổi màu nền.</p> </body> </html>

Ta có thể sử dụng onkeyup để hiển thị nội dung được nhập vào. Ngoài ra chúng ta sẽ sử dụng các hàm DOM Element để truy xuất các đối tượng HTML.

<html> <body> <script language="javascript"> // Hàm show kết quả function show_result() { // Lấy hai thẻ HTML var input = document.getElementById("message"); var div = document.getElementById("result"); // Gán nội dung ô input vào thẻ div div.innerHTML = input.value; } </script> <input type="text" id="message" value="" onkeyup="show_result()"/> <div id="result"></div> </body> </html>

Nếu như bài này ta sử dụng sự kiện onkeypress hoặc onkeydown thì sẽ có kết quả sai. Lý do là những sự kiện này xảy ra khi nhấn phím xuống nên nó sẽ lấy giá trị chưa được cập nhật. Còn sự kiện onkeyup xảy ra khi bạn nhả phím ra nên nó sẽ lấy được giá trị mới.

Sử dụng oncopy hiển thị sau khi ta coppy thành công

<html> <body> <script language="javascript"> // Hàm show kết quả function show_message() { alert("Bạn đã copy thành công"); } </script> <h3>Hãy copy dòng chữ dưới đây:</h3> <div oncopy="show_message()">Chào mừng đến với laptrinhtudau.com</div> </body> </html>

Sử dụng onkeyup để tính tổng của 2 số nhập vào

<html> <body> <script language="javascript"> // Hàm tính kết quả function tinh() { // Lấy 3 ô input var a = document.getElementById("a"); var b = document.getElementById("b"); var result = document.getElementById("result"); // Tính tổng hai ô đầu tiên var tong = parseInt(a.value) + parseInt(b.value); // Gán giá trị vào ô thứ ba // Phải kiểm tra tổng hai số này có bị lỗi hay không if (!isNaN(tong)){ result.value = tong; } } </script> a: <input type="text" id="a" value="" onkeyup="tinh()"/> b: <input type="text" id="b" value="" onkeyup="tinh()"/> Kết quả: <input type="text" id="result" value=""/> </body> </html>

Từ khóa » Phần Tử Html Nào Có Thể Sử Dụng đến Sự Kiện Onmouseup