事件流:包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段;
1、捕获阶段:事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。
在捕获阶段,目标元素不会接受事件,意味着事件从document到目标元素就停止;
2、处于目标阶段:事件在目标节点上被触发;
3、冒泡阶段:事件又传播回文档;它会随着DOM树一层层向上冒泡,回溯到根节点。
事件处理:addEventListener() removeEventListener() 接收3个参数 要处理的事件名、事件处理程序的函数、布尔值
布尔值:true 表示在事件捕获阶段调用事件处理程序 ;
false 表示在冒泡阶段调用事件处理程序;
例如:
<div class="box"> <button>请点击按钮</button> </div>
<script>
var event=function(){
alert(this.tagName);
}
document.getElementsByClassName('box')[0].addEventListener("click",event,false); //事件名
document.getElementsByTagName('body')[0].addEventListener("click",event,false);
document.getElementsByClassName('box')[0].removeEventListener("click",event,false);
</script>
IE事件处理程序:attachEvent() detachEvent() 接收2个参数 事件处理名称和事件处理函数,因为IE8及更早的浏览器只支持事件冒泡;
document.getElementsByClassName('box')[0].attachEvent("onclick",event); //事件名
document.getElementsByTagName('body')[0].attachEvent("onclick",event);
区别:1、参数不一样; 2、事件名称不一样,普通的直接click; IE是onclick
兼容的写法:
var addEvent = (function(){
if(document.addEventListener){
return function(element, type,callback){
element.addEventListener(type,callback,false);
}
}else{
return function(element, type,callback){
element.attachEvent('on' + type,callback); //注意添加on
}
}
})();
事件对象:
//IE是把event事件对象作为全局对象window的一个属性;可以使用event或window.event来访问; //FireFox和Chrome等主流浏览器是通过把【事件对象】作为【事件响应函数】的【参数】进入传入的; //兼容性的写法示例: domElement.onclick = function( e ){ e = e || window.event;//或(||)书写顺序有讲究,不能随意换 }
事件对象上有属性和方法:
w3c下事件对象有很多属性和方法,cancleable 是否可以取消事件的默认行为,只有设置为true的事件才可以是有preventDefault()来取消默认行为。
事件对象的target是事件的实际目标, w3c:target IE:srcElement
type:被触发的事件名 click w3c和ie一样;
阻止冒泡: W3c:event.stopPropagation();
IE: cancelBubble = true;
阻止默认行为: W3C: event.preventDefault();
IE : window.event.returnValue = false;