Содержит ли event.target уникальные свойства позиции, так что нет необходимости создавать собственное свойство элемента с data- *?

Question

В приведенном ниже простом тестовом коде я создаю свойство данных data-position, чтобы назначить каждому элементу уникальный идентификатор. Я использую эти идентификаторы в функциях labelShrink и labelGrow для нацеливания на правильный элемент после срабатывания прослушивателя событий. Я просмотрел event.target и не смог найти ни одного уникального идентификатора позиции, который позволил бы мне обойтись созданием уникального свойства data-*. Существует ли собственное свойство или метод, который позволил бы мне настроить таргетинг на элемент без добавления моего собственного настраиваемого свойства?

'use strict';

var numberOfInputs = document.querySelectorAll('.inputStyle').length;
var i;

for (i = 0; i < numberOfInputs; i++) {
    document.querySelectorAll('.inputStyle')[i].setAttribute('data-position', i);
    document.querySelectorAll('.inputStyle')[i].addEventListener('focus', labelShrink);
    document.querySelectorAll('.inputStyle')[i].addEventListener('blur', labelGrow);
}

//this is where I use data-position
function labelShrink(event) {
    document.querySelectorAll('.inputLabel')[event.target.dataset.position].style.fontSize = ".75rem";
}

//this is where I use data-position
function labelGrow() {
    if (!document.querySelectorAll('.inputStyle')[event.target.dataset.position].value) {
        document.querySelectorAll('.inputLabel')[event.target.dataset.position].style.fontSize = "1.5rem";
    } 
}

.inputLabel {
    position: absolute;
    z-index: -1;
    padding: .25rem 0 0 .25rem;
    font-size: 1.5rem;
    color: rgb(64, 64, 64);
    user-select: none;
    transition: font-size .25s;
}

.inputStyle {
    padding-top: 1rem;
	font-size: 2rem;
	font-family: arial;
    background-color: transparent;
}

<form class="formStyle">
            
    <div class="inputContainer">
        <div class="inputLabel">Phone Number</div>
        <input type="text" name="phoneOne" class="inputStyle">
    </div>

    <br>

    <div class="inputContainer">
        <div class="inputLabel">Secondary Phone Number</div>
        <input type="text" name="phoneTwo" class="inputStyle">
    </div>
            
    <input type="submit" value="Submit">

</form>

Answer 1

Если вы не хотите использовать дополнительные атрибуты, вы можете получить доступ к .inputLabel через event.target.previousElementSibling