考慮我有以下的HTML提交:JS - 模擬形式 「的形式屬性」 文本輸入
<form id="myForm" action="/echo/html/" method="post">
<input type="text" value="10" />
<input type="submit" value="submit" />
</form>
<input type="submit" form="myForm" value="submit" />
<input id="myInput" type="text" form="myForm" />
,並與HTML我有以下JS:
document.addEventListener('submit', function(e) {
console.log(e, 'addEventListener');
});
document.getElementById('myInput').addEventListener('keyup', function(e) {
console.log(e.target.form);
e.target.form.submit();
});
(注:此代碼已被優化爲在jsfiddle中工作,因此使用/echo/html/
。關於此的文檔是here)
有三個部分,以上面的代碼:
- 的
<form>
(id="myForm"
),其具有text input
和submit input
。 submit input
外myForm
,但使用屬性form="myForm"
將提交myForm
內的數據。text input
當註冊一個keyup
時,將通過使用e.target.form.submit()
激發myForm
。 但是,這不會觸發附加到文檔的submit
事件。
我的問題是:
如何模擬/觸發器/等。一個
submit
事件,它實際上使用我上面描述的第三種方法(在keyup
上爲text input
)發射了當前正被document
收聽的submit
事件。
P.S.我無法得到一個片段,因爲它在計算器中出錯,所以jsfiddle is here。
有趣!以及這工作,並做我需要它做的事情。奇怪的'.submit()'(也許)沒有正確冒泡到'document'。 – 4lackof
我認爲這裏的解釋是,編程式觸發的事件不會冒泡(與鼠標事件不同),但我未能找到相關參考。 – eithed
有道理。如果'.submit()'帶了一個'bubble'參數,就像'new Event'一樣,這將很酷。我猜這樣的:'this.form.submit({bubbles:true});'但你的方式工作(只是意識到你甚至可以像這樣行:'this.form.dispatchEvent(new Event(「submit 「,{bubbles:true}));' – 4lackof