1.事件流
事件流可以分为两种:事件冒泡和事件捕获
1. 事件冒泡就是从目标元素一直冒泡到根元素html(IE和DOM浏览器都有)
2. 事件捕获就是从根元素到目标元素(DOM浏览器支持)
2.事件处理
1.HTML的事件处理,如下
<div class="btn" onclick="showME()">点击我</div>
把点击事件放入到标签内部这样不好就是行为和建构耦合在一起了,不好维护
2.DOM0级的事件处理
<div class="btn" id="btn">点击我</div>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
//代码
}
// 取消点击
// btn.onclick = null;
</script>
这个是把点击事件和结构分离了,这个不能给一个元素绑定多个点击事件,存在把之前合作同事的代码覆盖掉
3.DOM2级事件处理
<div class="btn" id="btn">点击我</div>
<script>
var btn = document.getElementById("btn");
btn.addEventListener('click',function(){
//代码
},false);
//取消点击事件
// btn.removeEventListener('click',function(){},false);
</script>
这样可以给元素绑定多个点击事件。好维护上面这些事DOM浏览器的,IE大家可以去查询一下attachEvent,detachEvent
3.Event 了解
DOM浏览器
event.type 属性就是事件类型
event.target 目标元素
event.stopProgation() 方法,是阻止冒泡的
event.preventDefault()方法,是阻止元素事件的默认行为如a标签
IE下
event.type 属性是事件类型
event.srcElement 目标元素
event.cancelBubble 属性 阻止冒泡
event.returnValue 属性 false是阻止事件默认行为