这是不显眼的 javascript 的缺点之一吗？答案

【问题标题】：Is this one of the downsides of unobtrusive javascript?这是不显眼的 javascript 的缺点之一吗？
【发布时间】：2012-11-02 17:11:07
【问题描述】：

在 html 标签中添加内联 javascript（例如 onclick、onsubmit...等）被认为是不好的做法。

<form id="form1" onsubmit="return validate();">
...
</form>
<a id="link1" href="http://www.google.com/" onclick="return popup();">Link1</a>

但是如果我们像下面那样做，是否有可能validate 或popup 函数没有被调用，因为用户在调用 dom 就绪函数之前与页面交互？

<form id="form1">
...
</form>
<a id="link1" href="http://www.google.com/">Link1</a>
<script type="text/javascript">
$(document).ready(
    function(){
        $('#form1').submit(
            //validate
            function(){...}
        );
        $('#link1').click(
            //popup
            function(){...}
        );
    }
);
</script>

【问题讨论】：

在你上面的代码中，你不需要准备好，因为它出现在元素之后。使用 jQuery 1.7+，您可以在文档级别使用 on 并捕获内容。

标签： javascript jquery unobtrusive-javascript

【解决方案1】：

您始终可以将它们创建为禁用，然后使用ready 事件使它们仅在事件绑定后启用。

请注意，如果您尝试遍历其中的 DOM，HTML 中的 onxxx 可能会尝试访问尚不存在的内容，这可能会导致错误，并且比让用户等待几分之一秒更糟糕.

【讨论】：

【解决方案2】：

如果您的方法位于外部文件中，则无论您如何附加该方法，都可以在加载脚本之前访问该表单。为了更容易维护和关注点分离，这是一个小小的权衡。

【讨论】：

方法是否在外部文件中并不重要。脚本总是在浏览器继续解析页面的其余部分之前被解析。
@Guffa 你是说在脚本执行之前用户不可能与表单交互吗？您是否假设在 <head> 中加载了脚本？
我假设函数在调用它的代码之前存在，否则整个问题是没有意义的。
@Guffa 我认为这正是问题所在；如果您在表单之后加载的外部文件中定义了函数，则 DOM 可以在定义函数之前呈现。在快速机器/快速连接/适当架构的页面上更少，但仍然合理。无论如何，这就是我回答的核心。
在这种情况下，答案并没有回答问题，而是回答了其他问题。问题是关于内联绑定事件和在ready 事件中绑定它们之间的区别。如果您在页面末尾加载外部脚本，则行为没有实际差异。