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

事件流:从页面中接受事件的顺序。
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; 阻止事件默认行为
原文地址:https://www.cnblogs.com/crisis66/p/8116671.html