javascript - 通过点击(this)获取元素的id

Question

要启动 onclick 事件，我有这个

 [].forEach.call(btnAddVendorDropDown, (btnAddVendorDropDown) => {
  btnAddVendorDropDown.addEventListener('click', onAddVendorDropDownClick, false);
 });

函数是

function onAddVendorDropDownClick(e) {
    e.preventDefault();

    addNewClass(modal, 'is-active');
    addNewClass(modalAddVendorDropDown, 'is-active');

    const test = $(this).attr('id');
    console.log(test);
    return test;
}

所以我想做的是，当用户单击btnAddVendorDropDown时，调用函数onAddVendorDropDownClick。我需要从元素中获取 id。当我从函数内部执行元素属性 id 的 console.log 时，我得到了我所需要的。我遇到的问题是，当我尝试从函数外部获取它时，我不断收到undefined。我不明白一旦从该函数外部调用该函数，如何获取 id。

我试过了

var num = onAddVendorDropDownClick(); 
console.log("the function return is " + num);

这就是显示未定义的内容。

Answer 1

this 与调用者的范围直接相关。这意味着，如果没有将作用域“绑定(bind)”到您的事件处理程序，this 将引用您的主应用程序作用域，而不是 jquery 在链接函数时传递的作用域。

您可以包装事件对象的目标:

function onClickHandler(e) {
    $(e.target).attr('id');
}

或者您可以在点击处理程序的 jquery 上下文中使用 $(this):

$('#my-button').on('点击', function(e) { $(this).attr('id');});

最后一个示例之所以有效，是因为它发生在 JQuery 闭包内，因此它保留了前一个函数的作用域。在闭包之外，this 意味着其他东西。