基础知识3--DOM事件

DOM事件类
1.基本概念（DOM事件的级别）
2.DOM事件模型（捕获、冒泡）
3.DOM事件流
4.DOM事件捕获的具体流程
5.Event对象的常见应用
6.自定义事件

基本概念---DOM事件的级别

• DOM0
  el.onclick = function(){//code...};
• DOM2
  el.addEventListener('click',function(){//code...},false);
• DOM3
  el.addEventListener('keyup',function(){//code...},false);

DOM事件模型（捕获、冒泡）

捕获------>目标阶段-------->冒泡

DOM事件流

事件通过捕获到达目标阶段然后上传到window对象

DOM事件捕获的具体流程

window接收---->document---->html----->html-----body-----目标元素
var btn = document.getElementById('btn');
window.addEventListener('click',function(){ console.log('window'); },true)//捕获阶段
document.addEventListener('click',function(){ console.log('document'); },true)
document.dcoumentElement.addEventListener('click',function(){ console.log('html'); },true)
document.body.addEventListener('click',function(){ console.log('body'); },true)
btn.addEventListener('click',function(){ console.log('btn'); },true)

Event对象的常见应用

• event对象是事件响应中最重要的对象
• event.preventDefault() 阻止默认事件
• event.stopPropagation() 阻止冒泡
• event.stopImmediatePropagation() 绑定两函数AB都会执行，如果用这个，A执行完会组织B。事件响应优先级
• event.currentTarget 当前绑定的事件对象
• event.target 事件委托，事件代理，把自己子元素绑定到它们的父元素上判断被点击哪个元素，target表示当前被点击的元素
• srcElement IE中的target

自定义事件

var ev = document.getElementById('test');//获取元素
var eve = new Event('custome');//创建自定义事件,只能指定事件名
ev.addEventListener('custome',function(){//code...})//为元素添加自定义事件
ev.dispatchEvent(eve);//触发自定义事件
new customEvent()可指定事件名和object参数