作者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