处理点击事件的不同方式

发布于 2024-12-29 06:00:12 字数 749 浏览 0 评论 0原文

基本上有多种选项可以使用 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，所以在不必要的时候它可能会让事情变得复杂。

原文

Basically there are multiple options to catch "onclick" events with javascript.

The html:

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

The following few jQuery options:

<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>

Now they all look the same and they are probably not really faster than one another. So which of these three would be the "best" approach or maybe there is a better way?

I know you can do this with just javascript, but I plan on using jQuery anyway so it might complicate things when it doesn't have to.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

扭转时空 2025-01-05 06:00:12

最好的一个是：

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

更多信息在这里：http://api.jquery.com/on/

Best one would be :

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

More info here : http://api.jquery.com/on/

回复收藏 0 原文

灼痛 2025-01-05 06:00:12

我不知道您所公开的方法在概念上是否存在最佳方法。这更多地取决于上下文。

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

按钮.click(myClickHandler);
otherButtons.click(myClickHandler);
```
.on() 用于事件委托。当绑定发生后应将事件处理程序添加到插入到 DOM 中的元素时，您应该转向事件委托。基本上，您将事件“绑定”到父容器，使用相关元素的选择器来限制其执行：
```
container.on('click', '.button', function() {
    // 当点击类为 .button 的元素时执行
    // 存在于容器内
});
```

I don't know if there is conceptually a best approach in the ones you expose. It more depends on the context.

If you want to attach an event handler to only the buttons, this way od doing is okay:
```
buttons.click(function() {
  ..
});
```
If the same handler should be shared for different groups of elements, you can define the handler separately and use for the different groups:
```
function myClickHandler() {
    ...
}

buttons.click(myClickHandler);
otherButtons.click(myClickHandler);
```
.on() is for event delegation. When an event handler should be added to elements inserted in the DOM after your bind occurs, you should turn to event delegation. Basically, you "bind" the event to a parent container, restraining its execution using a selector to the elements in question:
```
container.on('click', '.button', function() {
    // will execute when clicking on elements with class .button
    // present inside the container
});
```

回复收藏 0 原文

~没有更多了~