Dispatching custom events in javascript

Ở bài trước mình có giới thiệu về 2 khái niệm quan trọng trong event javascript đó là:

1. Bubbling Event
2. Capturing Event

Khi chúng ta làm việc với javascript, đa phần thì làm việc các event mặc định như là click, hover, drag... Làm sao chúng ta có thể tạo ra custom event trong javascript cho riêng mình ? Thì hôm nay mình sẽ chia sẽ một khái niệm không kém phần quan trọng này.

Các biến global trong trình duyệt có một function Event hay còn gọi là constructor. Chúng ta có thể tạo object event như sau:

let event = new Event(event type[, options]);

Arguments:

• event type - có thể là String, như là "click", có thể custom tên event tùy theo mục đích của chúng ta
• options: phải là Object với 2 thuộc tính mở rộng
  • bubbles: true/false – Nếu true, thì event bubbles được kích hoạt
  • cancelable: true/false - Nếu true, “default action” sẽ được ngăn chặn như là chặn không request các tham số của form lên server ...
  • Hai thuộc tính này mặc định sẽ mang giá trình false: { bubbles: false, cancelable: false }

Sau khi tạo object event, Chúng ta nên chạy chúng trên phần tử DOM bằng cách elem.dispatchEvent(event). Ở ví dụ ở dưới đây, event click sẽ tự động được kích hoạt khi mới bắt đầu chạy chương trình. Hình thức này giống với việc chúng ta click vào một button

<button id="elem" onclick="alert('Click!');">Autoclick</button>

<script>
  let event = new Event("click");
  elem.dispatchEvent(event);
</script>

Bubbling example

Chúng ta có thể tạo một bubbling event với tên là "hello" và chúng dispatching trên document

<h1 id="elem">Hello from the script!</h1>

<script>
  // catch on document...
  document.addEventListener("hello", function(event) { // (1)
    alert("Hello from " + event.target.tagName); // Hello from H1
  });

  // ...dispatch on elem!
  let event = new Event("hello", {bubbles: true}); // (2)
  elem.dispatchEvent(event);
</script>

Ở ví dụ này có 2 điểm lưu ý:

1. Chúng ta nên sử dụng addEventListener trong custom event, không nên sử dụng on<event> trên phần tử DOM. Vì on<event> (onclick, ondblclick...) những thuộc tính mặc định đã tồn tại. document.onhello sẽ không hoạt được =))``
2. Tham số thứ 2 options của event mà thuộc tính của object options - bubbles = true

Đây là danh sách class của UI Events. Đây là phần đặc tả về chúng UI Event specification

• UIEvent
• FocusEvent
• MouseEvent
• WheelEvent
• KeyboardEvent
• ...

Chúng ta nên sử dụng những class này để custom event mặc định của javascript. Tạo instance, new MouseEvent("click"). Khi chúng ta constructor chúng ta có thể thêm các thuộc tính mở rộng cho tham số options. Qua đây chúng ta thấy rằng constructor Event mà tham số options chỉ nhận 2 thuộc tính { bubbles: false, cancelable: false }. Nhưng với các các class ở trên thì chúng ta có thể thêm bao nhiêu thuộc tính cũng được.

let event = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  clientX: 100,
  clientY: 100
});
alert(event.clientX)

2 tham số clientX và clientY được thêm vào khi tạo instance. Và chúng ta có thể truy cập thuộc tính đó bằng cách alert(event.clientX). Lưu ý cách khai báo này sẽ không hoạt động khi chúng ta tạo instance contructor Event.

let event = new Event("click", {
  bubbles: true, // only bubbles and cancelable
  cancelable: true, // work in the Event constructor
  clientX: 100,
  clientY: 100
});

alert(event.clientX); // undefined, the unknown property is ignored!

Lưu ý:

• Đây là danh sách đầy đủ các thuộc tính options mà được W3S đặc tả cho MouseEvent.

Chúng ta có thể tạo custom event "hello" bằng cách sử dụng new CustomEvent, CustomEvent cũng giống như Event. CustomEvent có tham số options (object) details - chúng ta có thể thêm các thuộc tính thông tin cần thiết khi tạo event. Với Event thì có không thuộc tính details của options này Ví dụ:

<h1 id="elem">Hello for John!</h1>

<script>
  // additional details come with the event to the handler
  elem.addEventListener("hello", function(event) {
    alert(event.detail.name);
  });

  elem.dispatchEvent(new CustomEvent("hello", {
    detail: { name: "John" }
  });
</script>

Qua bài viết này, mình đã chia sẽ cho làm thế nào để tạo một custom event trong javascript. Việc nắm bắt những kiến thức cơ bản này, cũng sẽ giống cho các bạn một phần nào đó khi sử dụng các library, framework javascript. Hiểu rõ hơn các thư viện javascript đã tạo custom event như thế nào. Happy coding