DOM事件学习笔记

事件流

事件冒泡：IE的事件流，即事件最开始由最具体的元素接受，然后逐级向上传播至最不具体的元素。

事件捕获：与事件冒泡相反。
stopPropagation()阻止事件冒泡。
例如：

<div id="btn1">

<input type="button" value="按钮" id="btn2"> 
</div>
如果在input和div元素都有onclick 事件，触发input的onclick事件会同时触发div的onclick事件。

事件处理程序

DOM2级事件处理程序
定义了两个方法--用于处理指定和删除事件处理程序的操作：
addEventListener()添加事件监听程序
removeEventListener()移除事件监听程序
三个参数设置;事件名称，处理方法(函数)，布尔值--false：表示在冒泡阶段调用事件处理程序(可以最大限度的兼容浏览器)，一般设为false；true表示在捕获阶段调用事件处理程序

btn3.addEventListener('click',showMes,false);
注意：
1、若事件名称有on，则需去掉on。onclick --> click，onmouseover --> mouseover等等；
2、false 最大限度兼容所有浏览器--事件冒泡流。
3.通过addEventListener添加的事件只能通过removeEventListener来删除。--参数要与添加事件时相同
btn3.removeEventListener(参数);//参数必须和btn.addEventListener的参数一致，删除事件监听

DOM2级事件处理程序可以给一个事件绑定多个函数，事件触发的时候会按照绑定顺序执行各个函数。如下所示：
btn3.addEventListener('click',showMes,false);
btn3.addEventListener('click',showMes,function(){alert(this.value）;},false);
DOM0级事件则后面添加的同一事件类型会覆盖前面的；
缺点：DOM2级事件处理程序，ie不支持，ie有专用的事件处理程序