[問題] 事件的順序

看板Ajax作者 (啦~好想幸福呀~!)時間13年前 (2012/10/02 21:51), 編輯推噓3(3023)
留言26則, 2人參與, 最新討論串1/1
各位大大好 我有個關於事件先後順序的問題要麻煩大家解釋一下 我現在有個form 裡面有一些data 然後後面總共有三個這種<button></button>的button 那我用jquery去註冊事件 $("#formName").live("submit",function(e){ e.preventDefault(); brabrarba...(a) }); $("#btn_1").live("click",function(e){ e.preventDefault(); brabrabra...(b) }) btn_2、btn_3如btn_1。 然後呢 我現在在測試submit(按下enter)時會發生的事情 它不是去跑(a) 而是去跑(b)的部分 也就是btn_1的事件 所以我想問看看大家對於這樣的事件順序是應該要怎麼理解 目前我知道的只有btn會自動去trigger submit的事情所以我要preventDefault(); 可是反過來為什麼submit會去觸發btn_1的事件呢? -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.123.29.49

10/02 22:10, , 1F
<button>沒有指定type的話,預設值都是 type="submit"
10/02 22:10, 1F

10/02 22:11, , 2F
所以你按下ENTER之後,就等於按了 <button> 去提交
10/02 22:11, 2F

10/02 22:12, , 3F
然後你的 onclick 裡面有 preventDefault,所以 form 的
10/02 22:12, 3F

10/02 22:12, , 4F
onsubmit 事件就被擋下來了。
10/02 22:12, 4F

10/02 22:15, , 5F
如改成 <button type="button"> 那按ENTER就不會觸發按鈕
10/02 22:15, 5F

10/02 22:15, , 6F
可是這樣的話 我有在form submit的部分註冊事情卻沒動作
10/02 22:15, 6F

10/02 22:16, , 7F
不太能理解它整體的先後順序 還望大大解釋一下
10/02 22:16, 7F

10/02 22:18, , 8F
按下ENTER → 第一個button被click → 表單 submit 出去
10/02 22:18, 8F

10/02 22:18, , 9F
以你原本的寫法來說,如果拿掉 onclick 的 preventDefault
10/02 22:18, 9F

10/02 22:19, , 10F
那 onclick 和 onsubmit 兩個事件都會依序執行了
10/02 22:19, 10F

10/02 22:21, , 11F
那這兩者事件有先後順序嗎? 而function(e)的e包含兩者?
10/02 22:21, 11F

10/02 22:25, , 12F
先 click 完之後才會 submit
10/02 22:25, 12F

10/02 22:25, , 13F
e 是 jQuery 的 event object → http://bit.ly/c9LTUR
10/02 22:25, 13F

10/02 22:27, , 14F
瀏覽器的預設動作就是 click → submit
10/02 22:27, 14F

10/02 22:28, , 15F
但是在click時遇到了preventDefault 後面的動作就被擋下來
10/02 22:28, 15F

10/02 22:29, , 16F
恩... 所以這時候button裡面抓到的event是submit嗎?
10/02 22:29, 16F

10/02 22:30, , 17F
另外就是所以實際上onclick也有註冊到onsubmit?
10/02 22:30, 17F

10/02 22:31, , 18F
要不然為什麼會按enter的時候註冊onclick反而跑出來了
10/02 22:31, 18F

10/02 22:32, , 19F
不,click就是click、submit就是submit
10/02 22:32, 19F

10/02 22:33, , 20F
只是瀏覽器把第一個按鈕當成提交按鈕,原因在1F解釋過了
10/02 22:33, 20F

10/02 22:34, , 21F
所以你按ENTER等於觸發了兩個事件
10/02 22:34, 21F

10/02 22:35, , 22F
所以相對來說click事件優先於submit囉?
10/02 22:35, 22F

10/02 22:38, , 23F
對,應該說有type="submit"按鈕的 click 比 submit 先執行
10/02 22:38, 23F

10/02 22:39, , 24F
好窩 那我完全理解了 謝謝大大的解釋 剛剛也跟同學實驗
10/02 22:39, 24F

10/02 22:39, , 25F
所以能理解說什麼了 再次謝謝大大
10/02 22:39, 25F

10/02 22:40, , 26F
嗯,不客氣。
10/02 22:40, 26F
文章代碼(AID): #1GQl5bT5 (Ajax)
文章代碼(AID): #1GQl5bT5 (Ajax)