1.事件对象event
event 对象只在事件处理程序执行期间存在，一旦执行完毕，就会被销毁。
1.1阻止默认事件发生
preventDefault()方法
作用：阻止特定事件的默认动作。比如，链接的默认在被单击时导航到 href 属性指定的 URL或是修改表单提交的默认事件。如果想阻止这些行为，可以在 onclick 事件处理程序中取消
<a href="https://www.baidu.com">百度一下</a>
<!-- 表单提交 -->
<form action="test.php">
<input type="submit" value="提交" id="inp1">
</form>
<script>
// 阻止a标签的默认事件发生
var a = document.getElementsByTagName('a')[0]
a.onclick = function () {
event.preventDefault();
console.log('a被点击了');
}
// 阻止表单事件的默认行为
var inp1 = document.getElementById('inp1')
inp1.onclick = function () {
event.preventDefault();
console.log('表单提交了');
}
</script>2.事件委托
事件委托就是当事件触发时，把要做的事委托给父元素（或父元素的父元素）来处理。也就是：利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。避免对特定的每个节点添加事件监听器，导致代码先期延迟
<ul id="father">
<li id="li1">who</li>
<li id="li2">where</li>
<li id="li3">what</li>
</ul>
<script>
// 分别获取三个子元素的节点
var li1 = document.getElementById('li1')
var li2 = document.getElementById('li2')
var li3 = document.getElementById('li3')
// 方法一 给三个子元素节点绑定事件
// li1.onclick = function () {
// console.log('zhangsan');
// }
// li2.onclick = function () {
// console.log('北京');
// }
// li3.onclick = function () {
// console.log('爬长城');
// }
// 方法二 利用事件委托
// 获取父元素节点
var father = document.getElementById('father')
// 给li的父元素添加了一个 onclick 事件处理程序
father.addEventListener('click', function (event) {
switch (event.target.id) {
case 'li1':
console.log('zhangsan');
break;
case 'li2':
console.log('北京');
break;
case 'li3':
console.log('爬长城');
break;
default:
break;
}
})
</script>因为所有列表项都是这个元素的后代，所以它们的事件会向上冒泡，最终都会由这个函数来处理。事件目标是每个被点击的列表项，只要检查 event 对象的 id 属性就可以确定，然后再执行相应的操作即可。相对于前面，用事件委托不会导致先期延迟，因为只访问了一个DOM元素和添加了一个事件处理程序。结果对用户来说没有区别，但这种方式占用内存更少。
最适合使用事件委托的事件包括：click、mousedown、mouseup、keydown 和 keypress。
3.事件类型
（1）用户界面事件（UIEvent）：涉及与 BOM 交互的通用浏览器事件。
load
在 window 上当页面加载完成后触发；在窗套<frameset>上当所有窗格<frame>都加载完成后触发；在<img>元素上当图片加载完成后触发；在<object>元素上当相应对象加载完成后触发。
<script>
//在 window 上当页面加载完成后触发
window.onload = function () {
console.log('onload');
}
//在<img>元素上当图片加载完成后触发
document.getElementsByTagName('img')[0].onload = function () {
console.log('img onload');
}
</script>unload
当页面完全卸载后在window上触发；当所有框架都卸载后在框架集上触发；当嵌入的内容卸载完毕后在<object>上触发。
<script>
//当页面完全卸载后在window上触发
window.onunload = function () {
console.log('onunload');
}
</script>select
在文本框（<input>或 textarea）上当用户选择了一个或多个字符时触发。
<input type="text" id="inp">
<script>
//获取input引用
var inp = document.getElementById('inp');
// select
inp.onselect = function (event) {
// 通过window.getSelection()获取到选中的部分
console.log(window.getSelection().toString());
}
</script>resize
在 window或窗格上，当window或窗格被缩放时触发。
<body onresize="myFun()">
<script>
function myFun() {
console.log(window.outerHeight, window.outerWidth);
}
</script>
</body>scroll
当用户滚动包含滚动条的元素时在元素上触发。<body>元素包含已加载页面的滚动条。
<div id="d1" style="width: 100px;height: 100px;border: 1px solid; overflow: auto;">我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
<script>
var d1 = document.getElementById('d1');
d1.onscroll = function () {
console.log('onscroll');
}
</script>（2）焦点事件（FocusEvent）：在元素获得和失去焦点时触发。
focus
当元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。
<input type="text" name="" id="inp">
<script>
var inp = document.getElementById('inp')
// 聚焦(获得焦点)
inp.onfocus = function () {
console.log('focus');
}
// 失焦
inp.onblur = function (event) {
console.log(event.target.value);
}
</script>（3）鼠标事件（MouseEvent）：使用鼠标在页面上执行某些操作时触发。
click
//在用户单击鼠标主键（通常是左键）或按键盘回车键时触发
dblclick
//在用户双击鼠标主键（通常是左键）时触发。
mousedown
// 在用户按下任意鼠标键时触发，不能通过键盘触发。
mouseenter
// 在用户把鼠标光标从元素外部移到元素内部时触发。
mouseleave
// 在用户把鼠标光标从元素内部移到元素外部时触发。
mousemove
在鼠标光标在元素上移动时反复触发，不能通过键盘触发。
mouseout
// 在用户把鼠标光标从一个元素移到另一个元素上时触发。移到的元素可以是原始元素的外部元素，也可以是原始元素的子元素，不能通过键盘触发。
mouseover
// 在用户把鼠标光标从元素外部移到元素内部时触发，不能通过键盘触发。
mouseup
// 在用户释放鼠标键时触发，不能通过键盘触发。
<div id="div1"></div>
<script>
var div1 = document.getElementById('div1')
// 单击事件
div1.onclick = function () {
console.log('单击');
}
// 双击事件
div1.ondblclick = function () {
console.log('双击触发');
}
// 鼠标移入
div1.onmouseenter = function () {
console.log('鼠标移入');
}
</script>（4）滚轮事件（WheelEvent）：使用鼠标滚轮（或类似设备）时触发。
<div id="div1"></div>
<script>
var div1 = document.getElementById('div1')
// 鼠标移出
div1.onmouseleave = function () {
console.log('鼠标移出');
}
</script>（5）键盘事件（KeyboardEvent）：使用键盘在页面上执行某些操作时触发。
键盘事件包含 3 个事件：
keydown：用户按下键盘上某个键时触发，而且持续按住会重复触发
keypress：用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发
keyup：用户释放键盘上某个键时触发。
当用户按下键盘上的某个字符键时，首先会触发 keydown 事件，然后触发 keypress 事件，最后触发 keyup 事件。如果一个字符键被按住不放，keydown 和 keypress 就会重复触发，直到这个键被释放。
对于非字符键，在键盘上按一下这个键，会先触发 keydown 事件，然后触发 keyup 事件。如果按住某个非字符键不放，则会重复触发 keydown 事件，直到这个键被释放，此时会触发 keyup 事件。
（6）输入事件（InputEvent）：向文档中输入文本时触发。
输入事件只有一个，即 textInput。这个事件是对 keypress 事件的扩展，用于在文本显示给用户之前更方便地截获文本输入。
键盘事件与输入事件综合案例
<input type="text" id="inp1">
<script>
var inp1 = document.getElementById('inp1');
// 按下某个按键是触发
inp1.onkeydown = function (event) {
if (event.keyCode == 13) {
console.log('确认');
console.log(this.value);
}
}
// 按下键盘上某个键并产生字符时触发，而且持续按住会重复触发
inp1.onkeypress = function (event) {
console.log(event.keyCode);
}
// 用户释放键盘上某个键时触发
inp1.onkeyup = function (event) {
console.log(event.keyCode);
}
// 键盘输入事件 必须使用DOM2级事件
inp1.addEventListener('textInput', function (event) {
console.log(event.data);
})
</script>更多的事件类型可见： Event - Web API 接口参考 | MDN