javascript事件小结，事件处理程序方式--javascript高级程序设计笔记
1、事件流：描述的是从页面中接收事件的顺序。
2、事件冒泡：IE的事件流叫做事件冒泡，即事件开始从具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到不具体的节点（文档）。
3、事件捕获：指不太具体的节点应该更早接收到事件，而具体的节点应该是最后接收到事件。
4、DOM事件流：“DOM2级事件”规定的事件流包含三个阶段：事件捕获，处于目标阶段和事件冒泡阶段。（实际的目标元素在捕获阶段接不会收到事件）
IE不支持DOM事件流，Opera、safari、chrome、firefox支持事件流。
5、事件处理程序方式有以下几种：
1）HTML事件处理程序：
<input type="text" onclick="alert(1)" />;
<input type="text" onclick="showmessage()" />
<script>
function showmessage(){
alert(1);
}
</script> 这种方式2个缺点：一是当dom元素加载完成，底部js没加载完成时候点击input会报错（这是我理解的精简一句话总结报错）；二是js和html代码紧密耦合。若是换事件处理程序，需要改两个地方：HTML和Javascript代码。
2）DOM0级事件处理程序：
就是将一个函数赋值给一个事件的处理程序属性。至今现代为所有浏览器都支持。既简单又款浏览器的优势。属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序。如下所示：
<input type="button" />
var oBtn = document.getElementById("btn_test");
oBtn.onclick = function(){
alert(this.id); //btn_test(ps:程序中的this引用当前元素)
}
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除通过DOM0级指定的事件处理程序方法，将事件处理程序属性设置为null即可：
btn.onclick = null; //删除时间处理程序
3）DOM2级事件处理程序：
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM几点都包含这两个方法，并且它们接受3个参数：要处理的事件名，作为事件处理的函数和一个布尔值。最后这个布尔值为true，则代表在捕获阶段调用事件处理程序；若为false，表示在冒泡阶段调用时间处理程序。
var oBtn = document.getElementById("btn_test");
function test1(){ console.log("test1") }
oBtn.addEventListener("click",test1,false);//冒泡
移除事件处理程序方法：
oBtn.removeEventListener("click",test1,false);//可以移除，匿名函数是移除不掉的。
大多数情况下将事件处理程序都是添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器。
4）IE事件处理程序：
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接收相同的两个参数，事件处理程序名称和事件处理程序函数。由于IE只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
var oBtn = document.getElementById("btn_test");
oBtn.attachEvent("onclick",function(){
alert(this === window); //true
});
var oBtn = document.getElementById("btn_test");
function test1(){ console.log("test1") }
oBtn.attachEvent("onclick",test1);
移除相应的事件处理程序：
oBtn.detachEvent("onclick",test1);
5）跨浏览器的事件处理：
var EventUtil = {
addHandler:function(element, type ,handler){
if (element.addEventListener) { //IE 中
element.addEventListener(type,handler,false);//冒泡
}
else if (element.attachEvent) { //IE 中
element.attachEvent("on"+type,handler);
}
else{
element["on" + type] = handler;
}
},
removeHandler:function(element, type ,handler){
if (element.removeEventListener) { //IE 中
element.removeEventListener(type,handler,false);//冒泡
}
else if (element.detachEvent) { //IE 中
element.detachEvent("on"+type,handler);
}
else{
element["on" + type] = null;
}
}
}
var oBtn = document.getElementById("btn_test");
var handler = function(){
alert(111);
}
EventUtil.addHandler(oBtn,"click",handler);
EventUtil.removeHandler(oBtn,"click",handler);无论时间处理程序是采用什么方式添加到元素中，如果其他方法无效，则默认采用DOM0级方法。
先写到这里，欢迎转载与转发，请注明出处，若是对您有帮助，麻烦帮忙点一下右下角的支持~~