Hướng dẫn dùng v-onclick JavaScript

onclick là một sự kiện. Khi sự cố được kích hoạt, nó sẽ được thực thi. Bài viết này sẽ chia sẻ với bạn việc sử dụng các sự kiện onclick trong JavaScript.

PIC-1

Trước tiên chúng ta hãy xem về ngữ pháp của sự kiện onclick

Sau đây là cách viết sự kiện onclick.

Sử dụng document.getElementById () để chỉ định phần tử id trong tài liệu và sử dụng function () {} để đối phó với các sự kiện xảy ra khi nhấp vào phần tử.

document.getElementById("button").onclick = function() {
    // Đặt sự kiện mà bạn muốn xảy ra ở đây
};

Hãy xem xét các ví dụ cụ thể

Sau đây là một ví dụ về sự kiện onclick.

Thay đổi văn bản khi nhấp vào nút

HTML Mã

CSS Mã

#text-button {
    display: block;
    cursor: pointer;
    width: 160px;
    text-align: center;
    border: 1px solid #232323;
}

JavaScript Mã

document.getElementById("text-button").onclick = function() {
document.getElementById("text").innerHTML = " Tôi đã nhấp! ";
};

Kết quả hiển thị trên trình duyệt như sau

PIC-2

Sau khi nhấp vào hộp này, hiệu ứng sau sẽ được hiển thị: các ký tự Trung Quốc của hộp thay đổi

PIC-3

Khi nhấp vào hộp, màu nền của hộp được thay đổi

HTML Mã

CSS Mã

#square-button {
    width: 80px;
    height: 80px;
    background: #232323;
}
#square-button.blue {
    background: #21759b;
}
JavaScript Mã
document.getElementById("square-button").onclick = function() {
    this.classList.toggle("blue");
};

Hiệu ứng sau được hiển thị trên trình duyệt: nó là một hộp màu đen

PIC-4

Sau khi nhấp vào hộp này, màu sẽ thay đổi, hiệu ứng hiển thị như sau

PIC-5

Hiển thị nội dung được nhập vào biểu mẫu

HTML Mã

 Tên của bạn là gì? 


 Nhập 

CSS Mã

:focus {
    outline: 1px solid #666;
}
input[type="text"] {
    margin: 0 0 15px;
    padding: 8px 10px;
    border: 1px solid #d0d1d3;
}
button {
    padding: 8px 15px;
    background: #979380;
    color: #fff;
    border: none;
}

JavaScript Mã

document.getElementById("form-button").onclick = function() {
    document.getElementById("form-text").innerHTML = " Xin chào "+document.getElementById("name").value + " bạn cùng lớp! ";
}

Hiệu ứng hiển thị trên trình duyệt như sau

PIC-6

Khi bạn nhập tên vào hộp văn bản, chẳng hạn như Zhang San, sau đó nhấp vào đầu vào để hiển thị hiệu ứng sau,

Lắng nghe sự kiện

Chúng ta có thể dùng directive v-on để lắng nghe các sự kiện DOM và thực thi JavaScript khi những sự kiện này được kích hoạt. Ví dụ:

<div id="example-1">
  <button v-on:click="counter += 1">Đếm cừubutton>
  <p>{{ counter }} con cừu.p>
div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Kết quả:

Phương thức xử lí sự kiện

Trong thực tế, logic để xử lí sự kiện thường phức tạp hơn, vì thế chứa JavaScript trực tiếp trong giá trị của thuộc tính v-on như trên là không khả thi. Đó là lí do v-on cũng có thể nhận tên của một phương thức mà bạn muốn gọi. Ví dụ:

<div id="example-2">
  
  <button v-on:click="greet">Chào mừngbutton>
div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  
  methods: {
    greet: function (event) {
      
      alert('Xin chào ' + this.name + '!')
      
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})


example2.greet() 

Kết quả:

Gọi phương thức inline

Thay vì bind trực tiếp tên phương thức, ta cũng có thể gọi phương thức trong một câu lệnh JavaScript:

<div id="example-3">
  <button v-on:click="say('Konica')">Hãy nói Konicabutton>
  <button v-on:click="say('Viettel')">Hãy nói theo cách của bạnbutton>
div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

Kết quả:

Đôi khi chúng ta cũng muốn truy xuất đến sự kiện DOM ban đầu từ câu lệnh JavaScript inline. Bạn có thể truyền sự kiện DOM vào phương thức thông qua biến $event:

<button v-on:click="warn('Chưa submit được form.', $event)">
  Submit
button>

methods: {
  warn: function (message, event) {
    
    if (event) event.preventDefault()
    alert(message)
  }
}

Event modifier

Trong rất nhiều trường hợp, chúng ta cần gọi event.preventDefault() hoặc event.stopPropagation() bên trong một phương thức xử lí sự kiện. Tuy việc này không có gì khó, sẽ tốt hơn nếu các phương thức chỉ phải tập trung giải quyết logic dữ liệu thay vì cáng đáng các sự kiện DOM.

Để giải quyết vấn đề này, Vue cung cấp các event modifier cho v-on. Event modfier là một hậu tố (postfix) cho directive, được biểu thị bằng một dấu chấm.

• .stop
• .prevent
• .capture
• .self
• .once

<a v-on:click.stop="doThis">a>





<form v-on:submit.prevent="onSubmit">form>


<a v-on:click.stop.prevent="doThat">a>


<form v-on:submit.prevent>form>







<div v-on:click.capture="doThis">...div>





<div v-on:click.self="doThat">...div>

