JavaScript绑定事件的几种方法

注册事件处理程序

1、设置HTML标签属性

eg. <button onclick="alert('Hello World')"></button>

注：客户端编程的通用风格是保持HTML内容和JavaScript行为分离，应避免使用这种方式

2、设置JavaScript对象属性为事件处理程序

eg. var element = document.getElementById('clickElement');

      element.onsubmit = function(){ alert('Hello World'); }

3、addEventListener()-----除IE8及以前版本的所有浏览器都支持

接受三个参数：

（1）要注册的事件类型，不包含前缀“on”

（2）当指定类型事件发生时调用的函数

（3）布尔值，默认为false，若传递了true将注册为捕获事件处理程序（一般可忽略）

注：使用removeEventListener()来删除事件，同样有三个参数

eg. var element = document.getElementById('clickElement');

     element.addEventListener('click', function(){ alert('add click event'); }, false);

     element.removeEventListener('click', function(){ alert('remove click event'); }, false);

4、attachEvent()-----IE8及以前版本使用

因为IE模型不支持事件捕获，所以只接受两个参数

（1）要注册的时间类型，需要含前缀“on”

（2）当指定类型事件发生时调用的函数

注：使用detachEvent（）来删除事件

eg. var element = document.getElementById('clickElement');

     element.attachEvent('click', function(){ alert('attach click event') });

     element.detachEvent('click', function(){ alert('detach click event'); });

下面介绍注册事件和取消事件的2个通用方法：

注册事件

function addEvent(target, type, handler){

    if(target.addEventListener)

        target.addEventListener(type, handler, false);

    else

        target.attachEvent("on"+type, function(event){

                                                        return handler.call(target, event);

                                            });

}

取消事件

function cancelEvent(event){

    var event = event || window.event; // 用于IE

    if(event.preventDefault) event.preventDefault(); // 标准技术

    if(event.returnValue) event.returnValue = false; // IE

    return false; // 处理使用对象属性注册的事件

}