[DOM Event Learning] Section 2 概念梳理 什麼是事件 DOM Event
事件
事件(Event)是用來通知程式碼,一些有趣的事情發生了.
每一個Event都會被一個Event物件所表示,這個物件可能還會有一些自定義的欄位或者方法,來獲取發生什麼事情的更多資訊.
Event物件實現了Event介面(https://developer.mozilla.org/en-US/docs/Web/API/Event).
事件可以是任何事情,從最基本的使用者互動,到rendering model中自動發生的一些事情.
有一些官方規範中的標準事件,也有一些特定瀏覽器使用的內部事件.
事件處理器
要在某個物件發生某個事件(比如一個a標籤被點選)的時候得到通知,可以為這個物件的這個事件指定一個event handler.
指定方法:
1.用元素名為on{eventtype}的HTML屬性, 比如:
<button onclick="return handleClick(event);">
2.用JavaScript選取元素,設定對應的onXXX屬性,比如:
document.getElementById("mybutton").onclick = function(event) { ... }.
更現代的瀏覽器可以用addEventListener()方法: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
但是這個方法不相容IE9之前的瀏覽器.
如果用jQuery來註冊監聽,框架會幫我們處理瀏覽器的相容性問題.
具體的各種註冊監聽的方式, 上一篇博文中有總結:http://www.cnblogs.com/mengdd/p/4354339.html
Event handler可以設定在HTML元素上,也可以設定在其他產生事件的物件上,比如window, document, XMLHttpRequest等.
因為歷史原因,一些<body>和<frameset>上的屬性實際是在它們的Window物件上設定event handler.
比如:onblur, onerror, onfocus, onload, onscroll.
事件物件
在時間被觸發的時候,回撥方法接收一個事件物件作為引數.
這樣你在處理的時候,可以知道當前是什麼事件(type), 它的target, 以及相關的事件引數.
Event是一個介面, 它有一些公共的屬性和方法.
各種具體的事件介面(比如MouseEvent, KeyboardEvent)都是Event的子類.
事件物件的方法中:
event.stopPropagation() 會阻止當前事件的進一步傳播.
event.preventDefault() 會取消可以取消的事件, 但是不阻止事件的進一步傳播.
preventDefault()用來阻止一些預設的行為發生.
參考資料:
Event Developer Guide: https://developer.mozilla.org/en-US/docs/Web/Guide/Events
learn jQuery Events: http://learn.jquery.com/events/
Mozilla Event reference: https://developer.mozilla.org/en-US/docs/Web/Events