JavaScript - 事件处理程序

标签：

    即响应某个事件的函数。

1. HTML事件处理程序

    <input type="button" value="Click Me" onclick="alert(‘Clicked‘)" />

    或者

    <input type="button" value="Click Me" onclick="showMessage()" />

    onclick的处理程序中可以通过event直接访问事件对象，this为事件的目标元素。

2. DOM0级事件处理程序

    通过JS指定事件处理程序的传统方式，将一个函数赋给一个事件处理程序属性。这种方式简单且跨浏览器，最为常用。

    指定事件处理程序：

    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        alert("Clicked");
    };

    删除只要将事件处理程序属性的值设为null即可： btn.onclick = null;

3. DOM2级事件处理程序

    DOM2级事件 定义了两个方法，指定和删除事件处理程序：addEventListener()和removeEventListener()。

    所有的DOM节点都包含这两个方法，都接受3个参数：事件名、事件处理函数、布尔值。

    最后的布尔值如果true，表示在捕获阶段调用事件处理程序，否则在冒泡阶段调用事件处理程序。

    这里添加的事件处理程序在其所依附元素的作用域中运行。

    这种方式可以添加多个事件处理程序，并按添加顺序执行。

    在按钮上添加点击事件的处理程序：

    var btn = document.getElementById("myBtn");
    btn.addEventListener("click", function(){
        alert(this.id);
    }, false);
    btn.addEventListener("click", function(){
        alert("Hello world!");
    }, false);

    移除事件：

    通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除使用的参数与添加使用的参数完全相同，因此添加的匿名函数将无法移除。

4. IE事件处理程序

    IE中实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。

    这两个方法接收相同的两个参数：事件名、事件处理函数。

    通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

    这种方式的事件处理程序会在全局作用域中运行。

    类似于addEventListener()，attachEvent()也可以为一个元素添加多个事件处理程序。但是，这些事件处理程序会以添加顺序相反的顺序执行。

    为按钮添加一个事件处理程序：

    var btn = document.getElementById("myBtn");
    btn.attachEvent("onclick", function(){ // 这里是onclick而非click
        alert("Clicked");
    });

    关于事件的移除，必须为detachEvent()提供attachEvent()时相同的参数，且匿名函数不能被移除。

5. 跨浏览器的事件处理程序

var EventUtil = {
    addHandler : function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler : function (element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
};

JavaScript - 事件处理程序

标签：

原文地址：http://www.cnblogs.com/sduzhangxin/p/4376023.html