DOM事宜总结（一）

媒介：撸完CSS－DOM紧接着来撸DOM事宜，事宜总结完成后我要最先总结动画，然后用纯JS完成一个轮播图，前路漫漫，另有种种框架等着我～～～
本篇主要内容有：事宜流 事宜处置惩罚递次 跨浏览器事宜处置惩罚递次

－－－－－－－－－－－－－－－－－－－－? 分割线－－－－－－－－－－－－－－－－－－－－－

1.事宜流

事宜冒泡：事宜最先时由最详细的元素（文档嵌套条理最深的节点）吸收，然后逐级向上传播到较为不详细的节点。
事宜捕捉：不太详细的节点应当更早吸收到事宜，最详细的节点应当末了吸收到事宜。

2.DOM事宜流

在W3C范例中：分三步（1、事宜捕捉；2、事宜触发；3、事宜冒泡）；
在IE中：分两步（1、事宜冒泡；2、事宜触发）
在网景（Netscape)：分两步（1、事宜捕捉；2、事宜触发）

3.事宜处置惩罚递次

（一）HTML事宜处置惩罚递次

这个在《DOM编程艺术》中开端完成的图片库的总结（一）就有了应用，它的js代码嵌套在HTML中，如：想要完成在点击按钮时显现一个正告框，则能够这么写：

瑕玷：
1.代码例子中的alert能够换成本身定义的函数，假如用户在页面加载后还没最先剖析这个函数时就单击了按钮，这个时刻就会激发毛病，这时候能够将事宜处置惩罚递次封装在try－catch块中，上面的代码能够改成：

2.HTML和js代码耦合性太强，假如要替换事宜处置惩罚递次，就要修改两个处所。

（二）DOM 0级事宜处置惩罚递次

每一个元素（包含window和document）都有本身的事宜处置惩罚递次属性，比方onclick，将这类属性值设置为一个函数，就能够指定事宜处置惩罚递次，以下方代码：

//假如有一个按钮，先猎取这个按钮元素
var btn = document.getElementById("myBtn");
btn.Onclick= function(){
alert("你点我干啥！！！");
};

注重：以上代码在运转之前不会指定事宜处置惩罚递次，换句话说就是假如这些代码插进去在html文档中的末了，位于按钮以后，body标签之前，那末在文档剖析这个函数之前，点击按钮时无效的。

长处：简朴，具有跨浏览器的上风

特性：运用DOM 0级要领指定事宜处置惩罚递次被认为是元素的要领，因而这个时刻事宜处置惩罚是在元素的作用域中举行运转，递次中的this指向当前元素。 来看下面一段代码：

var btn = document.getElementById("mybtn");
btn.Onclick= function(){
alert(this.id); //this代表当前实行操纵的元素btn，也就是id为mybtn的按钮
}


以上不单单议能够接见元素的id属性，元素的任何属性和要领都能够经由过程this接见。以这类体式格局增添的事宜处置惩罚递次会在事宜流的冒泡阶段被处置惩罚。

（三）DOM 2级事宜处置惩罚递次

DOM 2级事宜定义了两个要领，离别用于处置惩罚指定和删除事宜处置惩罚递次的操纵：
addEventListener()和removeEventListener()，
他们都吸收三个参数：要处置惩罚的事宜名、作为事宜处置惩罚递次的函数、一个布尔值。
布尔值假如是true示意在捕捉阶段挪用事宜处置惩罚递次，假如是false示意在冒泡阶段挪用事宜处置惩罚递次。

增添事宜操纵
以下代码：

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("你点我干啥！！！");
},false);


以上代码为一个按钮增添了一个onclick事宜处置惩罚递次，注重内里参数通报的是"click"，这个是跟DOM中的事宜范例有关，后续再说。～～～
而且运用DOM 2级要领增添事宜处置惩罚递次的优点是，能够增添多个事宜处置惩罚递次，上面例子中首先会显现元素id，然后显现&＃8221;你点我干啥！！！&＃8221;。

删除事宜操纵
经由过程addEventListener()增添的事宜处置惩罚递次只能运用removeEventListener()来移除，移除时传入的参数与增添递次时运用的参数雷同。这也就意味着经由过程addEventListener()增添的匿名函数将没法移除。如上面的例子，我增添以下代码将没法移除事宜：

btn.removeEventListener("click",function(){
alert(this.id);
},false);


处理办法是，将上面的匿名函数赋值给一个变量，然后adddEventListener和 removeEventListener
传参数时传入这个变量就能够了。

重写这个函数以下：

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


（4）跨浏览器的事宜处置惩罚递次

－－－－－－－－－－－－－－－－－ 珍重性命，阔别IE －－－－－－－－－－－－－－－－－－

IE也完成了DOM中的相似的两个要领：attachEvent() 和detachEvent()，这两个要领接收雷同的两个参数，事宜处置惩罚递次称号与事宜处置惩罚递次函数。

以下代码：

var btn = document.getElementById("mybtn");
btn.attachEvent("onclick",function(){ //你没看错，用的“onclick”！！！
alert("你又点我了！！！");
});


注重：
1.attachEvent()的第一个参数时“onclick”
2.运用attachEvent()，事宜处置惩罚递次会在全局作用域中举行，因而this===window
3.增添多个事宜时，事宜处置惩罚递次不是以增添它们的递次实行，而是以相反的递次被触发。
4.运用detachEvent()来移除时，匿名函数一样不能移除，因而须要通报给函数雷同的援用。

那末重点来了，能够封装一个对象处理跨浏览器举行事宜处置惩罚，给这个对象起名叫：EventUtil，它有两个要领，离别举行事宜增添和移除。

且看下面代码：

var EventUtil = {
//@handler是装载匿名函数的援用变量，内里装载的是详细要实行的函数逻辑
//@element是目的元素
//type代表的是DOM 2级的事宜范例，因而在用IE或许DOM 0级前面要加“on” addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
elemet["on" + type] = handler; //假如上面两种都不可，就运用DOM 0级要领处置惩罚，直接在元素上增添onclick事宜
}
}, 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; ////假如上面两种都不可，就运用DOM 0级要领处置惩罚，直接赋值为null作废事宜
}
}
};


定义好了，怎样运用呢？看下面～～～

var btn = document.getElementById("myBtn");
var handler = function(){
alert("你又点我了！！！");
};
//增添事宜
EventUtil.addHandler(btn,"click",handler);
//移除事宜
EventUtil.removeHandler(btn,"click",handler);


以上代码并没有斟酌IE中的作用域题目，而且DOM 0级只支撑一个事宜处置惩罚递次，但也不是什么题目，现在只卖早饭的饭铺不多了～～～

此次没有源代码，以上～