事件流、事件处理程序和事件对象

事件流：从页面中接受事件的顺序。

IE称之为事件冒泡，即事件从最深的节点开始，然后逐步向上传播事件。

Netscape称之为事件捕获，即事件从最外围的节点开始，然后逐步向下传播事件。

 

好比说，页面上有一个div>ul>li>a节点树，给a加一个click事件，那么该事件就会一层一层向外执行，即事件冒泡；而给div加点击事件后， ul，li，a做点击事件时，都会捕获到div上，即事件捕获。

 

事件处理程序

1.html事件处理程序

如，<input type='text' id='btn' onclick='showMessage()'/>

2.DOM0级事件处理程序

如，var btn = document.getElementById('btn');

btn.onclick = function(){

alert('hello');

}

btn.oncick = null;

3.DOM2级事件处理程序

addEventListener()和removeEventListener()

接受三个参数：事件名（不写on），函数，布尔值（事件冒泡false）

 

如，var btn = document.getElementById('btn');

btn.addEventListener = function('click',function(){

alert(this.value);

},false);

btn.removeEventListener = function('click',function(){

alert(this.value);

},false);

 

4.IE事件处理程序

attachEvent()和detachEvent()

接受两个参数：事件名（要加on），函数

如，var btn = document.getElementById('btn');

btn.attachEvent('onclick',showMessage);

btn.detachEvent('onclick',showMessage);

 

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

 

事件对象

e = e || window.event;

 

1.DOM中的事件对象

e.type 获取事件类型

e.target 获取事件目标

e.stopPropagation(); 阻止事件冒泡

e.preventDefault(); 阻止事件默认行为

 

2.IE中的事件对象

e.type 获取事件类型

e.srcElement 获取事件目标

e.cancleBubble=true; 阻止事件冒泡

e.returnValue=false; 阻止事件默认行为