Js代码单独放一个文件里元素注册的事件无效

jQuery库文件是在body元素之前加载的，但要操作dom元素必须等待dom元素加载完成后才能对dom操作。

页面加载过程有两个事件：

1. ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件，常用于jQuery）
2. onload，指示页面包含图片等文件在内的所有元素都加载完成（可以说：ready 在onload 前）

绑定元素事件响应的JS，一定要等到相应元素加载后或文档全部加载完成后再执行，否则无法找到元素不可绑定事件。

js代码单独放一个文件但元素绑定事件无效的原因分析：

1. js文件引用路径错误（解决方法：在浏览器检查调试，点引用链接看能否跳转到js文件）
2. 如果有用jQuery，要引用的jQuery库放在了js文件的后面导致”$”没有定义的错误（解决方法：在浏览器按f12）
3. 页面中引用了多个js文件并且有多个js文件里有window.onload事件，导致先加载的事件被后加载的事件覆盖
4. 最好保持js文件编码与html文件编码一致，统一用utf-8（不过我暂时没有遇到这种问题，网上有说这会导致js注册的事件无效）
5. 检查有没有加上window.onload或者$(document).ready(function(){})
6. 实在不行找一份能运行的代码直接对照着修改或把自己代码贴到能运行两个代码里（没错，我就是这么水，原谅我也是一个新手）

javascript延迟加载机制事件：load

window.onload()=function() { };

jQuery延迟加载事件则为：

$(document).ready(function(){});

load与ready的区别

window.onload	$(document).ready()
执行时机	网页全部加载完成，包括图片
执行次数	只能执行一次，第二次执行覆盖第一次执行的效果

需要注意的地方：

给按钮绑定一个事件，例如有一个id为”test”的按钮

<input type="button" id="test" value="click"/>

在javascript中按钮事件绑定的写法是：

onload = function(){
  document.getElementById("test").onclick=function() {
        alert("我是JS的测试");
    }
}

jQuery中事件绑定写法：

$(function() {
    $('#query').click ( function (event) {
        even.preventDefault();
        alert("我是JQ的测试");
    });
 });

javascript与JQuery的事件绑定不能混淆，混淆的结果会导致事件无法绑定，而且在浏览器调试时也不会报错，难以找到错误。

作为一个初学者一定掌握牢固的基础知识，掌握每一个细节的知识点，不然会花费大量的精力去调试前端代码。