Khi sử dụng nhiều modifier cùng lúc, thứ tự nối là rất quan trọng, vì code sẽ được tạo ra theo đúng thứ tự đó. Ví dụ, `@click.prevent.selfsẽ ngăn **toàn bộ click** còn@click.self.prevent` chỉ ngăn các click trên chính phần tử đang được nhắc đến.

Từ phiên bản 2.1.4 trở đi

<a v-on:click.once="donateKidney">a>

Không như các modifier khác, vốn chỉ dùng được cho các sự kiện DOM native, modifier .once cũng có thể dùng cho các sự kiện component. Nếu bạn chưa đọc về component, có thể bỏ qua và quay lại sau.

Từ phiên bản 2.3.0 trở đi

Vue cũng cung cấp modifier .passive, tương ứng với tùy chọn passive cho addEventListener.

<div v-on:scroll.passive="onScroll">...div>

Modifier .passive đặc biệt hữu ích để cải thiện hiệu năng của ứng dụng trên các thiết bị di động.

Đừng dùng .passive và .prevent cùng nhau, vì .prevent sẽ không có hiệu lực, và trình duyệt có thể sẽ bật cảnh báo. Nên nhớ rằng .passive thông báo cho trình duyệt biết rằng bạn không muốn ngăn chặn hành vi mặc định của sự kiện.

Key modifier

Khi lắng nghe các sự kiện bàn phím (keyboard event), chúng ta thường phải kiểm tra mã phím (key code). Vue hỗ trợ thêm key modifier (modifer cho mã phím) cho v-on trong các trường hợp này:

<input v-on:keyup.13="submit">

Tất nhiên nếu phải nhớ toàn bộ các mã phím thì rất mệt mỏi, nên Vue cung cấp alias (bí danh) cho các phím thông dụng nhất:

<input v-on:keyup.enter="submit">


<input @keyup.enter="submit">

Sau đây là danh sách đầy đủ của các key modifier:

• .enter
• .tab
• .delete (dùng cho cả hai phím “Delete” và “←”)
• .esc
• .space
• .up
• .down
• .left
• .right

Bạn cũng có thể tự định nghĩa alias cho key modifier bằng object toàn cục config.keyCodes:

Vue.config.keyCodes.f1 = 112

Key modifier tự động

2.5.0+

Bạn cũng có thể sử dụng bất kì tên phím hợp lệ nào để làm modifier bằng cách chuyển sang kebab-case:

<input @keyup.page-down="onPageDown">

Trong ví dụ trên, hàm onPageDown chỉ được gọi nếu $event.key === 'PageDown'.

Một số ít phím (esc và các phím mũi tên) có giá trị key không thống nhất trên IE9. Nếu cần hỗ trợ IE9, bạn nên dùng các alias như trên đây.

Các phím modifier hệ thống

Từ phiên bản 2.1.0 trở đi

Bạn có thể sử dụng các modifier sau để chỉ kích hoạt các event listener khi các phím modifier tương ứng được nhấn:

• .ctrl
• .alt
• .shift
• .meta

Trên các bàn phím của hệ Macintosh, meta là phím Command (⌘). Trên bàn phím Windows, meta là phím Windows (⊞). Trên bàn phím Sun Microsystems, meta được đánh dấu bằng một hình thoi (◆). Trên một số loại bàn phím nhất định như bàn phím của MIT và Lisp, meta có nhãn “META”. Trên bàn phím Symbolics, meta có nhãn “META” hoặc “Meta”.

Ví dụ:

<input @keyup.alt.67="clear">


<div @click.meta="openNewTab">Mở tab mớidiv>

Các phím modifier có cách hoạt động khác với phím thông thường, và khi dùng với sự kiện keyup, phím modifier phải được nhấn khi sự kiện được phát ra. Nói một cách khác, keyup.ctrl sẽ chỉ được kích hoạt khi bạn thả một phím khi vẫn đang ấn phím ctrl. Sự kiện này sẽ không được kích hoạt nếu bạn chỉ thả một mình phím ctrl.

Modifier .exact

2.5.0+

Modifier .exact (chính xác) có thể được sử dụng kết hợp với các modifier khác để chỉ rõ rằng hàm xử lí sự kiện chỉ nên được thực thi khi chính xác tổ hợp phím/chuột đó được bấm.

<button @click.ctrl="onClick">Abutton>


<button @click.ctrl.exact="onCtrlClick">Abutton>


<button @click.exact="onClick">Abutton>

Modifier cho phím chuột

Từ phiên bản 2.2.0 trở đi

• .left
• .right
• .middle

Những modifier này giới hạn xử lí cho những sự kiện được kích hoạt bởi một phím chuột nhất định (trái, phải, hoặc giữa).

Tại sao lại lắng nghe sự kiện trong HTML?

Bạn có thể lo ngại rằng toàn bộ việc lắng nghe sự kiện bằng cách đặt event listener trong HTML như thế này là vi phạm quy tắc “separation of concerns.” Cứ yên tâm, vì tất cả các hàm và biểu thức xử lí sự kiện của Vue được ràng buộc chặt chẽ với ViewModel, sẽ không có khó khăn gì trong việc bảo trì. Thật ra, sử dụng v-on còn có những lợi ích sau:

1. Giúp định vị hàm xử lí trong code JavaScript được dễ dàng hơn bằng cách đọc lướt template HTML.

2. Vì không phải attach hàm xử lí sự kiện trong JavaScript một cách thủ công, code trong ViewModel trở nên thuần logic và không phụ thuộc vào DOM. Điều này giúp chúng ta dễ viết test.

3. Khi một ViewModel bị hủy, tất cả hàm xử lí sự kiện đính kèm cũng được tự động gỡ bỏ mà không cần bạn phải dọn dẹp.