-
事件冒泡：事件在文档树上向上传播，如有以下结构
<html> <body> <div> <input type="button"/> </div> </body> </html>
当用户点击按钮时，首先在按钮上触发点击事件，接着在包着按钮的div上触发点击事件，然后是body......
- 事件捕获：在文档树上向下传播，从外层到里层，与时间冒泡传播顺序正好相反。在容器上注册的时间处理程序有机会在事件传播到真实的目标之间捕获它。IE8及以下版本不支持事件捕获。
一 DOM事件
1 HTML事件
缺点：耦合程度高，更改js代码时常常需要修改html里的代码
如：
<input type="button"/ onclick="showMes()">
<script>
function showMes()
{
alert("hello world")
}
</script>
2 DOM0级事件
如：
var btn=document.getElementById（"btn"）;
btn.onclick=function(){
...
}
缺点：每个事件目标对于每个特定类型都只能有一种事件处理程序
3 DOM2级事件
addEventListener()
removeEventListener()
上面两个方法都是传入三个参数
- 事件类型 如click mouseover 注意不用加on
- 事件函数
- 布尔值 一般为false true 表示函数将注册为捕获事件处理函数，并在事件的不同调度阶段调用
支持DOM事件的浏览器有：Chrome，火狐等
<code>
btn.addEventListener("click",showMes,false)
</code>
二 IE事件
提供如下两个方法
1 attachEvent() 添加事件
2 detachEvent() 删除时间
且两个方法传入相同的参数（事件处理程序的名称，事件处理程序的函数）
支持的浏览器：IE8及以下
三 解决浏览器兼容问题
可以根据能力判断来写兼容浏览器的事件处理程序的代码
// 封装添加事件监听程序
function addEvent(ele,type,hander){
// 支持DOM2级
if(ele.addEventListener){
ele.addEventListener(type,hander,false);
}
//不支持DOM2级，支持IE事件
else if(ele.attachEvent)
{
ele.attachEvent('on'+type,hander);
}
//既不支持DOM2级也不支持IE，只能用DOM0级
else ele['on'+type]=hander;
}
<b>
注意：在javascript中，对象的写法等价于中括号的写法
ele.onclick等价于ele['onclick']
</b>
四 事件对象
- DOM中的事件对象
- type 获取事件类型
- target 获取事件目标
- stopPropagation() 阻止事件冒泡
- preventDefault() 阻止事件的默认行为
- IE中的事件对象
- type 获取事件类型
- scrElement 获取事件目标
- cancelBubble 用于阻止事件冒泡（是个属性，设为true表示阻止冒泡，设为false表示不阻止冒泡）
- returnValue 该属性用于阻止默认行为，设为false表示阻止
本文的撰写参考自javascript权威指南第六版以及慕课网上相关教程，错漏之处，欢迎指正。
网友评论