Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
使用者與網頁有互動操作。例:
開啟網頁
滑鼠滑過元素
點擊元素
一般文字框的焦點輸入(focus)
打字
送出表單資料
視窗拖曳改變大小
找到要綁定的元素
什麼樣的事件綁定,例:click、dblclick。
事件觸發後,要執行什麼程式,通常會是一個帶有事件物件(Event Object)的函式。
事件觸發後,除了自訂邏輯之外,事件物件當中,重要的兩個:
停止預設行為(e.preventDefault()
)
停止事件冒泡(e.stopPropagation()
)
html 部份:5_5_dynamic_binding.html
js 部份:
請藉由以下範例,瞭解上述兩段 js 程式的差異:
click 事件的寫法,使用 .on()
:
範例:
如果要停止事件冒泡狀況發生,在正確的位置執行以下程式:
範例:燈箱(或稱做 modal)。
mouseenter:滑鼠移入時觸發。(不會發生冒泡狀況)
mouseleave:滑鼠移出時觸發。(不會發生冒泡狀況)
範例:
mouseover:滑鼠移入時觸發。(會發生冒泡狀況)
mouseout:滑鼠移出時觸發。(會發生冒泡狀況)
範例(不用背,要會觀察):
說明:滑鼠游標在元素上移動時觸發。(會發生事件冒泡狀況)
範例:5_4_mousemove.html
以下寫法為例,事件觸發時,this 指的就是那個元素。
所以可把 this 丟到 jQuery 函式中,使用 jQuery 提供的函式:
範例: 5_4_this.html
連結的預設行為是是將連結開啟。可以透過以下程式來停止:
範例:5_4_link_prevent_default.html
停止「表單資料送出的預設行為」。
停止「文字出現在欄位上的預設行為」。
建立 jquery/practice/form_submit.html
檔案,內容如下:
說明:表單送出事件的寫法:
接著請撰寫以下兩個:
如果沒有填寫資料,表單不能送出,然後用 alert()
顯示「請輸入資料」。
如果有填寫資料,就表單按鈕原來預設的形式將資料送出。
參考作法: