3

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

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

或者

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

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

推荐的方法是什么？

4

3 回答 3

3

推荐的方法是编写一个事件处理程序（第二种选择）。有关这背后的原因，请查看这篇精彩文章中的“2. 不要编写内联 Javascript” 。

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

$('#btnID).click( function someEvent(){ .. });
于 2012-09-05T20:20:54.060 回答
1

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

首先，它将表示与逻辑分开。您不希望您的演示文稿 (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>

更清洁，更易于维护。

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

如果您遵循我关于在 JavaScript 中添加“绑定”部分的建议，那么很容易缩小绑定到什么的范围。但是使用 Chrome 会更快更容易。欢迎您编写您认为最好的代码。尽管人们普遍认为远程绑定优于内联绑定。除此之外如何处理它们取决于您自己的经验和编程风格。

于 2012-09-06T05:06:28.490 回答
0

除了上述所有出色的答案之外，我还发现了一个名为 Visual Event 的工具，它为事件处理程序提供了很多可见性。

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

于 2012-09-06T21:00:05.673 回答