javascript - 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>

标签： javascriptevent-handling

Answer 1

如果您不想使用其他属性，可以通过event.target.previousElementSibling访问 .inputLabel