事件流
什么是事件流
- 事件流描述得是从页面中接收事件的顺序
- IE的事件流是事件冒泡流
- Netscape Communicator的事件流是事件捕获流
事件冒泡流
IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点
事件捕获流
Netscape Communicator的事件流是事件捕获流,思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件,事件捕获的用意在于事件到达预定目标之前就捕获它
由于老版本的浏览器不支持,因此很少有人使用事件捕获,建议使用时间冒泡除非有特殊需求
DOM事件流
'DOM2级事件'规定事件流包括三个阶段:事件捕获-处于目标阶段-事件冒泡阶段
事件处理程序
HTML事件处理程序
如下两种调用事件处理程序的方式都是HTML处理程序
<input type="button" onclick = "alert('click')"/>
<script type = 'text/javascript'>
function show(){
alert('click');
}
</script>
<input type="button" onclick = 'show()'>
DOM0级事件处理程序
//事件处理程序在元素的局部作用域下运行
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('click');
}
删除其事件处理程序
btn.onclick = null;
DOM2级事件处理程序
- 指定事件处理程序:
addEventListener(arg1,arg2,arg3) - 删除事件处理程序:
removeEventListener(arg1,arg2,arg3)
这两个方法都有三个参数,分别是要处理的事件名比如click,作为事件处理程序的函数,和一个布尔值,布尔值为false代表在冒泡阶段调用事件处理程序,为true表示在捕获阶段调用事件处理程序
var btn = document.getElementById('btn');
btn.addEventListener('click',handler,false);
function handler(){
alert('click');
}
btn.removeEventListener('click',handler,false);
DOM2级事件处理程序最大的优点是可以添加多个事件处理程序,会按照添加的先后顺序依次执行
var btn = document.getElementById('btn');
btn.addEventListener('click',handler,false);
btn.addEventListener('click',handler1,false);
function handler(){
alert('click');
}
function handler1(){
alert('click1');
}
//会先弹出'click',再弹出'click1'
IE事件处理程序
IE中有类似DOM中的两个方法:
-
attachEvent(arg1,arg2):事件处理程序在全局作用域下运行 -
detachEvent(arg1,arg2)
这两个方法接受两个参数,事件处理程序名称和事件处理程序函数
var btn = document.getElementById('btn');
btn.attachEvent('onclick',handler);
btn.attachEvent('onclick',handler1);
function handler(){
alert('click');
}
function handler1(){
alert('click1');
}
btn.detachEvent('onclick',handler);
//IE中添加多个事件处理程序,执行的顺序与添加的顺序相反,也就是说我们会先看到'click1'弹出再看到'click'
跨浏览器事件处理程序
为了保证一个代码能兼容不同的浏览器,我们需要判断浏览器的兼容情况再做处理
var EventUtil = {
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,hanlder,false)
}
else if(element.attachEvent){
element.attachEvent('on'+type,handler)
}
else{
element['on'+type] = handler;
}
},
removeHandler:function(element,type,handler){
if(element.addEventListener){
element.removeEventListener(type,hanlder,false)
}
else if(element.attachEvent){
element.detachEvent('on'+type,handler)
}
else{
element['on'+type] = null;
}
}
}
function handler(){
alert('click');
}
var btn = document.getElementById('btn');
EventUtil.addHandler(btn,'click',handler);
EventUtil.removeHandler(btn,'click',handler);
这个程序中我们先判断支不支持DOM2级的事件处理程序,然后是IE事件处理程序,最后是DOM0事件处理程序,满足不同的情况做出相应的操作,完美实现了跨浏览器的事件处理程序.
