logo标签列表

JavaScript: onClick="" 与 jQuery.Click() 的区别

jqueryhtmlonclick
5

我有很多带有onClick事件的页面（每个页面都有其他元素带有自己的onClick事件）。所有页面都包含在一个主页面（index.php）中。

因此，我不能把所有jQuery onClick事件放在页面头部（因为<head>只在index.php中，而不在包含的页面中）。

现在是不是最好在我包含的每个页面中创建一个<script>...</script>？因为这样就不会在<head>中。

还是应该使用HTML属性onClick=""？

脚本通常不放在<head>标签中，而是放在</body>标签之前。如果您无法一次性向每个页面添加脚本元素，则需要重新考虑您的代码架构。 - Rich Bradshaw
3个回答
5
现在是否更好地在每个页面中都添加一个......？因为这不会出现在“head”中。<script>标签实际上不需要在头部，最好的位置（从性能角度来看）是在关闭</body>之前。是的，您还要尽可能使用外部JS文件。

总的来说，您几乎总是希望避免添加大量事件，而是要利用jQuery.on使用事件冒泡。

一个示例用法可能是：

$(document).ready(function() {
    $('body').on('click', '.myselector', function(e) {
        alert('Parameter: ' + $(this).attr('data-param'));
    });
});

你的HTML代码可能如下所示：

你的HTML代码可能如下所示：

<a href="#" class="myselector" data-param="Hello!">This is a button</a>

这将仅绑定一个事件，即在标签上。当你点击内的任何内容时，事件会冒泡到，如果你点击了这个选择器内部，则会执行该事件。 如果页面上没有.myselector，它将不做任何操作，所以这是可以接受的。

这是个好主意。但是我需要为一个使用onClick事件调用的函数提供不同的参数。例如，当按钮1被点击时，它会向函数发送参数“XY”，而按钮2则会发送参数“AB”。这种实现方式是否可行？ - SwiftedMind
1
@Akeno 一般的做法是在按钮上使用 data- 属性。我已经更新了我的答案，包括一个示例。 - Martin Tournoij
1
谢谢你提供的例子。听起来很有前途。关于这个问题，我还有一个最后的问题。一个元素中是否可以有多个data-param？例如，如果我需要为一个函数提供更多参数呢？ - SwiftedMind
1
是的，你可以有任意多个，但是显然你不能给它们相同的名称（例如，你不能有两个 data-param 属性）。你可能想要给它们有意义的名称（例如 data-location 或 data-action 等），你可以选择任何你想要的名称。你也可以使用单个 data- 属性，并通过逗号分隔值。 - Martin Tournoij
2

所有的JavaScript代码都应该放在外部文件中。这样可以提高性能和可维护性。

提高性能是因为浏览器可以缓存外部脚本，从而减少加载时间。

提高可维护性是因为您不必搜索大量的HTML文档才能找到一小段JavaScript代码。

在HTML中使用JavaScript也可能会影响解析器，您需要注意这一点。

如果无法将所有脚本放入外部文件中，则应重新考虑您网站的架构，因为这是正确的做法。

我不知道如何修改我的架构。我只是通过Ajax加载内容。我有index.php，当你点击button1时，$.ajax()调用page1.php，显示page1.php的内容。按钮2也是一样。我无法想象其他方法来实现这一点。即使是没有任何要包含的“普通”页面，我认为我也需要每个页面不同的javascript。 - SwiftedMind
您仍然可以将它们全部包含在主JavaScript文件中，只需在特定页面加载完成后（在AJAX调用完成后）绑定.Click()事件。 - Kevin
0
是的，但我使用Ajax工作，我不知道其他使用Ajax的方法。因为我想避免为一些琐碎的事情重新加载页面。许多页面都尝试这样做，我认为它们都使用了其他技巧？ - SwiftedMind
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接