南大软院大神养成计划——第十天

今天是南大软院大神养成计划实施的第十天。今天主要学习了“DOM事件探秘”。

首先说说第一章“事件流”，那什么是事件流呢？事件流就是描述描述从页面中接受事件的顺序，在浏览器中，IE和Netscape提出了相反的慨念，IE提出的是事件冒泡流，就是我们现在常用的事件流，Netscape提出的事件捕获流。首先说说事件冒泡流，事件冒泡流就是即事件最开始由最具体的无素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到最不具体的那个节点（文档） input----->document，比如我在input里设置一个按钮关联一个事件，那么它就会从input开始逐级向上传播，比如像div传播。而事件捕获流呢？就是相反地了，它的思想是不太具体的节点应该更早接收到元素，而最具体的节点最后接收到事件。比如从html往下面开始传播，然后最后传播到input中，很多人并不知道有时间捕获流。

接下来是第二章“事件处理程序”，事件处理程序大致分为“HTML事件处理程序”，“DOM0级事件处理程序”，“DOM2级事件处理程序”。先说说“HTML事件处理程序”。HMTL事件处理程序就是直接把JavaScript代码嵌入到HTML代码中，这个方法的最大缺点就是HTML和js代码高耦合，如果修改，就要修改两个地方：HTML元素内和script函数，增加程序员工作量。“DOM0级事件处理程“就是先 把元素取出来，然后为其属性添加一个事件，它是一种较传统的方式：把一个函数赋值给一个事件处理程序的属性，优点：简单，跨浏览器的优势。比如：var btn2=document.getElementById("btn2");---先获取出元素，定义对象 //取得btn2按钮对象
btn2.οnclick=function(){alert('这是通过DOM0级添加的事件！')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性

这样程序员假如想改动JavaScript部分只需要改动一个地方就行，不需要改动html部分，减少了耦合性。

下面说说DOM2级事件处理程序。DOM2和DOM0级共同优点：可以给一个元素上添加多个事件处理程序，会按照顺序执行。<br><br>
DOM2级事件处理程序，ie不支持，ie有专用的事件处理程序。<br><br>
DOM2级事件处理程序：定义了两个方法---用于处理指定和删除事件处理程序的操作。【addEventListener()---给某元素添加一个事件监听程序】和【removeEventListener()---删除一个事件。必须传入添加事件时相同的参数】（通过前者添加的事件，只能通过后者删除。如obj.click= null无效）<br><br>
接收三个参数：要处理的事件名，作为事件处理程序的函数和布尔值。<br>
布尔值 false 事件冒泡 true 事件捕获，一般用false最大兼容浏览器。
在事件被触发的函数里面this可以引用被触发的元素。例如：btn.addEventListener('click',function(){alert(this.value),false});this即指btn

接下来讲讲IE事件程序及跨浏览器解决。如何解决这个问题呢？代码如下：

var eventUtil={
// 添加句柄
type==触发的元素事件,此处的时间名最好没有on前缀; handler==触发事件时调用函数
addHandler:function(element,type,handler){ 
if(element.addEventListener){ //能力检测
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler); //IE中attachEvent()事件名都要有on前缀
}else{
element['on'+type]=handler; //element.οnclick==element[‘onclick’]
}
},
}

非IE addEventListener removeEventListener (追加事件不需要on)
IE(opera) attachEvent detachEvent(追加事件需要on)，attachEvent只有两个参数

今天学习就这么多，期待明天的是学习