javascript - .blur() vs .on() ，哪个更好用(目前)

Question

我正在做我的第一个表格计算，这是我在过去一天研究并想出的 jQuery。

顺便说一下，这只是我发现的让一切正常运行的方法，不一定是最好的方法。我的老板希望我使用 .blur() 而不是 .on()，但是我觉得使用 .on()< 我有更多的控制权 通过在表单输入上使用 keyup & click 进行计算。

有人可以告诉我在这种情况下哪个更好用吗？ .on() 是否已折旧并更好地使用 .blur() 还是在这种情况下它们都可以？另外，如果模糊更好用，有人可以告诉我如何用模糊重新做我的功能，这样我就走上了正确的道路吗？谢谢!

http://jsfiddle.net/V5hrY/4/

$(".ticket input").on("keyup click", function(){

    //input changes Individual total
    var thisTotal = $(this).closest(".info").find('.total p span');
    var thisPrice = $(this).closest(".info").find('.price p span');
    var thisInput = $(this).closest(".info").find('.ticket input');
    thisTotal.html(thisPrice.html() * thisInput.val());

    //input changes Grand total
    var sum = 0;
    $('.total p span').each(function(){
        sum += parseFloat($(this).text());
        $('.gTotal span').html(sum);
    });

});

Answer 1

使用 .blur()(或“blur”事件监听器)的问题是小计仅在您将注意力从该字段移开时更新，因此更新不是“实时的” “本身。我建议您坚持收听 click 和 keyup 事件，以便随时随地更新小计。

如果你想使用模糊，只需更改这一行:

$(".ticket input").on("keyup click", function(){

...到这一行:

$(".ticket input").on("blur", function(){

您可以在这个 fiddle (http://jsfiddle.net/teddyrised/V5hrY/7/) 中看到使用 .blur() 监听器的地方，您可以看到当您更改数量时小计不会立即更新，但仅当你把注意力从场上移开。

p/s:就像我在评论中提到的那样，使用 .on() 是正确的方法。事实上，已弃用的是它的对应物(但较小的等效物).live() 和 .delegate()。我肯定会推荐使用 .on() 而不是 .blur() :) 事实上你的直觉是正确的 ;)

---

附带说明一下，如果您想将事件监听器绑定(bind)到动态添加的元素，我建议改用以下命名法:

$(document).on("keyup click", ".ticket input", function(){

...或者如果你想听模糊事件:

$(document).on("blur", ".ticket input", function(){