javascript onfocus vs onfocusin & onblur vs onfocusout
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23114509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onfocus vs onfocusin & onblur vs onfocusout
提问by Spedwards
With the answer of my previous question, Textarea highlight on focus, I discovered an alternative to onfocusand onblur. These are onfocusinand onfocusout.
通过我上一个问题的答案Textarea highlight on focus，我发现了onfocus和的替代方案onblur。这些是onfocusin和onfocusout。
My question is, is there any differences between the two with how they behave?
我的问题是，两者之间的行为方式有什么不同吗？
This fiddle demonstrates that both appear the same: http://jsfiddle.net/spedwards/pQLAM/
这个小提琴表明两者看起来相同：http: //jsfiddle.net/spedwards/pQLAM/
采纳答案by adeneo
focusand blurevents do not bubble, so event delegation is impossible with those events.
focus并且blur事件不会冒泡，因此这些事件不可能进行事件委托。
focusinand focusoutbubbles to the parent elements, and can be delegated.
focusin和focusout气泡到父元素，并且可以被委托。
Otherwise they are the same, but focusinand focusoutis 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.
否则，他们是相同的，但focusin并focusout没有任何标准的一部分，但其实都是专有的IE事件，后来被其他一些浏览器采用，但它们不支持跨浏览器。
Example
例子
<div id="test">
<input type="text" />
</div>
with js
用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
回答by Maddy
onfocus(): triggers when an input field gets focus. Mostly used with input, select, and a tag.
onfocus()：当输入字段获得焦点时触发。主要与输入、选择和标签一起使用。
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.
onfocusin()：onfocus 事件类似于 onfocusin 事件。主要区别在于 onfocus 事件不会冒泡。因此，如果您想知道一个元素或其子元素是否获得了 focus()，您可以使用 onfocusin 事件。但是，您可以通过为 onfocus 事件使用 addEventListener() 方法的可选 useCapture 参数来实现这一点。此外，Firefox 不支持 onfocusin()。
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()".
下面的代码是一个示例，其中选择了表单，但事件正在委托给作为表单子元素的输入元素。如果替换为“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.
onblur()：当用户离开输入字段或失去焦点时。
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.
onfocusout： onblur 事件类似于 onfocusout 事件。主要区别在于 onblur 事件不会冒泡，即不会委托给子元素。因此，如果您想找出元素或其子元素是否失去焦点，可以使用 onfocusout 事件。但是，您可以通过对 onblur 事件使用 addEventListener() 方法的可选 useCapture 参数来实现这一点。此外，Firefox 不支持 onfocusout()。
