Đó, bây giờ chúng ta sẽ sử dụng JavaScript để xử lý một số sự kiện phổ biến của DOM nhé.
3.1. Chèn vào thuộc tính sự kiện của HTML DOM
Cú pháp tổng quát để thêm một sự kiện mới vào một phần tử HTML như sau:
document.method().events = function() {
// Khối lệnh thực thi
}
Trong đó:
-
method(): Là hàm xử lý DOM để chỉ định một phần tử HTML
-
events: Là tên sự kiện sẽ được thực thi (tham khảo sự kiện ở bảng trên)
-
function(){ ... }: Là code JavaScript mà khi sự kiện được kích hoạt thì hàm này sẽ thực thi.
Ví dụ: Chọn đến button có id là btn và thêm vào đó một sự kiện onclick
<button id="btn">Click vào đây</button>
<script>
document.getElementById("btn").onclick = function() {
alert("Bạn đã click vào một phần tử trong HTML DOM");
};
</script>
Chúng ta được kết quả giống với ví dụ đầu tiên.
Nhưng ở đây mình thêm sự kiện bằng JavaScript DOM
Đối với các phần tử HTML mà có nhiều hơn 1 lựa chọn thì bạn cần phải chạy vòng lặp để thêm sự kiện cho nó.
Ví dụ, ta có HTML:
<ul>
<li class="menu">JAVA</li>
<li class="menu">JAVASCRIPT</li>
<li class="menu">PHP</li>
<li class="menu">PYTHON</li>
</ul>
Bây giờ, thực hiện lắng nghe sự kiện click chuột của người dùng. Nếu click vào khóa học nào thì màu của khóa học đó đổi thành màu đỏ.
// Lấy các phần tử có class là menu
let x = document.getElementsByClassName("menu");
// Lặp qua các phần tử có class là menu
for (let i = 0; i < x.length; i++) {
// Lắng nghe sự kiện click
// và đổi màu chữ thành màu đỏ
x[i].onclick = function() {
this.style.color = "red";
};
}
Ở đây bạn thấy mình sử dụng từ khóa this. Từ khóa này mình sẽ giải thích ở một bài khác.
Bây giờ bạn chỉ cần hiểu hoạt động này như là:
"Á À, tao bắt được mày click vào đây rồi nhá. Tô màu đỏ ngay cho thằng cho thằng này (this) thôi"
3.2. Sử dụng phương thức addEvenListener()
Phương thức này cũng cho phép ta gán sự kiện cho một phần tử HTML DOM, điểm khác các phương thức trên là có thể gán một hoặc nhiều events vào một phần tử HTML mà không xóa đi các sự kiện khác.
Khi ta sử dụng phương thức addEventsListenner(), JavaScript sẽ tách biệt nó với HTML Makup.
Bạn cũng có thể dễ dàng xóa bất kỳ event listenner bằng cách sử dụng phương thức removeEvenListenner().
Cú pháp để thêm sự kiện như sau:
element.addEventListener(event, function, useCapture);
Trong đó:
-
event: Là tên sự kiện (bạn có thể tham khảo ở bảng phía trên).
-
function: Là hàm JavaScript mà bạn muốn thực thi khi sự kiện kích hoạt.
-
useCapture: Là một giá trị boolean value cho hai lựa chọn: event bubbling hoặc event capturing.
Phương thức này cho phép bạn thêm nhiều events cho một element cùng một lúc.
Ví dụ, ta có một nút:
<button id="btn">Nhấn vào đây</button>
Bây giờ, tiếp tục viết code JS như sau:
// Tạo các hàm xử lý
function suKien1() {
alert("Lập trình JavaScript căn bản!");
}
function suKien2() {
alert("Thêm sự kiện thành công");
}
// Chọn đến nút có id là btn
let x = document.getElementById("btn");
// Thêm sự kiện
x.addEventListener("click", suKien1);
x.addEventListener("click", suKien2);
Bạn hãy thử chạy trên trình duyệt để xem kết quả.
Và ấn F12 để kiểm tra luôn xem mã HTML có thay đổi gì không nhé.
Nên sử dụng Bubbling hay Event capturing?
Có hai cách để sự kiện được lan truyền (event propagation) trong HTML DOM: bubbling và capturing.
> Khái niệm Event propagation là cách định nghĩa thứ tự của HTML element khi event xảy ra.
Ví dụ nếu ta có một phần tử <p> bên trong một phần tử <div>.
<div onclick="suKienA">
<p onclick="suKienB"></p>
</div>
Thì câu hỏi đặt ra là...
Khi người dùng click lên phần tử <p>, thì sự kiện “click” của phần tử nào sẽ được xử lý trước?
Trong bubbling, sự kiện của phần tử bên trong cùng sẽ được xử lý trước:
-
Với ví dụ trên, sự kiện “click” của phần tử
<p> sẽ được xử lý trước
-
Sau đó đến sự kiện của phần tử
<div>.
Trong capturing thì ngược lại, sự kiện của phần tử bên ngoài cùng sẽ được xử lý trước:
-
Sự kiện “click” của phần tử
<div> được xử lý trước
Với phương thức addEventListener(), bạn có thể chỉ định propagation type bằng tham số “useCapture”:
addEventListener(event, function, useCapture);
Giá trị mặc định là false (sử dụng bubbling propagation).
Khi giá trị tham số được thiết lập là true, sự kiện sẽ sử dụng capturing propagation.
3.3. Xóa một sự kiện với removeEventListener()
Phương thức removeEventListener() cho phép xóa sự kiện đã được gắn vào phần tử HTML trước đó bằng phương thức addEventListener()
Cú pháp:
element.removeEventListener(event, function);
Trong đó:
-
event: Là sự kiện cần xóa
-
function: Là hàm thực thi cùng với sự kiện.
Ví dụ, ta có HTML:
<div id="myDIV" style="border: 1px solid black">Di chuột trên DIV này. Sự kiện mousemove sẽ kích hoạt Math.random().
<p>Click vào nút bên dưới để xóa sự kiện</p>
<button onclick="xoaSuKienMosemove()" id="myBtn">Thử ngay!</button>
</div>
<p id="myP"></p>
Sau đó, ta tạo một hàm tạo số ngẫu nhiên:
// Tao một số ngẫu nhiên từ 0 - 50
function taoSoNgauNhien() {
document.getElementById("myP").innerHTML = Math.floor(Math.random() * 50);
}
Rồi sử dụng addEventListener() để thêm sự kiện vào thẻ div chỉ định.
// Kích hoạt tạo số ngẫu nhiên khi di chuột trên DIV chỉ định
document.getElementById("myDIV").addEventListener("mousemove", taoSoNgauNhien);
Và bây giờ là thực hiện xóa sự kiện chỉ định khi sự kiện click được kích hoạt.
// Xóa sự kiện chỉ định khi click
function xoaSuKienMosemove() {
document.getElementById("myDIV").removeEventListener("mousemove", taoSoNgauNhien);
}
> Lưu ý: Phương thức addEventListener() và removeEventListener() không được hỗ trợ trong IE 8 và các phiên bản trước đó.