这是我参与「第四届青训营 」笔记创作活动的第8天
本堂课的重点
重点是js的DOM文档事件的总结。
8.事件
(1)什么是事件
事件：js侦测到用户或浏览器与页面的交互行为
(2)事件三要素
事件源：事件被触发的对象
事件类型：触发什么事件，如点击事件 click
事件处理程序：触发事件后需要执行的函数
(3)事件执行的步骤
获取事件源
绑定事件
添加事件处理程序
(4)注册事件
传统方式 :同一个元素同一个事件只能设置一个处理函数，前面注册的函数会被后面的函数覆盖。
btn.onclick = function(){
console.log('你点我了')
}
事件监听 :同一个元素同一个事件可以添加多个处理程序
eventTarget.addEventListener(type,listener,useCapture)
type：事件类型
listener：事件处理程序
userCapture：true是捕获阶段触发，为false是冒泡阶段触发，默认为false
btn.addEventListener('click',function(){
console.log('你点我了')
})
(5)解绑事件
传统方式：eventTarget.onclick = null;
监听方式：eventTarget.removeEventListener(type,listener,userCapture)
(6)事件流
先发生捕获，实际目标发生事件，最后事件冒泡
三个阶段：
捕获阶段：document ->html ->body ->target
处理目标:
冒泡阶段：target->body->html->document
(7)事件对象
在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件相关的信息，包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。兼容DOM的浏览器默认会将event对象传入到事件处理函数中。
btn.onclick = function(event){
}
event即事件对象，一般简写为e 事件对象常见的方法和属性
e.currentTarget：返回触发对象
e.target：返回真正触发事件的对象
e.bubbles：事件是否冒泡
e.cancelable：是否可取消事件默认行为
e.eventPhase：调用事件处理程序的阶段；1捕获 2处于目标 3冒泡
e.type：返回事件类型
e.preventDefault()：阻止默认行为
e.stopPropagation()：阻止冒泡
(8)事件代理(委派)
事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。 为父元素添加子元素后，新添加的子元素也会触发事件。
<body>
<ul id="u">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var u = document.getElementById('u');
u.onclick=function(e){
e.target.style.color='red';
}
var l = document.createElement('li')
l.innerHTML = '4'
u.append(l)
</script>
</body>
(9)事件类型
窗口事件类型：blur（失去焦点）、focus（获得焦点）、load（加载时）、unload（卸载时）、resize（窗口大小发生变化时）、storage（web storage区域更新时）
表单事件：blur、focus、change（当控件的值发生更改时，并且失去焦点时触发）、input（当控件的值发生更改时触发）、invalid（元素无效时）、select（选中元素时）、submit（表单提交时）
键盘事件：keydown（按下按键）、keyup（松开按键）、keypress（当按下并松开时)
鼠标事件：click、dbclick（双击鼠标时）、mousedown（按下鼠标按钮）、mouseup（松开鼠标按钮时）、mousemove（鼠标移动时）、mouseover（鼠标移到元素之上时，有事件冒泡行为）、mouseout（鼠标移出元素时）、mouseenter（鼠标移到元素之上时，没有事件冒泡行为）、mouseleave（鼠标移出元素，）、mousewheel（转动鼠标滚轮时）、scroll（滚动元素滚动条时）
