Liên hệ
javascript

Sự kiện trong Dom - JavaScript

Các sự kiện trong JavaScript, bắt sự kiện trong DOM, lắng nghe sự kiện như khi click, change

Các sự kiện

Bạn có thể viết mã JavaScript thi hành khi một sự kiện nào đó xảy ra, ví dụ khi người dùng bấm vào một phần tử cụ thể, khi di chuyển chuột trên phần tử, khi submit form ...

Các sự kiện này coi như thuộc tính của phần tử, thuộc tính sẽ gán tên hàm được thi hành.

Ví dụ sự kiện khi bấm chuột vào phần tử tương ứng với thuộc tính onclick, vậy tạo một phần tử p khi người dùng bấm chuột vào sẽ thi hành hàm bạn định nghĩa myfunc viết HTML như sau:

<p onclick="myfunc()">some text</p>

Bảng các sự kiện HTML hay dùng

Sự kiện Mô tả
onclick xảy ra khi bấm chuột vào phần tử
onload xảy ra khi phần tử được tải
onunload xảy ra khi trang un load (phần tử body)
onchange xảy ra khi thay đổi nội dung phần tử trong form như khi chọn select, khi người dùng bấm radio, áp dụng cho các phần tử (input, select, textarea)
onmouseover xảy ra khi chuột di chuyển trên phần tử, hoặc phần tử con của phần tử
onmouseout khi chuột di chuyển ra khỏi phần tử
onmousedown xảy ra khi bấm chuột trên phần tử
onmouseup xảy ra khi nhả bấm chuột trên phần tử
onblur xảy ra phi phần tử mất focus
onfocus xảy ra khi phần tử nhận focus (phần tử đang kích hoạt nhận dữ liệu)

Bắt sự kiện

Sự kiện có thể được bắt bằng cách khai báo ngay từ thuộc tính trong HTML, ví dụ sau hiện thị popup khi người dùng bấm chuột vào phần tử

<button onclick="show()">Click Me</button>
<script>
    function show() {
        alert("Hi there");
    }
</script>

Sự kiện đã được bắt bằng đoạn mã: onclick="show()"

Cách thứ 2 kết quả tương tự là bạn bắt sự kiện bằng mã JavaScript

var x = document.getElementById("demo");
x.onclick = function () {
  document.body.innerHTML = Date();
}

Sự kiện đã được bắt bằng đoạn mã: x.onclick = function() {} hoặc bằng x.onclick = functionname();

onload, onunload

onloadunload xảy ra khi người dùng mở trang và rời trang.

<body onload="doSomething()">

Tương tự window.onload có thể được dụng để bắt dự kiện khi trang được tải.

window.onload = function() {
   //mã 
}

onchange

onchange dùng phổ biến trong hộp nhập dữ liệu văn bản. Sự kiện xảy ra khi nội dung textbox thay đổi và mất focus

<input type="text" id="name" onchange="change()">

<script>
    function change() {
         var x = document.getElementById("name");
         x.value= x.value.toUpperCase();
    }
</script>

Lắng nghe sự kiện

Phương thức addEventListener() sẽ gắn thêm hàm vào một sự kiện của phần tử mà không loại bỏ các hàm sự kiện đã gắn trước. Điều này giúp cho một sự kiện sảy ra có thể gọi nhiều hàm gắn với sự kiện đó.

element.addEventListener(event, function, useCapture);

Các tham số là:

  • event tên sự kiện ví dụ "click", "mousedown" ...
  • function tham số thứ 2 là hàm muốn thi hành khi sự kiện xảy ra
  • useCapture tham số thứ 3 là giá trị true, false đây là một tùy chọn sẽ giải thích sau

Chú ý sử dụng cách này tên các sự kiện sẽ bỏ đi tiền tố on ví dụ sử dụng "click" chứ không phải onclick như phần trên.

element.addEventListener("click", myFunction);
element.addEventListener("mouseover", myFunction);

function myFunction() {
  alert("Hello World!");
}

removeEventListener

Hàm dùng để loại bỏ hàm đã gắn vào sự kiện

element.removeEventListener("mouseover", myFunction);

Ví dụ sau gắn hàm vào sự kiện và khi hàm được gọi thì nó lại loại bỏ hàm khỏi sự kiện

<button id="demo">Start</button>

<script>
    var btn = document.getElementById("demo");
    btn.addEventListener("click", myFunction);
    
    function myFunction() {
      alert(Math.random());
      btn.removeEventListener("click", myFunction);
    }
</script>

Kiểu lan truyền sự kiện

Ở đây giải thích tham số thứ 3 trong hàm addEventListener, tham số useCapture

Có hai kiểu lan truyền sự kiện, bubblingcapturing

Để giải thích giả sử có phần tử div bên trong nó chứa phần tử p nếu vậy khi bấm chuột vào p thì xảy ra sự kiện click. Vậy phần tử p hay phần tử div sẽ bắt được sự kiện trước?

Nếu là capturing nghĩa là tham số thứ 3 useCapturetrue thì phần tử div nhận được sự kiện trước, sau đó mới đến p

Nếu là bubbling nghĩa là tham số thứ 3 useCapturefalse thì phần tử p nhận được sự kiện trước, sau đó mới đến div

capturing - sự kiện đi từ trên xuống dưới của DOM
bubbling - đi từ dưới lên trên trong cây DOM

//Capturing - gốc đến ngọn
elem1.addEventListener("click", myFunction, true); 

//Bubbling - từ ngọn đến gốc
elem2.addEventListener("click", myFunction, false);

Vui lòng đăng ký ủng hộ kênh