作者alan77916 (啦~好想幸福呀~!)
看板Ajax
標題[問題] 事件的順序
時間Tue Oct 2 21:51:29 2012
各位大大好
我有個關於事件先後順序的問題要麻煩大家解釋一下
我現在有個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
1F：推 akiratw:<button>沒有指定type的話，預設值都是 type="submit" 10/02 22:10
2F：→ akiratw:所以你按下ENTER之後，就等於按了 <button> 去提交 10/02 22:11
3F：→ akiratw:然後你的 onclick 裡面有 preventDefault，所以 form 的 10/02 22:12
4F：→ akiratw:onsubmit 事件就被擋下來了。 10/02 22:12
5F：→ akiratw:如改成 <button type="button"> 那按ENTER就不會觸發按鈕 10/02 22:15
6F：→ alan77916:可是這樣的話 我有在form submit的部分註冊事情卻沒動作 10/02 22:15
7F：→ alan77916:不太能理解它整體的先後順序 還望大大解釋一下 10/02 22:16
8F：推 akiratw:按下ENTER → 第一個button被click → 表單 submit 出去 10/02 22:18
9F：→ akiratw:以你原本的寫法來說，如果拿掉 onclick 的 preventDefault 10/02 22:18
10F：→ akiratw:那 onclick 和 onsubmit 兩個事件都會依序執行了 10/02 22:19
11F：→ alan77916:那這兩者事件有先後順序嗎? 而function(e)的e包含兩者? 10/02 22:21
12F：→ akiratw:先 click 完之後才會 submit 10/02 22:25
14F：→ akiratw:瀏覽器的預設動作就是 click → submit 10/02 22:27
15F：→ akiratw:但是在click時遇到了preventDefault 後面的動作就被擋下來 10/02 22:28
16F：→ alan77916:恩... 所以這時候button裡面抓到的event是submit嗎? 10/02 22:29
17F：→ alan77916:另外就是所以實際上onclick也有註冊到onsubmit? 10/02 22:30
18F：→ alan77916:要不然為什麼會按enter的時候註冊onclick反而跑出來了 10/02 22:31
19F：推 akiratw:不，click就是click、submit就是submit 10/02 22:32
20F：→ akiratw:只是瀏覽器把第一個按鈕當成提交按鈕，原因在1F解釋過了 10/02 22:33
21F：→ akiratw:所以你按ENTER等於觸發了兩個事件 10/02 22:34
22F：→ alan77916:所以相對來說click事件優先於submit囉? 10/02 22:35
23F：→ akiratw:對，應該說有type="submit"按鈕的 click 比 submit 先執行 10/02 22:38
24F：→ alan77916:好窩 那我完全理解了 謝謝大大的解釋 剛剛也跟同學實驗 10/02 22:39
25F：→ alan77916:所以能理解說什麼了 再次謝謝大大 10/02 22:39
26F：→ akiratw:嗯，不客氣。 10/02 22:40