DOM事件类
基本概念 DOM事件的级别
1.DOM0 element.onclick = function(){}
2.DOM2 element.addEventListener("click",function(){},false)
3.DOM3 element.addEventListener("key",function(){},falses)
一、DOM事件模型
1.捕获
2.冒泡
二、DOM事件流
当浏览器和用户交互的时候
事件捕获 - 目标 - 冒泡
三、描述DOM事件捕获的具体流程
具体流程： window - document - html - boby - element
四、Event对象的常见应用
elent.preventDefault() 阻止默认事件
elent.stopPropagation() 阻止冒泡流
elent.stopImmediatePropagation() 可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。
elent.currentTarge() 当前被点击的元素
elent.target()
当前被绑定的元素 （父元素）
五、自定义事件
var eve = new Event("custome");
ev.addEventListener("custome",function(){
console.log("custome");
})
触发：
ev.dispatchEvent(eve);
代码演示
<body>
<div id="ev">
<style type="text/css">
#ev{
width: 300px;
height:100px;
background: red;
color: #fff;
text-align: center;;
line-height: 100px;
}
</style>
目标元素
</div>
<script type="text/javascript">
// 捕获的流程 window-document - body - html - ev
// **如果是冒泡 把 true 改为false
// window
var ev = document.getElementById("ev");
window.addEventListener("click",function(){
console.log("window captrue");
},true);
// document
document.addEventListener("click",function(){
console.log("document captrue");
},true);
// body
document.documentElement.addEventListener("click",function(){
console.log("body captrue");
},true)
// html
document.documentElement.addEventListener("click",function(){
console.log("html captrue");
},true)
// body
document.documentElement.addEventListener("click",function(){
console.log("body captrue");
},true)
// click
ev.addEventListener("click",function(){
console.log("ev captrue");
},true)
// 自定义事件
var ev = new Event("test");
ev.addEventListener("test",function () {
console.log("test dispath");
})
ev.dispatchEvent(eves);
</script>
</body>
当点击触发div时候，事件发生的顺序为：
window captrue
js.dom.html:54 document captrue
js.dom.html:62 body captrue
js.dom.html:69 html captrue
js.dom.html:76 body captrue
js.dom.html:83 ev captrue