事件处理程序主要有两种编写方式:
<input type="button" onclick="clickFunction()" />
或者
$('#btnID).click( function(){ .. });
有人需要在后期调试/维护这段代码。在第一种情况下,我们可以使用“检查元素”功能快速找到执行的内容。在第二种情况下,我们需要找到正确的文档加载器代码以找到它的位置。
那么,推荐的方法是什么?
事件处理程序主要有两种编写方式:
<input type="button" onclick="clickFunction()" />
$('#btnID).click( function(){ .. });
有人需要在后期调试/维护这段代码。在第一种情况下,我们可以使用“检查元素”功能快速找到执行的内容。在第二种情况下,我们需要找到正确的文档加载器代码以找到它的位置。
那么,推荐的方法是什么?
$('#btnID).click( function someEvent(){ .. });
第二种方法是首选方法。原因有几个:
首先,它将演示与逻辑分开。您不希望将演示(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>
<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中添加一个“bindings”部分,那么缩小绑定的范围就相当容易了。但是使用Chrome会更快捷、更轻松。您可以按照自己的理解编写代码。虽然通常认为远程绑定优于内联绑定。如何进一步处理取决于您自己的经验和编程风格。
btnSubmit
的内容作为提交按钮并不罕见。这是在许多页面上可能发生的情况。@srini.venigalla 在这种情况下,您需要将脚本分隔成单独的文件。您可以将通用功能放在一个脚本中,多个页面可以使用该脚本,并且每个页面都有自己的特定于页面的脚本,只包含在相关页面中。 - Shmiddty