事件：是用戶或?yàn)g覽器自身執(zhí)行的某種動作
事件處理程序：響應(yīng)事件的函數(shù)
事件流：從頁面中接收事件的順序
事件流
IE采用事件冒泡流
- 冒泡：由具體元素接收，逐級向上傳播，直到
document / window對象
div->body->html->document->window
標(biāo)準(zhǔn)采用事件捕獲流
- 捕獲：由
document / window對象接收，沿DOM樹向下傳播，到具體元素
window->document->html->body->div
DOM事件流
- 分為三個階段：事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，也就是由父->子->父
事件對象
DOM中的事件對象
- 當(dāng)
cancelable == true，可以使用preventDefault()取消默認(rèn)行為 - 當(dāng)
bubbles == true，可以使用stopPropagation()取消事件冒泡或捕獲，立即停止事件在DOM層次中的傳播 - 只有在事件處理程序的執(zhí)行期間，
event才會一直存在，一旦處理完畢，event對象就會被銷毀
IE中的事件對象
let event = window.event;
-
returnValue默認(rèn)值是true，設(shè)置為false就可以取消事件的默認(rèn)行為，相當(dāng)于preventDefault() -
cancelBubble默認(rèn)值是false，設(shè)置為true就可以取消事件冒泡，相當(dāng)于stopPropagation()
事件處理程序
HTML事件處理程序
<script type="text/javascript">
function show(){
alert('hello world!');
}
</script>
<input type="button" value="click me" onclick="show()"/>
缺點(diǎn)：如果函數(shù)定義在頁面的底部，用戶在頁面解析show()函數(shù)之前就單擊了按鈕，會引發(fā)錯誤
DOM0事件處理程序
- 會在事件流的冒泡階段被處理
let btn= document.getElementById('button');
btn.onclick=function(){
alert('hello world!');
}
// 移除事件處理程序
btn.onclick=null;
DOM2事件處理程序
- 多個函數(shù)順序執(zhí)行
let btn= document.getElementById('button');
btn.addEventListener("click",function(){
alert('hello world!');
},true)
// 設(shè)置為true在捕獲階段調(diào)用，設(shè)置為false在冒泡階段調(diào)用
// 移除事件處理程序
removeEventListener()
IE事件處理程序
- 多個函數(shù)逆序執(zhí)行
- 由于IE只支持冒泡，所以所有的事件處理函數(shù)都會在冒泡階段被調(diào)用
let btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
});
// 移除事件處理程序
detachEvent()
