javascript - 在 jquery 中注册事件 vs 在 html 标签中注册事件

Question

假设我有 2 个文本框:

<input type="text" id="registerByTag" oninput="MyFunction()"/>
<input type="text" id="registerByJquery"/>

<script>
    $(document).ready(function()
    {
       $("#registerByJquery").bind("custominput",MyFunction);

       //use this to call the function: $("#registerByJquery").trigger("custominput");
    })
    function MyFunction()
    {
        console.log(this);
    }
</script>

当我同时触发两个文本框时，会得到两个不同的结果。在 registerByJquery 上，我得到元素 registerByJquery(触发事件的元素)；在 registerByTag 上，我得到了整个 HTML 文档对象，我的意思是 $(document) 而不是触发事件的元素，这正是我想要得到的。

1/为什么 this 没有返回相同的结果？
2/通过标签注册事件是否可以获取到触发事件的元素？我不想向 MyFunction() 添加参数。

Answer 1

在内联事件监听器调用的函数中没有明确的this

为了访问函数中的元素，您必须将 this 或 event 作为参数传入

<input  oninput="MyFunction(this)"/>

---

function MyFunction(el)
{
    console.log(el);
}

---

现代最佳实践是使用不显眼的事件监听器而不是内联事件监听器。它有助于关注点分离，并且由于内联方法必须位于全局命名空间中，因此有助于避免污染全局命名空间并最大限度地减少冲突

---

使用jQuery可以简单的把事件组合起来做

$("#registerByJquery").on("input custominput", MyFunction);

这样做将使 this 可用于两个事件