如果它們相同,那麼爲什麼會有這種事件呢?在Web瀏覽器中,onblur和onfocusout有什麼區別?
回答
如您所知,如果該元素具有焦點但會丟失該元素,則該元素將觸發該元素。
onFocusOut事件在這種情況下觸發,但也觸發如果任何子元素失去焦點。
例如,您有一個具有特殊格式的div,因爲人正在編輯該區域中的字段。當焦點離開div時,您可以使用onFocusOut關閉該格式。
直到最近,onFocusOut只被IE使用。如果情況發生了變化,那就是最近的事了。在FF,Chrome等中進行測試
2012年11月更新 - Chrome仍不支持'onfocusout'。 http://jsfiddle.net/4n39h/1/ –
2014年1月即時使用onfocusout在鉻 – Snymax
onBlur被解僱,即使頁面失去焦點 –
onfocusout
事件是一個非標準事件,僅適用於Internet Explorer,而onblur
事件是W3C標準的一部分,適用於所有現代瀏覽器。
The Jquery documentation has a good focusout
vs. blur
demo爲了清楚起見,我將在下面重現。簡而言之,如果演示中的選擇器$('p')
包含輸入和父元素,則觸發focusout
。而blur
僅在選擇器處於輸入端時觸發 - $('input')
。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>focusout demo</title>
<style>
.inputs {
float: left;
margin-right: 1em;
}
.inputs p {
margin-top: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="inputs">
<p>
<input type="text"><br>
<input type="text">
</p>
<p>
<input type="password">
</p>
</div>
<div id="focus-count">focusout fire</div>
<div id="blur-count">blur fire</div>
<script>
var focus = 0,
blur = 0;
$("p")
.focusout(function() {
focus++;
$("#focus-count").text("focusout fired: " + focus + "x");
})
.blur(function() {
blur++;
$("#blur-count").text("blur fired: " + blur + "x");
});
</script>
</body>
</html>
我無法解決模糊,不知道爲什麼:/ –
有本質上是在2017年沒有什麼區別:
https://www.quirksmode.org/js/events_order.html
很少Web開發人員自覺地運用事件捕獲或者冒泡。在今天製作的網頁中,根本沒有必要讓冒泡事件由幾個不同的事件處理程序來處理。用戶可能會因單擊鼠標後發生的幾件事而感到困惑,並且通常希望將事件處理腳本分開。
- 1. AIR和瀏覽器有什麼區別?
- 2. 瀏覽器中完成和繼續有什麼區別?
- 3. 瀏覽器擴展和瀏覽器幫助對象有什麼區別
- 4. Gecko支持的瀏覽器和Webkit支持的瀏覽器有什麼區別?
- 5. 「瀏覽器發佈」和「程序發佈」有什麼區別?
- 6. 瀏覽器和節點有什麼區別?
- 7. 瀏覽器'首選項'和'所需功能'有什麼區別?
- 8. 在requestAnimationFrame中,瀏覽器中刷新率和幀速率有什麼區別?
- 9. HTML中的onBlur和onChange屬性有什麼區別?
- 10. 瀏覽器中的本地存儲和緩存有什麼區別?
- 11. 有什麼區別`和$(Bash中有什麼區別?
- 12. Web服務器和遊戲服務器有什麼區別?
- 13. 谷歌瀏覽器擴展和Firefox附加組件有什麼區別?
- 14. 在web瀏覽器中使用`webView.getSolidColor();`有什麼作用?
- 15. Web服務器組件和Web服務器有什麼區別? - 沒有框架
- 16. 在Firefox中,Web控制檯和瀏覽器控制檯的區別
- 17. 在JavaScript中,'\'和'\ n'有什麼區別?
- 18. =和在mysql中有什麼區別?
- 19. 在Ember.js中,[]和Ember.A([])有什麼區別?
- 20. 在PHP中!==和!=有什麼區別?
- 21. *和。*在matlab中有什麼區別?
- 22. !=和=!有什麼區別!在Java中?
- 23. &&和||有什麼區別?在JavaScript中?
- 24. 在Prolog中==和= =有什麼區別?
- 25. 〜/和〜在linux中有什麼區別?
- 26. Lucee - 服務器和Web管理頁面有什麼區別?
- 27. Web瀏覽器中的語音識別
- 28. ==和===有什麼區別?
- 29. ==和===有什麼區別?
- 30. 有什麼區別? :和||
事件冒泡和捕獲的完整說明http://javascript.info/tutorial/bubbling-and-capturing – Mikhail