进展事件和表格事情
1.文档的载入
网页在载入一个网页时，是依据从上往下顺序载入的，载入一行实行一行。 如果把js代码撰写到界面的上面，当执行命令时，页面上的DOM目标都还没载入， 这时可能不能正常掌握到DOM目标，造成DOM操作失败。
解决方式一：
能将js代码编写到body的下面
<body>
<button id="btn">按键</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
};
</script>
</body>
解决方式二：
将js代码编写到window.onload = function(){}中
window.onload 相对应的调用函数会到全部页面加载结束之后才实行，
因此能够确保执行命令时，DOM目标早已载入完毕了
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
};
};
</script>
2.进展事件类型
进展事情用于叙述网络资源载入的进度，主要是由 AJAX 要求、<img>、<audio>、<video>、<style>、<link>等外部资源的载入开启，继承ProgressEvent插口。它主要包括以下这些事情。
abort：外部资源中断载入时（例如客户撤销）开启。假如出现错误造成中断，不容易开启此次事件。error：因为失误造成外部资源无法加载时开启。load：外部资源载入成功时开启。loadstart：外部资源逐渐载入时开启。loadend：外部资源终止载入时开启，产生次序排到error、abort、load事件后后边。progress：外部资源载入环节中持续开启。timeout：载入请求超时时开启。
留意，除开资源分享，文件传送也存在这种事情。
下边是一个事例。
image.addEventListener('load', function (event) {
image.classList.add('finished');
});
image.addEventListener('error', function (event) {
image.style.display = 'none';
});
上边编码在照片原素加载完成后，为照片原素添加一个finished的 Class。假如加载失败，把照片元素款式设定为不表明。
有时，图片加载会到脚本运行前就进行，特别是当脚本制作放置于网页底部时，因此有很有可能load和error事件监视函数公式肯定不会实行。因此，较为靠谱的形式，要用complete特性先分辨一下是不是加载完成。
function loaded() {
// ...
}
if (image.complete) {
loaded();
} else {
image.addEventListener('load', loaded);
}
因为 DOM 元素连接点没有提供是不是载入不正确的特性，因此error事件监视函数公式最好是放到<img>元素 HTML 编码中，才能保证产生载入不正确时100%会实行。
<img src="/wrong/url" onerror="this.style.display='none';" />
loadend事件监视函数公式，可用于替代abort事情、load事情、error事件监视函数公式，因为他总是会在这种事件之后产生。
req.addEventListener('loadend', loadEnd, false);
function loadEnd(e) {
console.log('传送完毕，成功与失败不明');
}
loadend事情自身未提供有关进展结束缘故，但能用它做全部载入完毕情景都应该做的一些实际操作。
此外，error事情有一个特殊特性，就是会冒泡泡。因此，子元素的error事情，不容易开启父元素的error事情监视函数公式。
3.表格事件类型
3.1 input 事情
input事情当<input>、<select>、<textarea>数值变化时开启。针对勾选框（<input type=checkbox>）或单选框（<input type=radio>），客户更改选择项时，还会开启这件事情。此外，针对开启contenteditable属性原素，只需值产生变化，还会开启input事情。
input事件一个特性，就是容易持续开启，例如客户每启动一次功能键，便会开启一次input事情。
input事件对象继承InputEvent插口。
此次事件跟change事情特别像，不同之处在于input事情在原素数值产生变化后马上产生，而change在原素失去焦点后发生，而具体内容这时或许已经转变数次。换句话说，若是有持续转变，input事情会开启数次，而change事情只能在失去焦点时开启一次。
以下是<select>原素的事例。
/* HTML 编码如下所示
<select id="mySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
*/
function inputHandler(e) {
console.log(e.target.value)
}
var mySelect = document.querySelector('#mySelect');
mySelect.addEventListener('input', inputHandler);
上边编码中，更改下拉列表选择项时，会开启input事情，进而实行调用函数inputHandler。
3.2 select 事情
select事情如在<input>、<textarea>里边选定文字时开启。
// HTML 编码如下所示
// <input id="test" type="text" value="Select me!" />
var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {
console.log(e.type); // "select"
}, false);
挑中文字能通过event.target元素selectionDirection、selectionEnd、selectionStart和value特性取得。
3.3 change 事情
change事情当<input>、<select>、<textarea>数值变化时开启。它和input事件较大不一样，就是会持续开启，只有在所有改动进行的时候才会开启，另一方面input事情必定随着change事情。从总体上，分为以下这些状况。
- 激话单选框（radio）或勾选框（checkbox）时开启。
- 客户递交时开启。例如，从以下目录（select）进行挑选，在日期或文档文本框进行挑选。
- 当输入框或
<textarea>原素数值发生变化，而且缺失聚焦点时开启。
下边是一个事例。
// HTML 编码如下所示
// <select size="1" onchange="changeEventHandler(event);">
// <option>chocolate</option>
// <option>strawberry</option>
// <option>vanilla</option>
// </select>
function changeEventHandler(event) {
console.log(event.target.value);
}
假如比较一下上边input事情的事例，你就会发现针对<select>原素而言，input和change事情基本上是等额的的。
3.4 invalid 事情
客户提交表单时，假如表单元素数值不符合校检标准，便会开启invalid事情。
<form>
<input type="text" required oninvalid="console.log('invalid input')" />
<button type="submit">递交</button>
</form>
上边编码中，文本框是选填的。假如不填，客户点击图标递交时，便会开启文本框的invalid事情，造成递交被撤销。
3.5 reset 事情，submit 事情
这俩事情发生在表格目标<form>上，而非出现于表格中的一员上。
reset事情当表格重设（全部表格组员变成初始值）时开启。
submit事情当表单数据向网站服务器递交时开启。留意，submit发生的几率目标是<form>原素，而非<button>原素，由于递交是指表格，而非按键。