事件函數(shù)列表
blur() 元素失去焦點(diǎn)
focus() 元素獲得焦點(diǎn)
click() 鼠標(biāo)單擊
mouseover() 鼠標(biāo)進(jìn)入(進(jìn)入子元素也觸發(fā))
mouseout() 鼠標(biāo)離開(離開子元素也觸發(fā))
mouseenter() 鼠標(biāo)進(jìn)入(進(jìn)入子元素不觸發(fā))
mouseleave() 鼠標(biāo)離開(離開子元素不觸發(fā))
hover() 同時(shí)為mouseenter和mouseleave事件指定處理函數(shù)
ready() DOM加載完成
resize() 瀏覽器窗口的大小發(fā)生改變
scroll() 滾動(dòng)條的位置發(fā)生變化
submit() 用戶遞交表單
編寫一個(gè)form表單巧还,用來演示輸入框獲取焦點(diǎn)和失去焦點(diǎn)的示例
好了恕沫,有了基本的HTML架構(gòu)之后,就可以來演示了。
focus() 元素獲得焦點(diǎn)
首先先來這個(gè)focus()
函數(shù)。
可以看到當(dāng)獲取焦點(diǎn)的時(shí)候,就立即彈出alert()
泥栖。
其實(shí)通過focus()
函數(shù)只是簡(jiǎn)單用來初始化文本框的焦點(diǎn)輸入的而已,如下:
當(dāng)剛進(jìn)入頁面勋篓,文本框就自動(dòng)獲取焦點(diǎn)吧享,這基本上就是這個(gè)方法的大部分用法了。
blur() 元素失去焦點(diǎn)
使用blur()
失去焦點(diǎn)這個(gè)方法一般會(huì)結(jié)合獲取文本框內(nèi)容的函數(shù)一起使用生巡,如下:
當(dāng)獲取到文本框內(nèi)的值之后,就可以對(duì)其進(jìn)行正則驗(yàn)證或者其他方式的校驗(yàn)见妒。
那么這里有一個(gè)疑問孤荣,就是密碼框輸入內(nèi)容的話,能否獲取到值呢须揣?
密碼框也是可以正常獲取值的盐股。
完整代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#username').focus();
$('#username').blur(function(){
// alert($(this).val());
})
$('#password').blur(function(){
alert($(this).val());
})
})
</script>
<style type="text/css">
</style>
</head>
<body>
<form action="#">
<!-- label{用戶名}+input.user+br+label{密碼}+input.pwd -->
<label for="username">用戶名</label>
<input type="text" id="username">
<br>
<label for="password">密   碼</label>
<input type="password" id="password">
<br>
<input type="submit" name="" value="提交">
</form>
</body>
</html>