Javascript 事件侦听器与事件处理程序

可能重复：

我已经读过了，但还不清楚它们之间有什么区别

<input type="button" onclick="call_function();" />

及

$（函数（）{
$（“#我的#按钮”）。单击（函数（）{
调用函数（）；
});
});

第一个是事件处理程序，第二个是事件侦听器，对吗

---

一种方式比另一种好吗？为什么？哪一个更适合处理优雅的降级？

从功能上讲没有区别。在这两种情况下，当单击给定的

按钮

元素时，将调用方法

call\u函数

虽然在风格上有很大的不同。许多人认为后一个示例更健壮，因为它允许开发人员将at HTML页面的3个部分分离为完全不同的项

• HTML页面：包含页面的数据
• CSS样式表：确定数据的显示方式
• Javascript：提供行为

---

在第二个示例中，这是可能的，因为javascript行为独立于按钮的定义进行连接。这使得HTML的定义完全独立于相关的javascript。它们可以放在不同的文件中，由不同的人编写，并且大部分是独立变异的。有一些限制（如不更改

id

字段），但总的来说，它在逻辑上不同的显示块之间提供了很大的自由度

从功能上讲没有区别。在这两种情况下，当单击给定的

按钮

元素时，将调用方法

call\u函数

虽然在风格上有很大的不同。许多人认为后一个示例更健壮，因为它允许开发人员将at HTML页面的3个部分分离为完全不同的项

• HTML页面：包含页面的数据
• CSS样式表：确定数据的显示方式
• Javascript：提供行为

---

在第二个示例中，这是可能的，因为javascript行为独立于按钮的定义进行连接。这使得HTML的定义完全独立于相关的javascript。它们可以放在不同的文件中，由不同的人编写，并且大部分是独立变异的。有一些限制（如不更改

id

字段），但总的来说，它在逻辑上不同的显示块之间提供了很大的自由度

事件处理程序是浏览器为响应特定事件而调用的函数或其他代码块

---

在给定的上下文中，事件监听器是javascript库（此处为jquery）引入的更高级别抽象，该库将为您创建事件处理程序，该处理程序将调用一些代码，这些代码将遍历监听器并逐个调用它们。因此jquery对您隐藏了维护侦听器函数列表并调用它们的逻辑

事件处理程序是浏览器为响应特定事件而调用的函数或其他代码块

---

在给定的上下文中，事件监听器是javascript库（此处为jquery）引入的更高级别抽象，该库将为您创建事件处理程序，该处理程序将调用一些代码，这些代码将遍历监听器并逐个调用它们。因此jquery对您隐藏了维护侦听器函数列表并调用它们的逻辑

在这里查看我的答案：与此相同的问题：@adamjmarkham我想我已经清楚地表明我已经阅读了这个问题。我发布的那个问题怎么样？几乎是相同的想法，但可能以不同的方式解释？哎呀，对不起，没有正确阅读。希望你能得到你的答案。在这里查看我的答案：与此相同的问题：@adamjmarkham我想我已经清楚地表明我已经阅读了这个问题。我发布的那个问题怎么样？几乎是相同的想法，但可能以不同的方式解释？哎呀，对不起，没有正确阅读。希望你能得到你的答案。所以这更像是分离关注点，而不是其他什么？我知道这不会对最终用户产生影响，但会让程序员更容易吗？@pessimoppotamus这是差异的一个重要部分如果要更改在单击事件中引发的函数的名称，则必须返回html代码并更改onclick=“”的值如果您正在缩小javascript以减小js段塞大小，您可能希望它出现在javascript代码中，而不是在单击时内联。此外，如果您正在考虑为js命名，以避免将对象定义为全局范围，那么最好在js中定义click事件。另一个原因是安全问题。使用firebug编辑onclick属性要比编辑javascript代码容易得多注意，关注点的分离有其自身的开销：昨天在我当前的项目中，我在样式表中找到了从HTML中删除的元素的特定于ID的CSS，以及一些不再在任何地方引用的遗留CSS类，对于JS来说，它被打破了，因为它假设这些元素存在——由三个不同的人所做的更改，他们都没有看到全局。（我并不是说你不应该分离。）所以这更像是分离关注点？我知道这不会对最终用户产生影响，但会让程序员更容易吗？@pessimoppotamus这是差异的一个重要部分如果要更改在单击事件中引发的函数的名称，则必须返回html代码并更改onclick=“”的值如果您正在缩小javascript以减小js段塞大小，您可能希望它出现在javascript代码中，而不是在单击时内联。如果您正在考虑为您的js t命名

$(function() {
    $("#my_button").click(function() {
        call_function();
    });
});
<input type="button" id="my_button" />