jQuery表單事件之blur與focus事件
在之前2.8與2.9節(jié)我們學(xué)過(guò)了表單處理事件focusin事件與focusout事件，同樣用于處理表單焦點(diǎn)的事件還有blur與focus事件
它們之間的本質(zhì)區(qū)別:
是否支持冒泡處理
舉個(gè)簡(jiǎn)單的例子
<div>
<input type="text" />
</div>
其中input元素可以觸發(fā)focus()事件
div是input的父元素，當(dāng)它包含的元素input觸發(fā)了focus事件時(shí)，它就產(chǎn)生了focusin()事件。
focus()在元素本身產(chǎn)生，focusin()在元素包含的元素中產(chǎn)生
blur與focusout也亦是如此
具體參考下案例，給出來(lái)的區(qū)別
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h4>.focusin與blur</h4>
<div class="left">
<div class="aaron">
點(diǎn)擊觸發(fā)焦點(diǎn)(無(wú)反應(yīng))：
<input type="text" />
</div>
<div class="aaron1">
點(diǎn)擊觸發(fā)焦點(diǎn)并冒泡：
<input type="text" />
</div>
</div>
<script type="text/javascript">
$(".aaron").focus(function() {
$(this).css('border', '2px solid red')
})
$(".aaron1").focusin(function() {
$(this).find('input').val('冒泡捕獲了focusin事件')
})
</script>
<h4>.focusout與blur</h4>
<div class="right">
<div class="aaron3">
點(diǎn)擊觸發(fā)失去焦點(diǎn)(無(wú)反應(yīng))：
<input type="text" />
</div>
<div class="aaron4">
點(diǎn)擊觸發(fā)失去焦點(diǎn)并冒泡：
<input type="text" />
</div>
</div>
<script type="text/javascript">
$(".aaron3").blur(function() {
$(this).css('border', '2px solid red')
})
$(".aaron4").focusout(function() {
$(this).find('input').val('冒泡捕獲了focusout事件')
})
</script>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
