title 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 title trong JavaScript.
PIC-1Trước tiên chúng ta hãy xem về ngữ pháp của sự kiện title
Sau đây là cách viết sự kiện title.
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"]. title = 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 title.
Thay đổi văn bản khi nhấp vào nút
HTML Mã
Nhấp vào
CSS Mã
#text-button {
display: block;
cursor: pointer;
width: 160px;
text-align: center;
border: 1px solid #232323;
}
JavaScript Mã
document.getElementById["text-button"]. title = function[] {
document.getElementById["text"].innerHTML = " Tôi đã nhấp! ";
};
Kết quả hiển thị trên trình duyệt như sau
PIC-2Sau 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-3Khi 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"]. title = 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-4Sau khi nhấp vào hộp này, màu sẽ thay đổi, hiệu ứng hiển thị như sau
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"]. title = 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-6Khi 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ụ:
Đếm cừu
{{ counter }} con cừu.
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ụ:
Chào mừng
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:
Hãy nói Konica
Hãy nói theo cách của bạn
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
:
Submit
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
...
...
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
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
.
...
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:
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:
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:
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ụ:
Mở tab mới
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.
A
A
A
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:
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.
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.
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.