Native Event Object là một đối tượng được tạo ra bởi trình duyệt khi một sự kiện DOM xảy ra, chẳng hạn như click chuột, keydown, input, vv. Đối tượng này chứa các thông tin chi tiết về sự kiện như loại sự kiện, mục tiêu của sự kiện (phần tử mà sự kiện được kích hoạt trên), các phím mà người dùng đã nhấn, vị trí chuột, vv.

Trong Vue.js, bạn có thể truy cập vào Native Event Object thông qua đối số đầu tiên của phương thức xử lý sự kiện. Đối số này thường được gọi là "event" hoặc "e", tùy thuộc vào cách bạn đặt tên.

Dưới đây là một ví dụ về cách sử dụng Native Event Object trong Vue.js:

<section id="event">
  <input type="text" v-on:input="showContent">
  <p>Content: {{ textContent }}</p>
</section>

const app = Vue.createApp({
    data() {
        return {
            textContent: ""
        }
    },
    methods: {
        showContent(event) {

            // Truy cập vào Native Event Object thông qua đối số event
            console.log(event);
            
            // Ví dụ: Lấy thông tin chi tiết về sự kiện click
            console.log('Loại sự kiện:', event.type);
            console.log('Mục tiêu của sự kiện:', event.target);
            console.log('Vị trí chuột (X, Y):', event.clientX, event.clientY);
            
            // Bạn cũng có thể thực hiện các hành động khác dựa trên thông tin của Native Event Object
            this.textContent = event.target.value
        }
    },
})
app.mount('#event');

Trong ví dụ này, khi người dùng nhập vào input, sự kiện input sẽ kích hoạt phương thức showContent. Đối số đầu tiên của phương thức showContent là Native Event Object (trong trường hợp này, chúng ta đặt tên là "event"). Bạn có thể truy cập vào các thuộc tính của đối tượng này để lấy thông tin chi tiết về sự kiện và thực hiện các hành động tùy thuộc vào nhu cầu của bạn.

Bên trên là chúng ta sử dụng Native Event Object với một phương thức không có tham số truyền vào, Vậy trường hợp sử dụng với một phương thức có tham số truyền vào thì nó sẽ như thế nào? Và dưới đây là cách bạn có thể sử dụng được điều đó

Ví dụ mình có một ô input và mình phải lấy dữ liệu người dùng nhập vào và thêm đoạn text "HELLO WORLD" là tham số của hàm.

<section id="event">
  <input type="text" v-on:input="showContent($event ,'HELLO WORLD')">
  <p>Content: {{ textContent }}</p>
</section>

const app = Vue.createApp({
    data() {
        return {
            textContent: ""
        }
    },
    methods: {
        showContent(event, content) {
            this.textContent = event.target.value + content
        }
    },
})
app.mount('#event');

Và kết quả chúng ta: