Javascript tạo mục tiêu sự kiện

Question

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

Nội dung chính Show

Cách tạo sự kiện tùy chỉnh
Tùy chỉnh sự kiện
Truyền dữ liệu tùy chỉnh cho sự kiện
quy ước đặt tên
Ví dụ nhấp đúp chuột
Phần kết luận
Mục tiêu sự kiện trong JavaScript là gì?
Làm cách nào để tạo một sự kiện trong JavaScript?
Làm cách nào để tạo và kích hoạt các sự kiện trong JavaScript?
Làm cách nào để nhắm mục tiêu id trong JavaScript?

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


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.target demotitle>
  <style>
  span, strong, p {
    padding: 8px;
    display: block;
    border: 1px solid #999;
  }
  style>
  <script src="https://code.jquery.com/jquery-3.6.3.js">script>
head>
<body>
 
<div id="log">div>
<div>
  <p>
    <strong><span>clickspan>strong>
  p>
div>
 
<script>
$( "body" ).click(function( event ) {
  $( "#log" ).html( "clicked: " + event.target.nodeName );
});
script>
 
body>
html>

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ên

document.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)
})

5

Nế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 JavaScript

document.addEventListener("myCustomEvent", e => {
  console.log(e)
})

9 chỉ là phần tử mà

document.addEventListener("myCustomEvent", e => {
  console.log(e)
})

4 được gọi

document.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 ra

document.dispatchEvent(myEvent)

2 chỉ là tên của sự kiện

Tù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ình

const myEvent = new Event("myCustomEvent", {
  bubbles: true,
  cancelable: true,
  composed: true
})

document.dispatchEvent(myEvent)

3

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 đúng

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)

document.dispatchEvent(myEvent)

4

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 true

const 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

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 true

Truyề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ỉnh

const 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ện

const 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ó đi

document.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ện

document.addEventListener("myCustomEvent", e => {
  console.log(e)
})

2

Chú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ôi

Phầ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

Mục tiêu sự kiện trong JavaScript là gì?

Định nghĩa và cách sử dụng. Thuộc tính target trả về phần tử nơi xảy ra sự kiện . Thuộc tính đích là chỉ đọc. Thuộc tính mục tiêu trả về phần tử mà sự kiện xảy ra, trái ngược với thuộc tính mục tiêu hiện tại, trả về phần tử có trình xử lý sự kiện đã kích hoạt sự kiện.

Làm cách nào để tạo một sự kiện trong JavaScript?

Các bước dưới đây được thực hiện để tạo một sự kiện bằng cách sử dụng Sự kiện mới. .

Chúng tôi tạo một sự kiện bằng cách sử dụng hàm tạo Sự kiện

Chúng tôi lắng nghe sự kiện này bằng phương thức addEventListener()

Chúng tôi kích hoạt hoặc gửi sự kiện bằng phần tử. phương thức công vănEvent(eventName)

Sự kiện tùy chỉnh có tên bắt đầu hiện đã được tạo

Làm cách nào để tạo và kích hoạt các sự kiện trong JavaScript?

Ví dụ: để kích hoạt sự kiện nhấp chuột trên bất kỳ phần tử nào, bạn sử dụng phương thức click(). .

el. nhấp chuột();.

el. tiêu điểm(); . mơ hồ();.

const frm = tài liệu. querySelector('form'); . Gửi đi(); . cài lại();

Làm cách nào để nhắm mục tiêu id trong JavaScript?

Để chọn ID HTML bằng JavaScript, chúng ta cần trỏ vào ID đó rồi lưu trữ dưới dạng biến . Đây là một dòng JavaScript chúng ta cần nhắm mục tiêu phần tử này và lưu trữ nó dưới dạng một biến. Mã từ trình soạn thảo văn bản. const chocolateDescription = tài liệu. getElementById('chocolateCupcake');

programming javascript

Javascript tạo mục tiêu sự kiện

ví dụ

Thử nghiệm

Cách tạo sự kiện tùy chỉnh

Tùy chỉnh sự kiện

document.dispatchEvent(myEvent) 3

document.dispatchEvent(myEvent) 4

document.dispatchEvent(myEvent) 5

Truyền dữ liệu tùy chỉnh cho sự kiện

quy ước đặt tên

Ví dụ nhấp đúp chuột

Phần kết luận

Mục tiêu sự kiện trong JavaScript là gì?

Làm cách nào để tạo một sự kiện trong JavaScript?

Làm cách nào để tạo và kích hoạt các sự kiện trong JavaScript?

Làm cách nào để nhắm mục tiêu id trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

`document.dispatchEvent(myEvent)`
3

`document.dispatchEvent(myEvent)`
4

`document.dispatchEvent(myEvent)`
5