1、DOM事件的级别
DOM 0级事件
element.οnclick=function(){}
DOM 2级事件
element.addEventListener('click',function(){},false)
DOM 3级事件
element.addEventListener('keyup',function(){},false);
2、DOM的事件模型
事件捕获 由上往下执行
事件冒泡 由下往上执行
3、DOM的事件流
事件捕获=>目标阶段=>事件冒泡
4、事件捕获/冒泡的具体流程
事件捕获流程:window => document => document.documentElement => document.body => ... => 目标元素
事件冒泡流程:目标元素 => document.body => document.documentElement => document => window
其中document指的是文档,document.documentElement指的是html元素
5、event对象的常见应用
event.preventDefault(); 阻止默认行为
event.stopPropagation(); 阻止冒泡行为
event.stopImmediatePropagation(); 这个方法可以绑定在一个定义了多个事件的元素上,如果在这个元素的某个事件上写了这个方法,那么就会阻止这个元素的其他的事件的响应。
event.target 指的是响应事件的当前的元素
event.currentTarget 指的是注册事件的元素,即使触发的是子元素,event.currenTarget指向的也依然是注册事件的元素。
6、自定义事件
var eve=new Event('custome'); || var eve2=new CustomeEvent('custome',data);
ev.addEventListener('custome',function(){
console.log();
});
ev.dispathEvent(eve);