- 基本概念:
- DOM事件模型:
- DOM事件流
- 描述DOM事件捕獲的具體流程
- Event對象的常見應用
- 自定義事件
一、DOM事件的級別
- DOM0:
element.onclick=function(){}
- DOM2:
element.addEventListener('click',function(){},false)
(true表示在捕獲階段觸發,false表示在冒泡階段觸發,默認是false);
- DOM3:
element.addEventListener('keyup',function(){},false)
(true表示在捕獲階段觸發,false表示在冒泡階段觸發,默認是false),增加了很多事件類型;
二、DOM事件模型
- 事件捕獲:從上往下找到目標元素
- 事件冒泡:從目標元素往上查找
三、DOM事件流:瀏覽器為當前頁面和用戶做交互的過程中發生的過程,一個完整的事件流分三個階段。
- 事件捕獲
- 目標階段
- 事件冒泡
事件通過捕獲到達目標元素,這個時候就是目標階段,第三個階段就是從目標元素上傳到window對象。
四、描述DOM事件捕獲的具體流程
window --> document --> html(用js表示html節點的方法:document.documentElement;) --> body --> ··· --> 目標元素
<body>
<div id="ev">
<style>
#ev {
width: 300px;
height: 100px;
background: #f00;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
目標元素
</div>
<script type="text/javascript">
var ev = document.getElementById("ev");
ev.addEventListener('click', function() {
console.log("ev capture");
}, true);
window.addEventListener('click', function() {
console.log("window capture");
}, true);
document.addEventListener('click', function() {
console.log("document capture");
}, true);
document.documentElement.addEventListener('click', function() {
console.log("html capture");
}, true);
document.body.addEventListener('click', function() {
console.log("body capture");
}, true);
</script>
</body>
// 打印結果是
// window capture
// document capture
// html capture
// body capture
// ev capture
五、Event對象的常見應用
-
event.preventDeault()
:阻止默認行為;
-
event.stopPropation()
:阻止事件冒泡;
-
event.stopImmeidiatePropagation()
:阻止其他事件(若一個按鈕綁定了兩個或多個事件:事件a、事件b、……。當下場景想要實現點擊按鈕的時候只執行事件a,其他事件不執行,則在事件a的函數中加上event.stopImmeidiatePropagation()
就能實現);
-
event.currentTarget
:當前所被綁定的事件;
-
event.target
:當前被點擊的元素(早期的ie版本不支持,早期ie用event.srcElement
);
六、自定義事件(模擬事件)
- 自定義事件和自定義觸發事件的過程(只能指定事件名,不能給事件加數據)
// eve就當作普通的事件
var eve = new Event("custome");
// ev就是普通的DOM節點
ev.addEventListener("custome",function(){
console.log("custome");
},false);
// 此時是自動觸發事件,通常和其他事件結合使用
ev.dispatchEvent(eve);
// 延時5秒后觸發
setTimeout(function() {
ev.dispatchEvent(eve);
}, 5000);
-
CustomeEvent
(除了指定事件名,還能給事件加一個Object,用來傳遞自定義參數);