【javascript】事件处理程序

事件处理程序

• 事件就是用户或浏览器自身执行的某种动作，而响应某个事件的函数就叫做事件处理程序。

1、HTML 事件处理程序

• 某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML 特性来指定。

<script type="text/javascript">
    function showMessage(){
        alert("Hello world!");
    }
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
<!-- 输出 "click" -->
<input type="button" value="Click Me" onclick="alert(event.type)">
<!-- 输出 "Click Me" -->
<input type="button" value="Click Me" onclick="alert(this.value)">

• 通过HTML 指定事件处理程序的最后一个缺点是HTML 与JavaScript 代码紧密耦合。

2、DOM0 级事件处理程序

• 通过JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
• 每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写。

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

• 使用DOM0 级方法指定的事件处理程序被认为是元素的方法，程序中的this引用当前元素。

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

• 删除通过DOM0级方法指定的事件处理程序，可以将事件处理程序属性的值设置为null

btn.onclick = null; //删除事件处理程序

3、DOM2 级事件处理程序

• “DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。
• 所有DOM节点中都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

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

• 使用DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    alert(this.id);
}, false);
btn.addEventListener("click", function(){
    alert("Hello world!");
}, false);
//这两个事件处理程序会按照添加它们的顺序触发

• 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；
• 移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    alert(this.id);
}, false);
//这里省略了其他代码
btn.removeEventListener("click", function(){ //没有用！
    alert(this.id);
}, false);

• 虽然调用remove-EventListener()时看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个是完全不同的函数。

var btn = document.getElementById("myBtn");
var handler = function(){
    alert(this.id);
};
btn.addEventListener("click", handler, false);
//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效！

• 大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。
• IE9、Firefox、Safari、Chrome 和Opera 支持DOM2 级事件处理程序。

4、IE事件处理程序

• IE 实现了与DOM 中类似的两个方法：attachEvent()和detachEvent()。
• 这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。

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

• 在IE 中使用attachEvent()与使用DOM0 级方法的主要区别在于事件处理程序的作用域。
• 在使用DOM0 级方法的情况下，事件处理程序会在其所属元素的作用域内运行。
• 在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this 等于window。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
    alert(this === window); //true
});

• 与addEventListener()类似，attachEvent()方法也可以用来为一个元素添加多个事件处理程序。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
    alert("Clicked");
});
btn.attachEvent("onclick", function(){
    alert("Hello world!");
});
//这两个事件处理程序以相反的顺序被触发

• 使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数。只要能够将对相同函数的引用传给detachEvent()，就可以移除相应的事件处理程序。

var btn = document.getElementById("myBtn");
var handler = function(){
    alert("Clicked");
};
btn.attachEvent("onclick", handler);
//这里省略了其他代码
btn.detachEvent("onclick", handler);

• 支持IE 事件处理程序的浏览器有IE 和Opera。

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

• 要保证处理事件的代码能在大多数浏览器下一致地运行，只需关注冒泡阶段。
• 第一个要创建的方法是addHandler()，它的职责是视情况分别使用DOM0 级方法、DOM2 级方法或IE 方法来添加事件。
• addHandler()方法接受3 个参数：要操作的元素、事件名称和事件处理程序函数。
• 与addHandler()对应的方法是removeHandler()，它也接受相同的参数。这个方法的职责是移除之前添加的事件处理程序——无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用DOM0 级方法。

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;
        }
    }
};

var btn = document.getElementById("myBtn");
var handler = function(){
    alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
//这里省略了其他代码
EventUtil.removeHandler(btn, "click", handler);

好好学习