事件绑定是什么意思？

Question

事件绑定是什么意思？

javascriptjqueryeventsbindingclosures

16

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

- Rei

4

这是一个具有误导性的术语，用于将监听器附加到元素上，使得当相关事件引起元素处理程序响应时，监听器会被调用。 - RobG

1

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

4个回答

14

当您将某物绑定到事件时，当事件被触发时，它将被触发。这就像将一个雾笛粘贴到您汽车的刹车踏板上。

- Tak

优秀的说明。 - Jaime Montoya

5

当你在网页上执行某个操作时，它会触发一个事件。这可能是以下情况之一：

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

这些事件可以在你的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.
});

- James Wiseman

我相信有一些罕见的情况下我们需要使用onclick属性。但是感谢您对于后期绑定的建议。非常感激！:O) - Rei

1

@RobG - 我并没有说它总是误导人的，只是“经常”如此。 :-) 就个人而言，我从不使用它们，并且也没有遇到过必须使用它们的情况。反对它们（以及支持“非侵入式JavaScript”）的论点已经被广泛接受。请随意查看http://www.quirksmode.org/js/events_early.html，http://www.digital-web.com/articles/separating_behavior_and_structure_2/，http://www.alistapart.com/articles/behavioralseparation。你也可以尝试谷歌搜索“非侵入式JavaScript”来看看有什么结果。 - James Wiseman

@RobG，@Rei：你们让我很好奇。我已经提出了另一个关于这个问题的问题：https://dev59.com/HVjUa4cB1Zd3GeqPOzD4 - James Wiseman

使用服务器代码在生成HTML本身时附加内联监听器（通常缓存或保持为静态HTML）比根据客户端脚本的不确定性生成HTML，将其发送到客户端，然后附加监听器要高效得多。逻辑完全相同，只是在不同的位置完成。 - RobG

@RobG "效率更高"。你假设浏览器在DOM中解析onclick属性是免费的。如果使用document.addEventListener和onclick属性之间存在差异，那么这只是微小的优化，我不太关心。我更注重分离关注点。onclick属性的主要问题是事件处理程序必须在全局范围内，这只会导致作用域污染。 - Raynos

显示剩余2条评论

0

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

详细解释：

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

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

- Rakesh Sankar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Xion · Accepted Answer

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

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

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

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