Kurs tavsiyesi:

DOM olayları FocusEvent

onfocusin olayı

Tanım ve kullanım

Firefox, onfocusin olayını desteklemese de, addEventListener() metodu ile seçenekli useCapture parametresi kullanarak onfocus olayının yakalama dinleyicisini (onfocusin olayının kullanılabilirliğini belirlemek için) kullanabilirsiniz. Ana fark, onfocus olayının balonlaşmamasıdır. Bu nedenle, bir elementin veya bir alt elementin odaklanıp odaklanmadığını öğrenmek istiyorsanız, onfocusin olayını kullanmalısınız.onfocusin olayı, bir elementin odaklanmak üzereyken tetiklenir. onfocus olayıonfocusin olayı benzerdir

Firefox, onfocusin olayını desteklemese de, addEventListener() metodu ile seçenekli useCapture parametresi kullanarak onfocus olayının yakalama dinleyicisini (onfocusin olayının kullanılabilirliğini belirlemek için) kullanabilirsiniz. Ana fark, onfocus olayının balonlaşmamasıdır. Bu nedenle, bir elementin veya bir alt elementin odaklanıp odaklanmadığını öğrenmek istiyorsanız, onfocusin olayını kullanmalısınız.。

Firefox, onfocusin olayını desteklemese de, addEventListener() metodu ile seçenekli useCapture parametresi kullanarak onfocus olayının yakalama dinleyicisini (onfocusin olayının kullanılabilirliğini belirlemek için) kullanabilirsiniz. Ana fark, onfocus olayının balonlaşmamasıdır. Bu nedenle, bir elementin veya bir alt elementin odaklanıp odaklanmadığını öğrenmek istiyorsanız, onfocusin olayını kullanmalısınız.İpucu: onfocusout olayıonfocusin olayı ile

Tersine.

Örnek

Örnek 1

Giriş alanı odaklanmak üzereyken JavaScript çalıştırılır:

Kendi kendine deney

<input type="text" onfocusin="myFunction()">

Sayfa altında daha fazla TIY örneği bulunmaktadır.

Gramer

HTML'de:< element.addEventListener("focusin",onfocusin="

Kendi kendine deney

">

JavaScript'te, addEventListener() metodu ile kullanılır:JavaScript'te (Chrome, Safari ve Opera 15+'te normal çalışmayabilir):.addEventListener("focusin",.onfocusin = function(){

Kendi kendine deney

};

JavaScript'te, addEventListener() metodu ile kullanılır:object .addEventListener("focusin",myScript

Kendi kendine deney

注释：); Internet Explorer 8 veya daha eski sürümler desteklemiyoraddEventListener() metodu

。

Teknik ayrıntılar 支持
Balonlaşma: İptal edilebilir:
Desteklenmiyor FocusEvent
Desteklenen HTML etiketleri: Tüm HTML elemanları, aşağıdaki dışında: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> ve <title>
DOM sürümü： Level 2 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件 Chrome IE Firefox Safari Opera
onfocusin 支持 支持 52.0 支持 支持

注释：onfocusin 事件在使用 JavaScript HTML DOM 语法 的 Chrome、Safari 和 Opera 15+ 中可能无法按预期工作。但是，它应该作为 HTML 属性并使用 addEventListener() 方法（请参见下面的语法示例）。

更多实例

例子 2

将 "onfocusin" 与 "onfocusout" 事件一起使用：

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Kendi kendine deney

例子 3

事件委托：将 addEventListener() 的 useCapture 参数设置为 true（用于 focus 和 blur）：

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Kendi kendine deney

例子 4

事件委托：使用 focusin 事件：

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Kendi kendine deney

DOM olayları FocusEvent