Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
使用者與網頁有互動操作。例:
開啟網頁
滑鼠滑過元素
點擊元素
一般文字框的焦點輸入(focus)
打字
送出表單資料
視窗拖曳改變大小
找到要綁定的元素
什麼樣的事件綁定,例:click、dblclick。
事件觸發後,要執行什麼程式。通常會是一個帶有「事件物件」(Event Object)的函式。
例:
事件觸發後,除了自訂邏輯之外,進一步可以執行的程式:
停止預設行為(e.preventDefault()
)
停止事件冒泡(e.stopPropagation()
)
瀏覽器監聽 scroll
事件,可以透過 window.scrollX
及 window.scrollY
取得滑動的距離。例:
MDN:https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
任何的事件發生時,都會隨附一個事件物件(Event Object),它會提供的額外資訊,依照事件類型的不同,會帶有不同的資料。
如果在某些情境當中,需要使用到事件物件,那就可以帶入函式的第一個參數,例:
透過 e.which
來取得 keyup 事件發生時的 ASCII Code 碼:
參考:w3schools Event Object。(看看網址裡面的,找一下 e.target
是什麼?)
click 事件的寫法,使用 .addEventListener()
:
範例(click):
範例(dblclick):
如果要停止事件冒泡狀況發生,在正確的位置執行以下程式:
mousedown:滑鼠按壓下去時觸發。(會發生冒泡狀況)
mouseup:滑鼠按壓下去放開時觸發。(會發生冒泡狀況)
範例(不用背,要會觀察):
mouseover:滑鼠移入時觸發。(會發生冒泡狀況)
mouseout:滑鼠移出時觸發。(會發生冒泡狀況)
範例:
mouseenter:滑鼠移入時觸發。(不會發生冒泡狀況)
mouseleave:滑鼠移出時觸發。(不會發生冒泡狀況)
範例:
說明:滑鼠游標在元素上移動時觸發。(會發生事件冒泡狀況)
範例:
針對 document 綁定 mousemove 事件。
e.pageX:滑鼠距離頁面最左側的距離。
e.pageY:滑鼠距離頁面最上方的距離。
window.scrollY:垂直方向滑動了多少距離。
提供 html:
參考作法:
示意圖:
限制欄位只能輸入 0 ~ 9 的數字,提供 html:
撰寫 JS,讓這個欄位,只能輸入 0 ~ 9 的數字。
參考作法:
先認識 scrollHeight:指的是某一個區塊裡面的內容高度。例:
寫法:
再來看內容的展開縮合:
另外附上 jQuery 語法範例:https://codepen.io/carlos411/pen/poLroKg