Thuộc tính target
có thể là phần tử đã đăng ký cho sự kiện hoặc hậu duệ của nó. Thường hữu ích khi so sánh event.target
với this
để xác định xem sự kiện có đang được xử lý do sự kiện nổi bong bóng hay không. Thuộc tính này rất hữu ích trong ủy quyền sự kiện, khi sự kiện bong bóng
ví dụ
Hiển thị tên của thẻ khi nhấp chuột
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
event.target demo
span, strong, p {
padding: 8px;
display: block;
border: 1px solid #999;
}
click
$[ "body" ].click[function[ event ] {
$[ "#log" ].html[ "clicked: " + event.target.nodeName ];
}];
Thử nghiệm
Thực hiện một ủy quyền sự kiện đơn giản. Trình xử lý nhấp chuột được thêm vào danh sách không có thứ tự và các phần tử con li của nó bị ẩn. Nhấp vào một trong các li con bật tắt [xem Toggle[]] con của chúng
Đến thời điểm này, tôi chắc chắn rằng bạn đã tạo hàng trăm trình lắng nghe sự kiện để lắng nghe những thứ như sự kiện nhấp chuột và gửi biểu mẫu. Điều này rất tốt cho nhiều trường hợp sử dụng, nhưng đôi khi bạn cần tạo các sự kiện tùy chỉnh của riêng mình để xử lý các tương tác phức tạp hơn. Trong bài viết ngắn này, tôi sẽ chỉ cho bạn mọi thứ bạn cần biết về cách tạo sự kiện tùy chỉnh, lắng nghe sự kiện tùy chỉnh và ví dụ thực tế về sự kiện tùy chỉnh nhấp đúp
Cách tạo sự kiện tùy chỉnh
Tạo một sự kiện tùy chỉnh trong JavaScript nghe có vẻ khá khó khăn nhưng thực ra nó chỉ là một dòng mã đơn giản
const myEvent = new Event["myCustomEvent"]
Bạn chỉ có thể tạo một đối tượng
document.addEventListener["myCustomEvent", e => {
console.log[e]
}]
3 mới bằng cách sử dụng hàm tạo Sự kiện và ở dạng cơ bản nhất, tất cả những gì bạn cần làm là chuyển một chuỗi đơn tới hàm tạo là tên của sự kiện của bạn. Để lắng nghe sự kiện đó, bạn chỉ cần thêm một trình lắng nghe sự kiện vào bất kỳ yếu tố nào bạn muốn lắng nghe sự kiện trêndocument.addEventListener["myCustomEvent", e => {
console.log[e]
}]
Cuối cùng, bước cuối cùng bạn cần thực hiện là thực sự kích hoạt sự kiện mà bạn đã tạo và đang lắng nghe
document.dispatchEvent[myEvent]
Đây là nơi hàm
document.addEventListener["myCustomEvent", e => {
console.log[e]
}]
4 xuất hiện. Mọi phần tử đều có chức năng này và tất cả những gì bạn cần để vượt qua nó là đối tượng sự kiện mà bạn đã tạo với document.addEventListener["myCustomEvent", e => {
console.log[e]
}]
5Nếu chúng tôi kết hợp tất cả những điều này lại với nhau, chúng tôi sẽ nhận được một sự kiện cơ bản được kích hoạt trên tài liệu của chúng tôi và nội dung của sự kiện sẽ được in ra
{
isTrusted: false
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
path: [document, window]
returnValue: true
srcElement: document
target: document
timeStamp: 54.69999998807907
type: "myCustomEvent"
}
Đây là hình thức cơ bản nhất của một đối tượng sự kiện. Nó chứa một loạt thông tin nhưng những phần quan trọng nhất được đánh dấu
Thuộc tính
document.addEventListener["myCustomEvent", e => {
console.log[e]
}]
6 chỉ đề cập đến việc sự kiện này được kích hoạt bởi tương tác của người dùng hay bởi mã JavaScript tùy chỉnh. Ví dụ: khi người dùng nhấp vào một nút, sự kiện sẽ có document.addEventListener["myCustomEvent", e => {
console.log[e]
}]
6 được đặt thành true, trong khi sự kiện tùy chỉnh của chúng tôi có document.addEventListener["myCustomEvent", e => {
console.log[e]
}]
6 được đặt thành false do sự kiện được kích hoạt bởi JavaScriptdocument.addEventListener["myCustomEvent", e => {
console.log[e]
}]
9 chỉ là phần tử mà document.addEventListener["myCustomEvent", e => {
console.log[e]
}]
4 được gọidocument.dispatchEvent[myEvent]
1 là khoảng thời gian đã trôi qua kể từ khi trang được tải khi sự kiện xảy radocument.dispatchEvent[myEvent]
2 chỉ là tên của sự kiệnTùy chỉnh sự kiện
Bạn có thể nhận thấy ở đầu chi tiết sự kiện có các thuộc tính cho
document.dispatchEvent[myEvent]
3, document.dispatchEvent[myEvent]
4 và document.dispatchEvent[myEvent]
5. Đây thực sự là các tùy chọn mà chúng tôi có thể định cấu hình khi tạo các sự kiện tùy chỉnh của mìnhconst myEvent = new Event["myCustomEvent", {
bubbles: true,
cancelable: true,
composed: true
}]
document.dispatchEvent[myEvent]
3
document.dispatchEvent[myEvent]
Thuộc tính
document.dispatchEvent[myEvent]
3 xác định xem sự kiện có nổi lên thông qua HTML khi nó được kích hoạt hay không. Theo mặc định, giá trị này là sai, điều đó có nghĩa là sự kiện sẽ không lan truyền lên cây, nhưng nếu chúng ta muốn sự kiện được gọi trên mỗi cha của phần tử HTML thì chúng ta có thể đặt giá trị này thành đúngconst bubbleEvent = new Event["bubbleEvent", { bubbles: true }]
const defaultEvent = new Event["defaultEvent", { bubbles: false }]
document.addEventListener["bubbleEvent", [] => {
// This will get called since the event will bubble up to the document from the button
console.log["Bubble"]
}]
document.addEventListener["defaultEvent", [] => {
// This never gets called since the event cannot bubble up to the document from the button
console.log["Default"]
}]
const button = document.querySelector["button"]
button.dispatchEvent[bubbleEvent]
button.dispatchEvent[defaultEvent]
document.dispatchEvent[myEvent]
4
document.dispatchEvent[myEvent]
Thuộc tính
document.dispatchEvent[myEvent]
4 xác định xem sự kiện có thể bị hủy hay không bằng cách gọi {
isTrusted: false
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
path: [document, window]
returnValue: true
srcElement: document
target: document
timeStamp: 54.69999998807907
type: "myCustomEvent"
}
0. Theo mặc định, điều này được đặt thành false. Nếu thuộc tính này là true, khi bạn gọi ___7_______0, nó sẽ đặt thuộc tính __________2 của sự kiện của chúng ta thành trueconst cancelableEvent = new Event["cancelableEvent", { cancelable: true }]
const defaultEvent = new Event["defaultEvent", { cancelable: false }]
document.addEventListener["cancelableEvent", e => {
e.preventDefault[]
console.log[e.defaultPrevented] // True
}]
document.addEventListener["defaultEvent", e => {
e.preventDefault[]
console.log[e.defaultPrevented] // False
}]
document.dispatchEvent[cancelableEvent]
document.dispatchEvent[defaultEvent]
document.dispatchEvent[myEvent]
5
document.dispatchEvent[myEvent]
Thuộc tính
document.dispatchEvent[myEvent]
5 xác định xem sự kiện có thể lan truyền qua DOM bóng tối hay không. Theo mặc định, điều này được đặt thành false. Thuộc tính này thực sự chỉ áp dụng nếu bạn đang làm việc với các phần tử HTML tùy chỉnh và DOM bóng và tất cả những gì nó làm là cho phép các sự kiện lan truyền bên ngoài DOM bóng. Nếu bạn muốn đảm bảo một sự kiện được kích hoạt trong DOM bóng tối của bạn có thể được bắt bên ngoài DOM bóng tối, hãy đặt điều này thành trueTruyền dữ liệu tùy chỉnh cho sự kiện
Nói chung, bây giờ khi bạn đang làm việc với các sự kiện tùy chỉnh, bạn muốn có thể chuyển một số dạng dữ liệu tùy chỉnh cho các sự kiện của mình. Với hàm tạo
document.addEventListener["myCustomEvent", e => {
console.log[e]
}]
5 bình thường, điều này là không thể, đó là lý do tại sao có cách thứ hai để tạo sự kiện tùy chỉnhconst myEvent = new CustomEvent["myEvent", { detail: { hello: "World" } }]
Có thể sử dụng hàm tạo
{
isTrusted: false
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
path: [document, window]
returnValue: true
srcElement: document
target: document
timeStamp: 54.69999998807907
type: "myCustomEvent"
}
6 để thay thế. Điều này hoạt động chính xác giống như document.addEventListener["myCustomEvent", e => {
console.log[e]
}]
5, nhưng bạn cũng có thể chuyển thuộc tính {
isTrusted: false
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
path: [document, window]
returnValue: true
srcElement: document
target: document
timeStamp: 54.69999998807907
type: "myCustomEvent"
}
8 cho đối số thứ hai cùng với thuộc tính document.dispatchEvent[myEvent]
3, document.dispatchEvent[myEvent]
4 và document.dispatchEvent[myEvent]
5. Thuộc tính {
isTrusted: false
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
path: [document, window]
returnValue: true
srcElement: document
target: document
timeStamp: 54.69999998807907
type: "myCustomEvent"
}
8 này có thể được đặt thành bất kỳ thứ gì bạn muốn và bất kỳ thứ gì bạn chuyển vào bên trong thuộc tính {
isTrusted: false
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
path: [document, window]
returnValue: true
srcElement: document
target: document
timeStamp: 54.69999998807907
type: "myCustomEvent"
}
8 sẽ được chuyển đến trình lắng nghe sự kiệnconst myEvent = new CustomEvent["myEvent", { detail: { hello: "World" } }]
document.addEventListener["myEvent", e => {
console.log[e.detail] // { hello: "World" }
}]
document.dispatchEvent[myEvent]
quy ước đặt tên
Trước khi chúng tôi chuyển sang ví dụ thực tế về sự kiện nhấp đúp, tôi muốn trình bày các quy ước đặt tên sự kiện tùy chỉnh. Bạn có thể đặt tên cho các sự kiện tùy chỉnh của mình theo bất kỳ thứ gì bạn muốn, nhưng điều quan trọng là phải cân nhắc việc tuân theo quy ước đặt tên để làm việc với mã của bạn dễ dàng hơn. Quy ước đặt tên phổ biến nhất cho các sự kiện tùy chỉnh là thêm tiền tố tên bằng
const myEvent = new Event["myCustomEvent", {
bubbles: true,
cancelable: true,
composed: true
}]
4 hoặc tên dự án hiện tại của bạnĐây là một ý tưởng hay vì nó không chỉ giúp bạn dễ dàng biết được sự kiện nào là sự kiện tùy chỉnh so với sự kiện được tạo sẵn vì tất cả chúng đều bắt đầu bằng
const myEvent = new Event["myCustomEvent", {
bubbles: true,
cancelable: true,
composed: true
}]
4, mà còn đảm bảo mã của bạn sẽ không bị hỏng nếu JavaScript thêm một sự kiện mới có cùng tên với . Ví dụ: nếu JavaScript thêm một sự kiện có tên là const myEvent = new Event["myCustomEvent", {
bubbles: true,
cancelable: true,
composed: true
}]
6 và bạn đã sử dụng tên const myEvent = new Event["myCustomEvent", {
bubbles: true,
cancelable: true,
composed: true
}]
6 cho sự kiện tùy chỉnh của mình thì bạn sẽ gặp sự cố vì mã tùy chỉnh của bạn sẽ kích hoạt sự kiện và trình duyệt cũng sẽ cố gắng kích hoạt bản sao sự kiện của chính nó// Always use some form of naming convention
const myEvent = new Event["custom:doubleClick"]
Ví dụ nhấp đúp chuột
Đối với ví dụ này, chúng tôi sẽ tạo một sự kiện nhấp đúp sẽ kích hoạt bất cứ khi nào bạn nhấp hai lần vào một phần tử trong một khoảng thời gian ngắn. Nó cũng sẽ chuyển tổng thời gian giữa các lần nhấp vào nút của bạn dưới dạng dữ liệu tùy chỉnh
Để bắt đầu, chúng ta cần tạo một trình lắng nghe sự kiện nhấp chuột bình thường để xác định xem có nhấp đúp chuột hay không
document.addEventListener["myCustomEvent", e => {
console.log[e]
}]
0Đoạn mã trên sử dụng thuộc tính
document.dispatchEvent[myEvent]
1 để xác định thời gian giữa các sự kiện nhấp chuột trên nút của chúng tôi và nếu có hơn 500 mili giây giữa các lần nhấp, nó sẽ trả về ngay lập tức và cập nhật giá trị const myEvent = new Event["myCustomEvent", {
bubbles: true,
cancelable: true,
composed: true
}]
9. Khi chúng tôi có hai lần nhấp trong vòng 500 mili giây, chúng tôi tiếp tục vượt qua kiểm tra nếu và có thể kích hoạt sự kiện nhấp đúp của chúng tôi. Để làm điều này, chúng ta cần tạo sự kiện của mình và gửi nó đidocument.addEventListener["myCustomEvent", e => {
console.log[e]
}]
1Đối với sự kiện tùy chỉnh của chúng tôi, chúng tôi đang đặt tất cả các tùy chọn thành true vì theo mặc định, một sự kiện nhấp chuột có tất cả các thuộc tính này được đặt thành true và chúng tôi muốn nhấp đúp chuột của mình hoạt động tương tự như nhấp chuột bình thường. Chúng tôi cũng đang chuyển
const bubbleEvent = new Event["bubbleEvent", { bubbles: true }]
const defaultEvent = new Event["defaultEvent", { bubbles: false }]
document.addEventListener["bubbleEvent", [] => {
// This will get called since the event will bubble up to the document from the button
console.log["Bubble"]
}]
document.addEventListener["defaultEvent", [] => {
// This never gets called since the event cannot bubble up to the document from the button
console.log["Default"]
}]
const button = document.querySelector["button"]
button.dispatchEvent[bubbleEvent]
button.dispatchEvent[defaultEvent]
0 cho tùy chọn {
isTrusted: false
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
path: [document, window]
returnValue: true
srcElement: document
target: document
timeStamp: 54.69999998807907
type: "myCustomEvent"
}
8 của chúng tôi. Cuối cùng, chúng tôi đang gửi sự kiện đến mục tiêu của sự kiện mà trong trường hợp của chúng tôi là phần tử nút. Điều cuối cùng chúng ta còn lại phải làm là lắng nghe sự kiệndocument.addEventListener["myCustomEvent", e => {
console.log[e]
}]
2Chúng tôi vừa thêm một trình lắng nghe sự kiện đơn giản vào nút sẽ đăng xuất văn bản
const bubbleEvent = new Event["bubbleEvent", { bubbles: true }]
const defaultEvent = new Event["defaultEvent", { bubbles: false }]
document.addEventListener["bubbleEvent", [] => {
// This will get called since the event will bubble up to the document from the button
console.log["Bubble"]
}]
document.addEventListener["defaultEvent", [] => {
// This never gets called since the event cannot bubble up to the document from the button
console.log["Default"]
}]
const button = document.querySelector["button"]
button.dispatchEvent[bubbleEvent]
button.dispatchEvent[defaultEvent]
2 và khoảng thời gian giữa hai lần nhấp của chúng tôiPhần kết luận
Các sự kiện tùy chỉnh là một cách tuyệt vời trong JavaScript để xử lý những thứ như cử chỉ và nhấp đúp, và trên hết, chúng cực kỳ dễ triển khai và sử dụng