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>

当我同时触发两个文本框时，我得到2个不同的结果。在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对于两个事件都可用

在jquery中注册事件与在html标签中注册事件

1 个答案: