Question

我在html文档中有2个输入字段。

Username : <input type="text" name="username" id="username"><div id='use'></div>
Email : <input type="text" name="email" id="email"><div id='ema'></div>

和一个javascript文件。

window.onload = initialise;

function initialise() {
    username = document.getElementById('username');
    username.addEventListener('keyup', respond, false);
    email = document.getElementById('email');
    email.addEventListener('keyup', respond, false);
}

function respond() {
    //code
}

在response（）函数中我是否有任何方式可以知道是否是用户名字段或调用了respond（）方法的电子邮件字段？程序代码和OOP都是受欢迎的，因此首选程序代码。

Answer 1

是的，传入event并使用event.target.id

function respond(e) {
    //code
    var id = e.target.id; //id of called element
}

Answer 2

或者您可以使用this，前提是respond未与其他上下文绑定。 Demo

function respond() {
    console.log(this.id);    
}

MDN

通常需要引用事件所在的元素处理程序被触发，例如在为系列使用通用处理程序时相似的元素。使用时附加功能 addEventListener() this的值已更改 - 请注意该值的值这将传递给调用者的函数。

Answer 3

通过tymeJV的回答和代码中的更正，我为您创建了此fiddle。

HTML：

Username : <input type="text" name="username" id="username"><div id='use'></div>
Email : <input type="text" name="email" id="email"><div id='ema'></div>

JS：

window.onload = initialise();

function initialise() {
    username = document.getElementById('username');
    username.addEventListener('keyup', respond, false);
    email = document.getElementById('email');
    email.addEventListener('keyup', respond, false);
}

function respond(e) {
    //code
    alert(e.target.id);
}

在javascript中的addEventListener之后检索eventTarget

3 个答案: