Question

我目前正在尝试增强我的用户界面。我有几个基于1种形式的css类的按钮。

当我点击一个按钮时，我目前以这种方式触发我的事件：

$(function () {
   var form = $('form');

   form.on("click", ".btn-form-submit", function (e) { ... });

   form.on("click", ".btn-add", function (e) { ... });

   form.on("click", ".btn-delete", function (e) { ... });

});

您知道是否有更好的方法在表单元素上注册我的事件？

您怎么看？

谢谢：）

Answer 1

还有其他方法，但您示例中的代码正是我所期望的。三个按钮，三个动作，所以三个处理程序。

'性能'部分已经完成，您存储表单并查找按钮。

此外，在此阶段不进行微观优化。您拥有的代码很好，花时间创建更多/更好的功能，完成后，回头看看是否有任何相关的改进空间。

Answer 2

最终，这取决于你想要做什么。但除了已经建议的那些之外，您可能希望提供命名函数作为回调函数。所以，假设你想做一些递归的事情，你就能做到！如果您希望reuse具有小到无修改功能，那么这会带来额外的好处。

Answer 3

我不知道这些功能是什么，因为我可能会创建一个功能。此演示演示了使用switch()方法确定按钮的特定类使用哪个函数。

演示

＆＃13;

$(function() {
  $('.btn').on('click', function() {
    var selected = $(this).attr('class');
    switch (selected) {
      case 'btn yellow':
        $('body').css('background-color', 'yellow');
        break;
      case 'btn red':
        $('body').css('background-color', 'red');
        break;
      case 'btn blue':
        $('body').css('background-color', 'blue');
        break;
      default:
        break;
    }
    return false;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='form'>
  <button class='btn yellow'>Yellow</button>
  <button class='btn red'>Red</button>
  <button class='btn blue'>Blue</button>
</form>

＆＃13;

jQuery性能Eventlistener

3 个答案:

演示