Bài đăng này sẽ minh họa “event.target” và cách sử dụng nó trong JavaScript.
“event.target” trong JavaScript là gì?
Các ' sự kiện.mục tiêu ” là thuộc tính/thuộc tính của “ sự kiện ” trong JavaScript. Nó đề cập đến yếu tố kích hoạt sự kiện. Để truy cập thuộc tính event.target, sự kiện của phần tử phải được lắng nghe. Các ' addEventListener() ” được sử dụng để lắng nghe sự kiện cụ thể.
cú pháp
Để sử dụng thuộc tính “event.target”, hãy làm theo cú pháp đã cho:
yếu tố. addEventListener ( '
bảng điều khiển. đăng nhập ( sự kiện. mục tiêu )
} )
Trong cú pháp đã cho,
- Các ' addEventListener() ” được sử dụng để thêm trình xử lý sự kiện cho phần tử cụ thể.
- “
” biểu thị bất kỳ sự kiện nào, chẳng hạn như “ nhấp chuột ”, “ Di chuột lên trên ', và như thế.
Ví dụ
Trong ví dụ đã cho, chúng ta sẽ lấy phần tử đã kích hoạt sự kiện bằng cách sử dụng “ sự kiện.mục tiêu ' tài sản.
Ở đây, chúng ta sẽ tạo một nút bằng cách gán id “ btn ” được sử dụng trong JavaScript để truy cập nút:
< id nút = 'btn' > Bấm vào đây cái nút >
Trong tệp JavaScript, trước tiên, chúng tôi sẽ lấy tham chiếu của nút bằng cách sử dụng id được chỉ định của nó với sự trợ giúp của “ getElementById() ' phương pháp:
hằng số cái nút = tài liệu. getElementById ( 'btn' ) ;Đính kèm trình xử lý sự kiện bằng nút. Các ' nhấp chuột ” sự kiện được bắt đầu khi nhấp vào nút và đối tượng sự kiện được chuyển đến trình xử lý sự kiện dưới dạng đối số. Các ' sự kiện.mục tiêu ” có thể truy cập thuộc tính từ hàm nghe để lấy tham chiếu đến phần tử nút đã kích hoạt sự kiện:
cái nút. addEventListener ( 'nhấp chuột' , chức năng ( sự kiện ) {bảng điều khiển. đăng nhập ( 'Sự kiện mục tiêu:' , sự kiện. mục tiêu ) ;
} ) ;
Đầu ra hiển thị tham chiếu của nút cụ thể được nhấp:
Bạn có thể nhận thêm thông tin và áp dụng các chức năng khác nhau như tạo kiểu cho sự kiện được nhắm mục tiêu bằng cách sử dụng các thuộc tính của sự kiện đó.
Các thuộc tính của “event.target” là gì?
Có nhiều thuộc tính khác nhau của thuộc tính “event.target” cung cấp thông tin về phần tử đích. Một vài thuộc tính phổ biến của đối tượng event.target như sau:
| thuộc tính event.target | Sự miêu tả |
| event.target.tagname | Được sử dụng để lấy “ tên ” của thẻ HTML của phần tử đích. |
| sự kiện.mục tiêu.giá trị | Sử dụng để truy xuất “ giá trị ” của phần tử đích. Thuộc tính này chủ yếu được sử dụng cho các yếu tố đầu vào. |
| event.target.id | Để có được “ nhận dạng ” thuộc tính của phần tử đích, hãy sử dụng thuộc tính đã cho. |
| event.target.classList | Danh sách của ' các lớp học ” chứa phần tử đích được truy cập bởi thuộc tính này. |
| event.target.textContent | Được sử dụng để lấy “ nội dung văn bản ” của phần tử đích. |
| sự kiện.mục tiêu.href | Thuộc tính này truy xuất “ href ” thuộc tính của phần tử đích, chẳng hạn như liên kết. |
| sự kiện.mục tiêu.style | Để sửa đổi “ CSS ” thuộc tính của phần tử đích, hãy sử dụng thuộc tính này. |
Ví dụ 1: Thay đổi màu nền của phần tử đích
Trong ví dụ được cung cấp, chúng tôi sẽ thay đổi màu nền của phần tử đích bằng cách sử dụng “ phong cách ” thuộc tính trên “ nhấp chuột ' sự kiện:
hằng số cái nút = tài liệu. getElementById ( 'btn' ) ;cái nút. addEventListener ( 'nhấp chuột' , chức năng ( sự kiện ) {
sự kiện. mục tiêu . phong cách . màu nền = 'màu xanh da trời' ;
} ) ;
đầu ra
Ví dụ 2: Lấy giá trị của phần tử đích
Tạo trường nhập văn bản và khu vực hiển thị văn bản bằng thẻ
. Gán id cho trường đầu vào và thẻ
là “ lấyInput ' Và ' trình diễn ', tương ứng:
< kiểu đầu vào = 'chữ' nhận dạng = 'takeInput' >< id = 'trình diễn' > P >
Nhận tham chiếu của trường văn bản bằng cách sử dụng “ getElementById() ' phương pháp:
đã được nhập = tài liệu. getElementById ( 'takeInput' ) ;Sử dụng ' giá trị ” thuộc tính với “ sự kiện.mục tiêu ” để lấy giá trị của phần tử được nhắm mục tiêu:
đầu vào. addEventListener ( 'đầu vào' , ( sự kiện ) => {tài liệu. getElementById ( 'trình diễn' ) . bên trongHTML = sự kiện. mục tiêu . giá trị ;
} )
Như bạn có thể thấy rằng giá trị được nhập vào hộp văn bản đã được truy xuất thành công bằng cách sử dụng “ giá trị ' thuộc tính:
Đó là tất cả về “event.target” trong JavaScript.
Phần kết luận
Các ' sự kiện.mục tiêu ” đề cập đến yếu tố kích hoạt/bắt đầu sự kiện. Có một số thuộc tính của thuộc tính “event.target” cung cấp thông tin về phần tử đích. Ví dụ, ' event.target.tagname ”, “ .giá trị ”, “ .nhận dạng ”, “ .phong cách ', và như thế. Bài đăng này minh họa “event.target”, các thuộc tính của nó và cách sử dụng nó trong JavaScript.