一、事件级别
DOM0
element.onClick = function(){}
DOM2
element.addEventLisenter('click', function(){}, false);
DOM3 增加了多种事件类型
element.addEventListener('keyup', function(){}, flase);
二、事件模型
捕获 自上而下
冒泡 自下而上
三、事件流
事件捕获阶段(capture phase)
处于目标阶段(target phase)
事件冒泡阶段(bubbling phase)
四、事件捕获具体流程
window → document → html → body → parent → child → target
五、Event对象常见应用
event.preventDefault(); //阻止默认事件
event.stopPropagation(); //阻止冒泡
event.stopImmediatePropagation(); //事件响应优先级
event.currentTarget; //当前绑定事件的元素,一般在事件委托时事件绑定在父元素
event.target; //当前被点击的元素
六、自定义事件
var event = new Event('custome');
element.addEventListener('customer', function(){
console.log('custome');
});
element.dispatchEvent(event);