（一）事件綁定
1.普通事件綁定
給html添加一個以on開頭的特定的屬性（如onclick，onfocus）;
<button id="A" onclick="alert(this.id)">方式一</button>
<button id="A" onclick="handler(this)">方式二</button><script> function handler(btn){ alert(this.id); //undefined this指向window對象 alert(btn.id); //A }</script><button id="A">方式三</button><script> var btn = document.getElementById("A"); btn.onclick = function(){ alert("1:"+this.id); } btn.onclick = function(){ alert("2:"+this.id); } //只能綁定一個事件處理函數，后面的會覆蓋前面的；</script>2.符合W3C標準的事件綁定（addEventListener和removeEventListener）
target.addEventListener(type, listener[, useCapture]);
type:必須，表示監聽事件類型的字符串；
listener:必須，當所監聽的事件類型觸發時，會接收到一個事件通知對象；listener 必須是一個實現了 EventListener 接口的對象，或者是一個函數；
useCapture:可選，Boolean,默認為false，表示事件傳播方式為事件冒泡；true,表示事件傳播方式為事件捕獲；
（事件捕獲與事件冒泡下面有講到）
這兩個函數Firefox和Chrome都支持，IE9及以后也支持這兩個函數；IE使用attachEvent/detachEvent來進行事件綁定和取消；
<button id="B">W3C標準一</button><script> var btn = document.getElementById("B"); btn.addEventListener("click",handler,false); function handler(){ alert(this.id); //B this指向的是dom對象； attachEvent指向的是window對象 }</script><button id="B">W3C標準二</button><script> var btn = document.getElementById("B"); btn.addEventListener("click",handler,true); btn.addEventListener("click",handler,false); function handler(){ alert(this.id); //B } //當點擊按鈕時，函數handler會執行2次，一次為事件捕獲，一次為事件冒泡； //如果綁定的是同一個事件處理函數，且都是事件捕獲或都是事件冒泡，那么只能綁定一次；</script>3.IE瀏覽器使用attachEvent/detachEvent進行事件綁定與取消
<button id="C">IE</button><script> var btn = document.getElementById("C"); btn.attachEvent("click",handler); function handler(){ alert(this.id); //undifined this指向的是window對象； addEventListener指向的是dom對象 }</script>注：同一個事件處理函數只能綁定一次；不同的函數對象可以重復綁定不會覆蓋；匿名函數和匿名函數即使代碼完全一樣，也是互相不相同的；
（二）事件捕獲與事件冒泡
<div id="A"> <div id="B"> <div id="C"></div> </div></div>
事件捕獲：就是從最外層到目標對象的順序觸發（如上面的代碼，如果點擊C，它的觸發順序為A→B→C）
事件冒泡：就是從目標對象到外層的順序觸發（如果點擊C,它的觸發順序為C→B→A）
DOM事件流：就是支持兩種事件模型，捕獲型事件和冒泡型事件，捕獲型事件先發生；兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。
圖片來自網絡：
<div id="A" style="width:300px; height:300px; background:red;position:relative;"> <div id="B" style="width:200px;height:200px; background:green;position:relative;top:50px;margin:auto;"> <div id="C" style="width:100px;height:100px; background:blue;position:relative;top:50px;margin:auto;"></div> </div></div><script> var A = document.getElementById("A"); var B = document.getElementById("B"); var C = document.getElementById("C"); // 目標（目標階段的處理函數，先注冊先執行） C.addEventListener('click',function(){alert("Ct");},true); C.addEventListener('click',function(){alert("Cf");},false); // 事件冒泡 A.addEventListener('click',function(){alert("Af");},false); B.addEventListener('click',function(){alert("Bf");},false); // 事件捕獲 A.addEventListener('click',function(){alert("At");},true); B.addEventListener('click',function(){alert("Bt");},true); </script>//當點擊C時（藍色），輸出At Bt Ct Cf Bf Af阻止事件的傳播：
• 在W3c中，使用stopPropagation（）方法
• 在IE下設置cancelBubble = true；
阻止事件的默認行為：
• 在W3c中，使用preventDefault（）方法；
• 在IE下設置window.event.returnValue = false;
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
