Target input in javascript

Event.target

Свойство target интерфейса Event является ссылкой на объект, который был инициатором события. Он отличается от Event.currentTarget , если обработчик события вызывается во время всплытия (bubbling) или захвата события.

Пример

Свойство event.target может быть использовано для реализации делегирования событий.

в этом контексте e.target.style.visibility = ‘hidden’; > // Назначим обработчик к списку // Он будет вызван когда кликнут на любой
ul.addEventListener(‘click’, hide, false);

Спецификации

Поддержка браузеров

BCD tables only load in the browser

Примечания

В IE 6-8 модель событий отличается. Обработчики событий назначаются с помощью нестандартного EventTarget.attachEvent (en-US) метода. При этом в объекте события есть свойство Event.srcElement , вместо target свойства, но по смыслу оно идентично event.target .

function hide(e)  // Поддержка IE 6-8 var target = e.target || e.srcElement; target.style.visibility = 'hidden'; > 

Смотрите также

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

target Event Property

Get the name of the element where the event occurred:

Description

The target property returns the element where the event occured.

The target property is read-only.

The target property returns the element on which the event occurred, opposed to the currentTarget property, which returns the element whose event listener triggered the event.

See Also:

Syntax

Technical Details

More examples

Example

Get the element that triggered the event:

Example

Get the name of the element that triggered the event:

Browser Support

event.target is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

What is event.target in JavaScript?

Many candidates are rejected or down-leveled in technical interviews due to poor performance in behavioral or cultural fit interviews. Ace your interviews with this free course, where you will practice confidently tackling behavioral interview questions.

When an event is fired, the element that fires the event is known as the emitter. This element is what we call the target. So, the target property of that event object refers to the event emitter.

Syntax

The target property can only be obtained if the event of an element is being listened to.

element.addEventListener("input", function(event) 
//event.target is now accessible
 
console.log(event.target)
>)

In the code above, the element’s input event is being listened to, which makes event.target accessible.

Importance of event.target

It is necessary to have the target property when an event is fired. We can do the following with the target property of the event.

• Get the element that fired the event.
• Access the properties of the element .
• Modify some properties of the element , such as the CSS, the attributes, etc.

Code

The code below shows how an input element that fires the oninput event is listened to and event.target is retrieved. The code also shows some capabilities of having event.target at our fingertips.

Источник

event.target JavaScript

event.target returns the DOM element that triggered a specific event, so we can retrieve any property/ attribute with a value.

For example, when we console.log(e.target), we can see the element’s class name, type, the position of the mouse, etc.

const button = document.querySelector(".btn"); button.addEventListener("click", buttonClick); function buttonClick(e) < console.log(e.target); //  console.log(e.target.className); // btn console.log(e.type); // click console.log(e.offsetY); // 16 console.log(e.ctrlKey); // true if we hold down Ctrl key when we click. We can check with altKey, shiftKey. > 

Note: The difference between clientX, clientY and offsetX, offsetY

• e.clientX: get the position on the x-axis when we click. It counts the position from the width of the browser window.
• e.clientY: Similar to clientX, but get the position on the y-axis when we click.
• e.offsetX and e.offsetY: get the position from the actual element.

II. event.target.value

We can access the value of an event with event.target.value.

Example: We have a form, and we want to print out the value we type in.

III. Event type for text

In addition to keydown, we have other event types for text:

• keyup
• keypress
• focus
• blur
• cut
• paste
• input: Event fires whenever we do anything with the input.

Источник