DOM事件

1、DOM事件的级别

DOM0 element.onclick=function(){}
DOM2 element.addEventListener(‘click’,function(){}, true)
DOM3 element.addEventListener(‘click’,function(){}, true)

2、DOM事件模型（你了解DOM事件模型吗）

捕获冒泡
window document html body …

3、DOM事件流

事件捕获 -》目标阶段 -〉冒泡

4、描述DOM事件捕获的具体流程

捕获是从上到下的过程
冒泡是从下到上的过程
dom

5、Event对象的常见应用

event.preventDefault() // 阻止默认行为
event.stopProgration() // 阻止冒泡
event.stopImmediateProgration() // 事件响应优先级的方法
event.target // 事件委托/代理，当前被点击的元素，早期的ie是不支持的
event.currentTarget // 返回触发事件的元素

e.target 指向触发事件监听的对象。// 谁触发
e.currentTarget 指向添加监听事件的对象 // 谁绑定

6、自定义事件

var eve = new Event(‘look’);
ele.dispachEvent(eve);
以上这种创建方法不好的地方就是不能带参数
需要带参数用 customEvent

7、事件绑定

有三种常用的事件绑定方式：
(1)直接在DOM中绑定；

1	<button onclick=test()>test</button>

1
2
3

function test(){
	alert(‘test’);
}

(2)在JavaScript代码中绑定；

1
2
3

document.getElementById(‘test’).onclick = futnciton(){
	alert(‘test’);
}

(3)绑定事件监听函数
document.getElementById(‘test’).addEventListener(‘click’,function(){ alert(‘test’)}, true);

8、事件监听（事件流）

addEventListener(‘click’,function(){}, true); // 第三个参数true捕获，false冒泡
element.attachEvent(event, function) //ie8 以下
事件捕获阶段，目标阶段，事件冒泡阶段
事件监听的优点是可以绑定多个事件，可以移除事件绑定（常规事件绑定只执行最后一个）

9、事件委托

事件委托就是利用冒泡的原理，把事件加的父元素或者祖先元素上，触发执行效果。
事件委托的优点：
(1)提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用；
(2)动态的添加DOM元素，不需要因为元素的改动而修改事件绑定