JS中的事件監聽與事件流
事件監聽:
使用監聽器(eventListener)來預定事件,在傳統軟件工程中稱成為觀察者模式
執行某種操作時(特定的交互瞬間),會產生對象,對象會沿事件流的方向傳播。
事件流:
事件流有兩種順序,事件捕獲流以及事件冒泡流
事件捕獲是從大到小,事件冒泡是從小到大。
<html> <body> <div> <a></a> </div> </body> </html>
如果你點了div,事件冒泡流的順序就是div->body->html-document(理論上),
事件捕獲流的順序就是document->html->body->div(註意不會傳到a,因為沒
點到,如果只點擊div你給a加上處理點擊事件的處理程序,是不會觸發a的處理程序的)
DOM2級事件
“DOM2級事件”規定的事件包括三個階段:事件捕獲階段、處於目標階段和事件冒泡階段
事件處理程序
元素上定義屬性
1.直接在HTML中定義
<a onclick="alert(‘zack‘);"></a>
2.在js中定義
element.onclick = function(){alert("zack");};
添加事件監聽(addEventListener)
element.addEventListener("click", function(){alert("zack"), boolean}
這些事件處理程序的定義方法都屬於事件監聽,將一個元素加入事件監聽
element.addEventListener(),表示該元素對某個事件進行監聽(訂閱)
當事件發生時,該元素如果沒有其他的影響,可以通過監聽從事件流得到事件。
比如為上面的a元素添加對click事件的事件監聽處理程序,當click發生且能夠傳播到a元素時,
就會對該事件做出相應的處理,處理程序不限於作用在a元素上
事件對象
事件對象event是一個全局對象,記錄了事件發生的各種事情,當事件發生時,事件對象event會獲得更新
未完待續
JS中的事件監聽與事件流