javascript - 了解使用 .on() 传递数据

Question

我正在读书

function myHandler(event) {
    alert(event.data.foo);
}

$("p").on("click", { foo: "bar" }, myHandler)

但我想我可以做到

  function myHandler(a) {
      alert(a);
  }
  $("p").on("click", function() { myHandler('bar') })

为什么我要使用事件，事件的实际用途是什么，我也看到很多人在他们的代码中使用'this'和'that'，但我可以'不明白它是什么，为什么不直接按名称选择元素，例如 $('#something')，这就是我通常做的事情？关于编写最简化的程序代码有什么建议吗？有太多不同的方法，但在编码上却做着同样的事情。

Answer 1

简短的回答是，实现同一目标的方法有不止一种，这取决于具体情况。

第一个代码片段在语义方面做了一些事情:

1. 函数声明非常清楚地表明myHandler不是一个普通的函数，而是一个事件处理程序；现在这对您来说可能并不重要，但一旦您将代码移交给其他人或者您在几个月后返回您的代码，它就会变得重要。

2. 因为它是单独声明的，所以它表明 myHandler 也将被重用。我想会有更多的语句将相同的处理程序应用于其他 jQuery 选择器。

3. 由于 #1 和 #2，辅助数据无法再以正常方式传递，而是需要通过 Event 传递。

您自己的代码片段在通用代码和简单性之间做出了妥协；而且它没有理由爆炸。

回答您的其他问题

Why would I use event?

在很多情况下你不会；以这段代码为例，基于 jQuery 事件处理最常用的功能:

<a href="http://www.example.org">...</a>

$('a').on('click', function(e) { 
    e.preventDefault();
    // do something beautiful
});

这里，事件 e 被传递给点击处理程序，然后当点击链接时，它会阻止浏览器导航到该链接。可以用这个来完成同样的事情:

$('a').on('click', function() { 
    // do something beautiful
    return false;
});

虽然上面代码的意图不太明显，但它在不接触事件的情况下完成了同样的事情。

What is event actually for?

它封装了有关各种用户输入的数据，例如按键、单击、拖动等。jQuery 对其进行了概括，并通过数据传递功能对其进行了扩展。另请参阅:Event object

Why not just select elements by their name?

这里没有权威的答案，但是当您使用 this 引用单击的元素(或基于它的选择器来引用父元素、同级元素等)时，单击处理程序代码变得更加通用和可维护；如果您需要向其他元素添加相同的行为，则不必编写 X 个不同的点击处理程序。