关于引用JS文件无效的问题

最新推荐文章于 2024-07-24 02:06:23 发布

原创最新推荐文章于 2024-07-24 02:06:23 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了JavaScript文件在HTML文档中不同位置加载时，对DOM元素操作的影响。通过实例对比，分析了JS前置与后置加载在事件绑定、jQuery使用及立即执行函数上的表现差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本来以为JS文件的引用是理所当然的事，偶尔失效也认为是浏览器缓存的问题。最近遇到次数多了，清浏览器缓存也没用，不得不总结下了
页面随便写2个按钮，分别在前后位置引入js

<body>
<script type="text/javascript" src="/js/test1.js"></script><!--引入JS在DOM前面-->
<button onclick="a1()">js前置</button>
<button onclick="a2()">js后置</button>
<!--<button id="a1">id js前置</button>
<button id="a2">id js后置</button>-->
<script type="text/javascript" src="/js/test2.js"></script><!--引入JS在DOM后面-->
</body>

两个js文件中的代码只是方法名不同

function a2() {
    alert("a2")
}

首先是onclick事件调用js文件中的方法，这时引用位置在DOM之前，会报Uncaught TypeError: a1 is not a function方法未定义的错误；JS引用在DOM后面则正常。

再来试下jQuery的写法，按钮给个ID属性（要先引入jQuery）

<body>
<script type="text/javascript" src="/js/test1.js"></script><!--引入JS在DOM前面-->
<button onclick="a1()">js前置</button>
<button onclick="a2()">js后置</button>
<button id="a1">id js前置</button>
<button id="a2">id js后置</button>
<script type="text/javascript" src="/js/test2.js"></script><!--引入JS在DOM后面-->
</body>

js中分别加上jQuery点击事件

$("#a2").on("click", function () {
    alert("a2");
})

测试结果同样是后置的正常，但这回前置的不但没效果，连提示都没有了。

最后看看绑定立即执行函数加载事件又是怎么样的？在JS代码中都加上$(function ()

$(function () {
    function a2() {
        alert("a2")
    }

    $("#a2").on("click", function () {
        alert("a2");
    })
})

在这里插入图片描述
这么写不管是前置还是后置，js定义的方法都认不到了。但是jQuery点击事件都能正常运行。

记得之前学这一块的时候，得到的建议是尽量把js代码都放在后面，理由是方便维护。因为不懂个中原理，对引用位置想当然了。现在看来，如果涉及到对DOM的操作，最后把JS引用放在后面。