事件流

什么是事件流

事件流描述得是从页面中接收事件的顺序
IE的事件流是事件冒泡流
Netscape Communicator的事件流是事件捕获流

事件冒泡流

IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点

事件捕获流

Netscape Communicator的事件流是事件捕获流,思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件,事件捕获的用意在于事件到达预定目标之前就捕获它

由于老版本的浏览器不支持,因此很少有人使用事件捕获,建议使用时间冒泡除非有特殊需求

DOM事件流

'DOM2级事件'规定事件流包括三个阶段:事件捕获-处于目标阶段-事件冒泡阶段

事件处理程序

HTML事件处理程序

如下两种调用事件处理程序的方式都是HTML处理程序

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事件处理程序,满足不同的情况做出相应的操作,完美实现了跨浏览器的事件处理程序.

事件流and事件处理程序

事件流