javascript中事件流，事件相容，事件繫結
1，事件流
事件流描述的是從頁面中接收事件的順序。 事件流是描述的從頁面接受事件的順序，當幾個都具有事件的元 素層疊在一起的時候，那麼你點選其中一個元素，並不是只有當前被 點選的元素會觸發事件，而層疊在你點選範圍的所有元素都會觸發事 件。事件流包括兩種模式：
冒泡和捕獲。
事件捕獲：父級元素先觸發，子集元素後觸發；
事件冒泡：子集元素先觸發，父級元素後觸發；
事件冒泡（從內至外）以及事件捕獲（從外至內）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ var div1=document.getElementById('div1'); var div2=document.getElementById('div2'); //建立一個數組,將獲取到的物件div1,div2,document,document.body var arr=[div1,div2,document,document.body]; for(var i=0;i<arr.length;i++){ //給每個陣列新增點選事件 arr[i].onclick=function(){ //alert(this); //console.log(this); } //使用DOM經典方式 //事件冒泡 arr[i].addEventListener('click',function(){ console.log(this); },false); //事件捕獲 arr[i].addEventListener('click',function(){ console.log(this); },true); } } </script> </head> <body > <div id="div1" style="width: 100px;height: 100px;border: 1px solid red;"> <div id="div2" style="width: 50px;height: 50px;border: 1px solid black;">內部元素</div> </div> </body> </html>
2， 事件相容
(1)事件繫結 addEventListener 用於註冊事件處理程式，IE 中為 attachEvent，我們為 什麼講 addEventListener 而不講 attachEvent 呢？一來 attachEvent 比較簡 單，二來 addEventListener 才是 DOM 中的標準內容。
語法 element.addEventListener(event, function, useCapture);
第一個引數是事件的型別 (如 "click" 或 "mousedown"). 第二個引數是事件觸發後呼叫的函式。 第三個引數是個布林值用於描述事件是冒泡還是捕獲。該引數是可選的。
注意:不要使用 "on" 字首。 例如，使用 "click" ,而不是使用 "onclick"。
你可以使用函式名，來引用外部函式:
3，事件移除：removeEventListener();
如果新增的事件處理函式將來想要移除就不能使用匿名函式的方式
案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ var btn1=document.getElementById('btn'); btn1.addEventListener('click',show,false); function show(){ alert('事件繫結'); } //事件移除 //btn1.removeEventListener('click',show,false); } </script> </head> <body> <input type="button" id="btn" value="事件註冊" /> </body> </html>
4，獲取事件物件
事件物件封裝了事件發生的詳細資訊，尤其是滑鼠、鍵盤事件。 如滑鼠事件發生的位置、鍵盤事件的鍵盤鍵等。
IE 中的事件物件： IE 中的事件物件是一個隱式可用的全域性物件：event，它是 window 物件的一個屬性。
標準 DOM 的事件物件： 在標準 DOM 瀏覽器檢測發生了某個事件時，將自動建立一個 Event 物件，並隱式地將該物件作為事件處理函式的第一個引數傳入
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//使用事件物件event 提供關於事件的相關詳細資訊
window.onload=function(){
var img1=document.getElementsByTagName('img1');
img1.onclick=heandle;
}
function heandle(oEvent){
if(window.event){
oEvent=window.event;
}
//相容低版本的IE
var oTarget;
if(oEvent.srcElement){
//獲取觸發事件的元素
oTarget=oEvent.srcElement;
}else{
oTarget=oEvent.target;
}
//返回事件目標的名稱,使用屬性tagName
alert(oTarget.tagName);
}
</script>
</head>
<body>
<img src="img/bgImage_01.png" id="img1" />
</body>
</html>
5，阻止冒泡：event.stopPropagation()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/Demo1.css"/>
<script type="text/javascript">
/*window.onload = function() {
document.getElementById("body").addEventListener("click",eventHandler);
}
//event：提供事件處理時的具體時間
//event.timeStamp 表示獲取事件觸發時的具體時間
function eventHandler(event) {
console.log("時間："+new Date(event.timeStamp)+" 產生事件的節點：" +event.target.id +" 當前節點："+event.currentTarget.id);
}*/
window.onload=function(){
//event.stopPropagation(): 阻止事件冒泡的產生
document.getElementById('box1').addEventListener('click',function(event){
alert('你點選了最外層div');
event.stopPropagation(); //阻止事件冒泡
});
document.getElementById('box2').addEventListener('click',function(event){
alert('你點選了第二層div');
event.stopPropagation(); //阻止事件冒泡
});
document.getElementById('span').addEventListener('click',function(event){
alert('你點選了最裡面span元素');
event.stopPropagation(); //阻止事件冒泡
});
}
</script>
</head>
<body id="body">
<div id="box1" class="box1">
<div id="box2" class="box2">
<span id="span">This is a span.</span>
</div>
</div>
</body>
</html>
6，阻止預設
w3c 的方法是 e.preventDefault()，IE 則是使用 e.returnValue = false; preventDefault
它是事件物件(Event)的一個方法，作用是取消 一個目標元素的預設行為。既然是說預設行為，當然是元素必須有默 認行為才能被取消，如果元素本身就沒有預設行為，呼叫當然就無效 了。什麼元素有預設行為呢？如連結，提交按鈕等。當event物件的cancel able為false時，表示沒有預設行為，這時即使有預設行為，呼叫preventDefault也是不會起作用的。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//以下兩個方法都是用來阻止預設 事件的發生
// w3c 的方法是 e.preventDefault()，
// IE 則是使用 e.returnValue =false;
//通過傳統的方式設定 阻止預設
window.onload=function(){
var a1=document.getElementsByTagName('a')[0];
// a1.onclick=function(event){
// //alert('頁面跳轉,觸發事件');
// event.preventDefault(); //阻止事件的發生 / 阻止預設行為
// }
a1.addEventListener('click',function(e){
// e.preventDefault(); //阻止預設
if(e.preventDefault()){ //W3c標準
e.preventDefault();
}else{
window.event.returnValue=false; //IE提供阻止預設的方式
}
})
}
</script>
</head>
<body>
<a href="http://www.yltedu.com" target="_blank">英萊特科技</a>
</body>
</html>