Question

基本上有多种方法可以使用javascript捕获“onclick”事件。

html：

<div id='menu'>
  <button>Title</button>
</div>

以下几个jQuery选项：

<script>
var menu = $('#menu');
var buttons = menu.find('button').click(menuEvent);

function menuEvent() {
  ..
}
</script>

<script>
var menu = $('#menu');
var buttons = menu.find('button');

buttons.click(function() {
  ..
});
</script>

<script>
var menu = $('#menu');
var buttons = menu.find('button');

buttons.get(0).onclick = function() {
  ..
});
</script>

现在他们看起来都一样，他们可能并不比彼此快。那么这三者中的哪一个将是“最佳”方法，或者可能有更好的方法？

我知道你可以用javascript做到这一点，但我还是计划使用jQuery，所以当它不需要时可能会让事情变得复杂。

Answer 1

最好的一个是：

buttons.on("click", function(event){
// code to run on click
});

此处有更多信息：http://api.jquery.com/on/

Answer 2

我不知道在您公开的方法中是否存在概念上的最佳方法。这更取决于具体情况。

如果您只想将事件处理程序附加到按钮上，这样做就可以了：
```
buttons.click(function() {
  ..
});
```
如果对于不同的元素组，相同的处理程序应该共享，您可以单独定义处理程序并用于不同的组：
```
function myClickHandler() {
    ...
}

buttons.click(myClickHandler);
otherButtons.click(myClickHandler);
```
.on()用于事件委派。在绑定发生后应将事件处理程序添加到DOM中插入的元素时，应转向事件委派。基本上，你＆＃34;绑定＆＃34;事件到父容器，使用选择器限制其执行到相关元素：
```
container.on('click', '.button', function() {
    // will execute when clicking on elements with class .button
    // present inside the container
});
```

处理点击事件的不同方式

2 个答案: