事件：是用户或浏览器自身执行的某种动作
事件处理程序：响应事件的函数
事件流：从页面中接收事件的顺序
事件流
IE采用事件冒泡流
- 冒泡：由具体元素接收，逐级向上传播，直到
document / window对象
div->body->html->document->window
标准采用事件捕获流
- 捕获：由
document / window对象接收，沿DOM树向下传播，到具体元素
window->document->html->body->div
DOM事件流
- 分为三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段，也就是由父->子->父
事件对象
DOM中的事件对象
- 当
cancelable == true，可以使用preventDefault()取消默认行为 - 当
bubbles == true，可以使用stopPropagation()取消事件冒泡或捕获，立即停止事件在DOM层次中的传播 - 只有在事件处理程序的执行期间，
event才会一直存在，一旦处理完毕，event对象就会被销毁
IE中的事件对象
let event = window.event;
-
returnValue默认值是true，设置为false就可以取消事件的默认行为，相当于preventDefault() -
cancelBubble默认值是false，设置为true就可以取消事件冒泡，相当于stopPropagation()
事件处理程序
HTML事件处理程序
<script type="text/javascript">
function show(){
alert('hello world!');
}
</script>
<input type="button" value="click me" onclick="show()"/>
缺点：如果函数定义在页面的底部，用户在页面解析show()函数之前就单击了按钮，会引发错误
DOM0事件处理程序
- 会在事件流的冒泡阶段被处理
let btn= document.getElementById('button');
btn.onclick=function(){
alert('hello world!');
}
// 移除事件处理程序
btn.onclick=null;
DOM2事件处理程序
- 多个函数顺序执行
let btn= document.getElementById('button');
btn.addEventListener("click",function(){
alert('hello world!');
},true)
// 设置为true在捕获阶段调用，设置为false在冒泡阶段调用
// 移除事件处理程序
removeEventListener()
IE事件处理程序
- 多个函数逆序执行
- 由于IE只支持冒泡，所以所有的事件处理函数都会在冒泡阶段被调用
let btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
});
// 移除事件处理程序
detachEvent()
