事件绑定是啥意思？

Posted 2023-02-22

【中文标题】事件绑定是啥意思？

【英文标题】：What does event binding mean?事件绑定是什么意思？

【发布时间】：2011-09-13 20:56:27

【问题描述】：

事件绑定是什么意思？每当我在互联网上搜索时，我总是会遇到这个词，无论我试图寻找什么意思，它对我来说仍然是模糊的@_@ 前段时间，在阅读一些关于 javascript 的博客时，我看到人们使用这个我无法理解的神圣词。

【问题讨论】：

这是（误导性的）行话，用于将侦听器附加到元素，以便在相关事件导致元素的处理程序响应时调用它。

我相信事件监听器也是一个更合适的术语，因为它似乎与之相关，只是有点令人困惑，因为有些主题指的是过度使用/广泛的术语。谢谢！！

【参考方案1】：

事件绑定是指告诉浏览器，当某个“事件”发生时，应该调用一个特定的函数。事件主要与用户输入相关，例如点击。

在 jQuery 中绑定到事件的示例如下：

$("#elem").bind("click", function() 
    alert("Clicked!");
);

这会将函数绑定到标识符为elem 的DOM 对象的click 事件。当用户单击它时，将显示一个警报（消息框）。绑定是通过调用 jQuery bind 函数来完成的，但还有其他方法可以做到这一点（例如，在绑定到 click 事件的情况下使用 jQuery click 函数）。

【讨论】：

非常感谢！！我希望这是答案，因为我总是阅读具有广泛术语的东西并且它们出现在不同的情况下。我经常将绑定与某种范围的“分组”联系起来。

那么使用.bind和.on有什么区别呢？他们不是都做同样的事情吗？这两个都叫绑定吗？

.on 是用于事件绑定的更新且功能更强大的 API。其一，它支持所谓的事件委托，使您能够将处理程序附加到元素，以响应发生在其子元素上的事件。对于许多重复的元素（例如列表中的项目），这通常更清晰、更有效，尤其是在添加/删除它们时。

【参考方案2】：

当您将某些内容绑定到事件时，它会在事件触发时触发。这就像在汽车的制动踏板上粘上一个雾喇叭。

【讨论】：

优秀的插图。

【参考方案3】：

在 JS 中的绑定，是在实际进程开始之前捕获一些事件（如焦点、单击、鼠标悬停等）并执行一些其他操作。

详细解释：

http://triaslama.wordpress.com/2008/07/22/four-ways-javascript-binding-event-listeners/

http://api.jquery.com/bind/

【参考方案4】：

当您在网页上执行操作时，它会触发一个事件。这可能是这样的：

点击按钮 从下拉列表中选择一个值 将鼠标悬停在项目上

这些事件可以在您的 JavaScript 代码中捕获。

捕获事件的一种常见（并且经常被误导）方法是在 html 元素本身上执行此操作（如下面的onclick 属性所示）

<input id="MyButton" type="button" value="clickme" onclick="Somefunction()" />

所以，当用户点击按钮时，SomeFunction 函数将被执行。

但是，采用一种称为“后期绑定”的技术被认为是一种更好的方法。这可确保您的 HTML 和 JavaScript 完全分开。

所以，我们可以像这样修改上面的例子：

document.getElementById("MyButton").onclick = function()
   //functionality here.

jQuery 让这一切变得更加简单：

$("#MyButton").click(function()
    //functionality here.
);

【讨论】：

内联事件处理程序没有“被误导”。在某些情况下，它们是一个合理的选择。

我相信还有一些我们需要使用 onclick 属性的罕见情况。但感谢您对后期绑定的意见。欣赏它！ :O)

@RobG - 我没有说它总是被误导，只是“经常”。 :-) 就个人而言，我从不使用它们，也没有遇到过我必须使用它们的情况。反对他们的论点（以及“不引人注目的 JavaScript”）是公认的。随时查看quirksmode.org/js/events_early.html、digital-web.com/articles/separating_behavior_and_structure_2、alistapart.com/articles/behavioralseparation。您还可以尝试使用谷歌搜索“Unobtrusive JavaScript”以查看返回的内容。

@RobG, @Rei：你让我很好奇。我问过另一个问题：***.com/questions/6330771/…

@RobG 特定情况是什么？