发表新帖
发表新帖

onfocus vs onfocusin & onblur vs onfocusout

后端 未结
关注
2 607
猫巷女王i
猫巷女王i 2021-01-05 01:06

With the answer of my previous question, Textarea highlight on focus, I discovered an alternative to onfocus and onblur. These are onfocusin<

相关标签:
2条回答
  • 眼角桃花
    2021-01-05 01:25

    focus and blur events do not bubble, so event delegation is impossible with those events.

    focusin and focusout bubbles to the parent elements, and can be delegated.

    Otherwise they are the same, but focusin and focusout is not part of any standard, but are in fact proprietary IE events, later adopted by some other browsers, but they are not supported cross browser.

    Example

    <div id="test">
    <input type="text" />
</div>

    with js

    var div = document.getElementById('test');

div.addEventListener('focus', handler, false); // does not work, focus does not bubble

div.addEventListener('focusin', handler, false); // works when input is focused, as the event bubbles

    FIDDLE

    0 讨论(0)
  • 闹比i
    2021-01-05 01:31

    onfocus(): triggers when an input field gets focus. Mostly used with input, select, and a tag.

    onfocusin(): The onfocus event is similar to the onfocusin event. The main difference is that the onfocus event does not bubble. Therefore, if you want to find out whether an element or its child gets the focus(), you could use the onfocusin event. However, you can achieve this by using the optional useCapture parameter of the addEventListener() method for the onfocus event. Also, onfocusin() is not supported by firefox.

    Below code is an example where selected the form but event is delegeting to the input elements which are children of form. Same won't happen if replaced with "focus()".

    <!DOCTYPE html>
<html>
<body>

<p>When you enter the input field (child of FORM), a function is triggered which sets the background color to yellow. When you leave the input field, a function is triggered which removes the background color.</p>

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

</body>
</html>

    onblur(): when a user leaves an input field or loses focus.

    onfocusout: The onblur event is similar to the onfocusout event. The main difference is that the onblur event does not bubble i.e does not delegate to the child element. Therefore, if you want to find out whether an element or its child loses focus, you could use the onfocusout event. However, you can achieve this by using the optional useCapture parameter of the addEventListener() method for the onblur event.Also, onfocusout() is not supported by firefox.

    0 讨论(0)
 看不清?
提交回复
热议问题