Dom事件探秘
- time: 2016-01-19 17:30
一.理解事件流
1.含义：
描述的是从页面中接受事件的顺序.
2. 事件冒泡
描述事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。（IE,chrom,火狐等大部分浏览器使用）
3.事件捕获
描述事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。（Netscape的事件流是事件捕获流）
二.使用事件处理程序
1.HTML事件处理程序
在html结构中直接写入事件处理程序，缺点时html和js耦合太紧密，很难修改。
<input type="button" value="按钮" id="btn" onclick="alert('hello')">
2.Dom0级事件处理程序
方法：函数赋值 element.onclick=function()（只能为一个元素添加一个事件处理函数）
var btn2=document.getElementById('btn2');
btn2.onclick=function(){
alert('这是通过Dom0级添加的事件！');
}
3.Dom2级事件处理程序
var btn3=document.getElementById('btn3');
btn3.addEventListener('click',showMes,false);
btn3.removeEventListener('click',showMes,false);
- element.addEventLIistener()：添加事件，必须用removeEventListener删除
- element.removeEventListener()：删除事件，参数必须与addEventListener 相同
- 上述两个方法接受3个参数：要处理的事件类型（不加on），作为事件处理程序的函数和布尔值
- Dom0heDom2可以在一个节点元素上添加多个事件
4.IE事件处理程序
- element.attachEvent()：添加事件
- element.detachEvent()：删除事件
- 接受两个参数：要处理的事件类型type（要加on）和事件处理程序函数，不使用布尔值是因为IE8及更早的版本只支持实事件冒泡（语法注意： .等价于［］）
前四种事件处理程序代码截图如下：
####5.跨浏览器的的事件处理程序
- 把能力测试函数封装到单独的变量对象中（可以单独存在一个文件中留以后备用）
三.事件对象
1.Dom 中事件对象
- .type属性：获取事件属性
- .target属性：获取事件目标
- .stopPropagation()方法用于阻止事件冒泡
- .preventDefault()方法阻止默认行为
2.IE中的事件对象
- .type属性：获取事件属性
- .srcElement属性:获取事件目标
- .cancelBubblE属性:用于阻止事件冒泡，true表示阻止冒泡，false不阻止冒泡表示
- .returnValue 属性：用于阻止事件的默认行为，设置false表示阻止事件的默认行为
3.浏览器兼容问题
- 根据能力判断将函数封装到单独的变量中(类似上一节二.5)
