Question

事件处理程序可以主要以两种方式编写：

<input type="button" onclick="clickFunction()" />

或

 $('#btnID).click( function(){ .. });

有人必须在稍后阶段调试/维护此代码。在第一种情况下，我们可以做“检查元素”并快速找到执行的内容。在第二种情况下，我们必须找到正确的Document Loader代码来查找它的分配位置。

推荐的方式是什么？

Answer 1

推荐的方法是编写事件处理程序（第二个选项）。有关此背后的推理，请在this great article中查看“2.不要编写内联Javascript”。

此外，如果您希望编写更易于调试的代码，请考虑命名您的回调。这样，它们将在函数名称中显示js错误，而不是“未定义”。

$('#btnID).click( function someEvent(){ .. });

Answer 2

第二种方法是首选方法。这有几个原因：

首先，它将表示与逻辑分开。您不希望您的演示文稿（HTML）与您的逻辑混淆，因为事情变得难以维护。我喜欢将一个JavaScript区域用于“绑定”，以便我可以轻松地看到我的JavaScript逻辑挂钩到我的HTML中。但重要的是要将其保留在HTML本身之外。

其次，它可以防止代码重复。内联方法通常会产生如下代码：

[ <a href="javascript:void(0)" onclick="closeWindow()">X</a> ]
...
<button onclick="closeWindow()">Close Window</button>

问题是您最终会引用许多引用单个函数或方法的不同元素。如果该函数或方法以任何方式发生变化，您将需要寻找所有引用。这违反了基本的反码重复措施。做这样的事情要好得多

[ <a href="javascript:void(0)" class="closeWin">X</a> ]
...
<button class="closeWin">Close Window</button>
...
<script type="text/javascript">
    $(function() {
        $(".closeWin").on("click", closeWindow);
    });
</script>

第三，它允许某些用户操作的单个阻塞点，您可以在其中添加断点以进行调试。当然，你可以在被调用的任何函数中执行此操作，但是拥有专用的绑定区域似乎可以加快速度。

第四，它允许多个绑定。例如，您可能有三个按钮，前两个执行一个操作，后两个执行另一个操作（因此第二个按钮执行两个操作）。您可以在onclick中开始抛出多行JavaScript，如下所示：

<button onclick="one();">One</button>
<button onclick="one();two();">Two</button>
<button onclick="two();">Three</button>

这看起来很丑陋。你也可以使用一些尴尬的中间方法，如下：

<button onclick="one();">One</button>
<button onclick="oneAndTwo();">Two</button>
<button onclick="two();">Three</button>

这也是超级丑陋，将成为维护的噩梦。或者你可以做一些简单的绑定：

<button class="actionOne">One</button>
<button class="actionOne actionTwo">Two</button>
<button class="actionTwo">Three</button>
...
<script type="text/javascript">
    $(function() {
        $(".actionOne").on("click", one);
        $(".actionTwo").on("click", two);
    });
</script>

更清洁，更易于维护。

现在，关于如何确定附加哪些事件处理程序的问题，我没有一个完美的答案，但我确实有一个很好的答案：获取谷歌浏览器（这可能也适用于Safari）。当您在Google Chrome中检查某个元素时，它会为您提供一个附加到该元素的事件处理程序列表。

如果你按照我的建议在你的JavaScript中使用“绑定”部分，那么很容易缩小与什么绑定的范围。但使用Chrome它更快更容易。欢迎您编写代码，但是您看得最清楚。虽然人们普遍认为远程绑定比内联绑定更受欢迎。如何处理它们取决于你自己的经验和编程风格。

Answer 3

除了以上所有优秀的答案外，我还找到了一个名为Visual Event的工具，它为事件处理程序提供了很多可见性。

http://www.sprymedia.co.uk/article/Visual+Event

如何编写易于调试/维护的JavaScript事件处理程序

3 个答案: