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参数
