097_事件监听器
1. addEventListener()方法
1.1. addEventListener()方法為指定元素添加事件處理程序。
1.2. 語法
element.addEventListener(event, function, useCapture);第一個參數是事件的類型(比如: "click"或"mousedown")。
第二個參數是當事件發生時我們需要調用的函數。
第三個參數是布爾值, 指定使用事件冒泡還是事件捕獲。此參數是可選的。
1.3. 您能夠向一個元素添加多個事件處理程序。
document.getElementById("d1").addEventListener("mouseover", myFunction); document.getElementById("d1").addEventListener("mousemove", mySecondFunction); document.getElementById("d1").addEventListener("mouseout", myThirdFunction);1.4. addEventListener()方法為元素附加事件處理程序而不會覆蓋已有的事件處理程序, 因此您能夠向一個元素添加多個相同類型的事件處理程序, 例如兩個"click"事件。
document.getElementById("myBtn").addEventListener("click", myFunction); document.getElementById("myBtn").addEventListener("click", mySecondFunction);1.5. 請勿對事件使用"on"前綴; 請使用"click"代替"onclick"。
1.6. 當使用addEventListener()方法時, JavaScript與html標記是分隔的, 已達到更佳的可讀性; 即使在不控制html標記時也允許您添加事件監聽器。
1.7. addEventListener()允許您將事件監聽器添加到任何html對象上, 還可以是window對象, 甚至其他支持事件的對象, 比如: xmlHttpRequest對象。
window.addEventListener("resize", function(){document.getElementById("demo").innerHTML = '用戶調整窗口大小'; });2. 事件冒泡還是事件捕獲?
2.1. 在html DOM中有兩種事件傳播的方法: 冒泡和捕獲。
2.2. 事件傳播是一種定義當發生事件時元素次序的方法。假如<div>元素內有一個<p>, 然后用戶點擊了這個<p>元素, 應該首先處理哪個元素"click"事件?
2.2.1. 在冒泡中, 最內側元素的事件會首先被處理, 然后是更外側的: 首先處理<p>元素的點擊事件, 然后是<div>元素的點擊事件。
2.2.2. 在捕獲中, 最外側元素的事件會首先被處理, 然后是更內側的: 首先處理<div>元素的點擊事件, 然后是<p>元素的點擊事件。
2.3. 在addEventListener()方法中, 你能夠通過使用useCapture參數來規定傳播類型。useCapture默認值是 false，將使用冒泡傳播，如果該值設置為 true，則事件使用捕獲傳播。
2.4. 實例
document.getElementById("myBtn").addEventListener("click", myFunction, true); document.getElementById("myBtn").addEventListener("click", myFunction, true);3. removeEventListener()方法
3.1. removeEventListener()方法會刪除已通過addEventListener()方法附加的事件處理程序。
3.2. 實例
element.removeEventListener("mousemove", myFunction);4. 例子
4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>事件監聽器</title><style type="text/css">div {width: 150px;height: 90px;line-height: 90px;background-color: #D94A38;margin-top: 20px;text-align: center;}p {width: 150px;height: 32px;line-height: 32px;background-color: green;text-align: center;}</style></head><body><div id="div1"><p id="p1">冒泡</p></div><div id="div2"><p id="p2">捕獲</p></div> <div id="div3"><p id="p3">捕獲</p></div> <script type="text/javascript">var div1 = document.getElementById('div1'), p1 = document.getElementById('p1');var div2 = document.getElementById('div2'), p2 = document.getElementById('p2');var div3 = document.getElementById('div3'), p3 = document.getElementById('p3');function div1Click(e){console.log('div1被點擊了');} function p1Click(e){console.log('p1被點擊了');}function div2Click(e){console.log('div2被點擊了');}function p2Click(e){console.log('p2被點擊了');}function div3Click(e){console.log('div3被點擊了');}function p3Click(e){console.log('p3被點擊了');}div1.addEventListener('click', div1Click, false);p1.addEventListener('click', p1Click, false);div2.addEventListener('click', div2Click, true);p2.addEventListener('click', p2Click, true);// 只要外層元素是捕獲, 事件就是捕獲傳播類型div3.addEventListener('click', div3Click, true);p3.addEventListener('click', p3Click, false);</script></body> </html>4.2. 點擊冒泡
4.3. 點擊第一個捕獲
?4.4. 點擊第二個捕獲
總結
