Javascript 使用OnClick=或与脚本一起附加事件侦听器

虽然已经有人问过了，但我想谈谈正确的jQuery编程问题

方法#1：

函数DoClickAction（）{
//一些工作
返回false；
}

VS

方法2：

$（函数（）{
$（“#操作按钮”）。在（“单击”，DoClickAction）；
}
函数DoClickAction（）{
//一些工作
返回false；
}

我正在与我的同事讨论这个问题，我的观点是，这两种方法都有足够的利弊，不能说“这是正确的方法”，但如果我不得不选择，我倾向于选择方法1，这就是为什么：

方法#1优点：

• 在调试其他人的代码时，当有人按下链接时，您可以很容易地跟踪执行哪个jQuery代码
• 动态加载（AJAX调用）内容时，它将始终工作，无需重新绑定jQuery事件

方法#2优点：

• 它将生成较少的HTML代码供浏览器下载，因为脚本文件将被缓存，并且不需要onclick属性
• 通过使用相同的属性，您可以轻松地重用代码，尽管使用onclick with 1函数也是一样的

---

你对此有何看法？

我本人非常喜欢#2，因为它提供了JavaScript和HTML的清晰分离。没有按钮的动作在HTML中立即可见的负面影响可以被浏览器插件完全否定

---

此外，如您所述，有时我想将onclick事件附加到（比如）表的每一行，并且在每一行上设置元素的onclick属性比在其他地方用一行代码简单地将单击处理程序附加到每一行要浪费得多。

我自己非常喜欢#2，因为它提供了JavaScript和HTML的清晰分离。没有按钮操作在HTML中立即可见的缺点可以被浏览器插件完全否定

---

此外，如您所述，有时我想将onclick事件附加到（比如）表的每一行，并且在每一行上设置元素的onclick属性比在其他地方用一行代码简单地将单击处理程序附加到每一行要浪费得多。

与其列出这两种方法的pro，不如让我将重点放在方法1的缺点上：

• 更改函数名==更改整个标记
• 所有事件处理程序都驻留在全局范围内。因此，使用闭包可能有点麻烦
• 动态添加新元素（通过JS或通过ajax响应）意味着您要么必须逐个解析标记并添加属性，要么必须发送包含JS函数调用的标记。不安全，不干净
• 每个属性都是一个新的侦听器。属性越多，事件循环将变得越重
• 混合使用JS和HTML被认为是不好的做法。将其视为关注点的分离。标记是为了向客户端提供UI。JS的工作（在浏览器中）是为了增强用户体验。它们必须协同工作，但有不同的任务。因此，它们应被视为单独的实体

就第二种方法而言，我能想到的唯一“缺点”是：

• 您的代码稍难理解，但在我看来，如果有人不知道事件侦听器是什么，他就不应该在编写您的代码
• 调试可能会更困难，而且旧的浏览器可能会泄漏（jQ确实包含大量与X浏览器相关的代码，因此它不适用于这里。在编写vanillaJS时确实如此）

除此之外，method2还有另一个主要的优点，您没有列出：委派。起初，委派看起来很难，但是，jQuery使它更容易，仍然可以使用委派来委派事件。
基本上，委派允许您使用单个侦听器处理整个页面或页面的一部分的所有事件，例如

单击

。这与将事件绑定到每个元素不同。因此：事件循环上有一个侦听器，而不是十个/数百个。很明显，哪一个更有效gs

假设页面上有一个导航div，如下所示：

<div id='nav'>
    <ul>
        <li id='nav-home'>Some pseudo-link</li>
        <li id='nav-page1'>Another</li>
    </ul>
</div>

---

与其列出这两种方法的优点，不如让我重点介绍方法1的缺点：

• 更改函数名==更改整个标记
• 所有事件处理程序都驻留在全局范围内。因此，使用闭包可能有点麻烦
• 动态添加新元素（通过JS或通过ajax响应）意味着您要么必须逐个解析标记并添加属性，要么必须发送包含JS函数调用的标记。不安全，不干净
• 每个属性都是一个新的侦听器。属性越多，事件循环将变得越重
• 混合使用JS和HTML被认为是不好的做法。将其视为关注点的分离。标记是为了向客户端提供UI。JS的工作（在浏览器中）是为了增强用户体验。它们必须协同工作，但有不同的任务。因此，它们应被视为单独的实体

就第二种方法而言，我能想到的唯一“缺点”是：

• 您的代码稍难理解，但在我看来，如果有人不知道事件侦听器是什么，他就不应该在编写您的代码
• 调试可能会更困难，而且旧的浏览器可能会泄漏（jQ确实包含大量与X浏览器相关的代码，因此它不适用于这里。在编写vanillaJS时确实如此）

除此之外，method2还有另一个主要优点，您还没有列出：委派

<script>
     $(function() {
          $("#ActionButton").on("click", DoClickAction);
     }

     function DoClickAction() {
          // Some work
          return false;
     }
</script>

<a href="#" id="ActionButton">Do some work</a>

<div id='nav'>
    <ul>
        <li id='nav-home'>Some pseudo-link</li>
        <li id='nav-page1'>Another</li>
    </ul>
</div>

//jQ
$('#nav').on('click','li',function(e)
{
    $.ajax({//you know the gist
        url: 'ajax/' + $(this).id().replace('nav-',''),
        success: function(){}
    });
});
//vanillaJS:
document.getElementById('nav').addEventListener('click',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (e.tagName.toLowerCase() === 'li')
    {
        //perform ajax call
    }
},false);