DOM编程-事件（二）

事件注册与触发

• 事件注册
• 事件注册取消
• 事件触发

这三种操作的主体都是DOM元素

事件注册

eventTarget.addEventListListener(type,listener[,useCapture])
作用于一个DOM元素，第一个参数是事件类型，第二个是事件处理函数，第三个是是否为捕获过程（true/false），第三个参数默认是一个冒泡过程

var elem = document.ElementById('div1')';
var clickHandler = function(event){
    //事件处理函数
}
elem.addEventListener('click',clickHandler,false);

我们也可以用这样的方式注册elem.onclick = clickHandler;但是这样有缺陷：只能有一个事件处理函数，二有时我们需要多个事件处理函数。

事件注册取消

eventTarget.removeEventListener(type,listener[,useCapture])
参数和事件注册相同

事件触发

触发方式有很多，比如鼠标点击，键盘按键，程序代码触发
我们主要来理解一下程序代码触发
eventTarget.dispatchEvent(type)
比如下面这条语句element.eventTargetEvent('click');就可以触发element节点上的一个click事件。

浏览器兼容型

上面的内容都是符合W3C标准的，但是IE6、7、8要怎么做呢？

• 事件注册与取消：attchEvent/detachEvent
• 事件触发：fireEvent(e)
• no capture,的版本的IE浏览器不能处理捕获事件

//W3C标准下事件类型与IE低版本有所不同，比如'click'和'onclick'
//事件注册
function addEvent(elem,type,listener,useCapture){
    if(document.addEventListener){
        elem.addEventListener(type,listener,useCapture);
    }
    else{
        elem.attachEvent('on'+type,listener);
    }
}
//事件注册取消
function delEvent(elem,type,listener,useCapture){
    if(document.removeEventListener){
        elem.removeElementlistener(type,listener,useCapture);
    }
    else{
        elem.detachEvent('on'+type,listener);
    }
}