生活随笔
收集整理的這篇文章主要介紹了
JavaScript学习笔记06【高级——JavaScript中的事件】
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
- w3school 在線教程：https://www.w3school.com.cn
JavaScript學(xué)習(xí)筆記01【基礎(chǔ)——簡(jiǎn)介、基礎(chǔ)語(yǔ)法、運(yùn)算符、特殊語(yǔ)法、流程控制語(yǔ)句】【day01】JavaScript學(xué)習(xí)筆記02【基礎(chǔ)——對(duì)象（Function、Array、Date、Math、RegExp、Global）】【day01】JavaScript學(xué)習(xí)筆記03【基礎(chǔ)——對(duì)象（RegExp、Global）】【day01】JavaScript學(xué)習(xí)筆記04【高級(jí)——DOM和事件的簡(jiǎn)單學(xué)習(xí)、BOM對(duì)象】【day02】JavaScript學(xué)習(xí)筆記05【高級(jí)——DOM對(duì)象】【day02】JavaScript學(xué)習(xí)筆記06【高級(jí)——JavaScript中的事件】【day02】
目錄
10 JavaScirpt中的事件
事件_概述
HTML DOM Event 對(duì)象
事件_常見(jiàn)事件演示
1、失去焦點(diǎn)事件
2、加載完成事件
3、綁定鼠標(biāo)事件
4、鍵盤事件
5、選擇和改變事件
6、表單事件
常見(jiàn)事件演示-代碼
案例5_表格全選
Checkbox 對(duì)象的屬性
案例6_表單檢驗(yàn)
HTML DOM Text 對(duì)象
10 JavaScirpt中的事件
事件_概述
* 概念：某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行。?? ?
?? ?* 事件：某些操作。如： 單擊、雙擊、鍵盤按下了、鼠標(biāo)移動(dòng)了 ...
?? ?* 事件源：組件。如： 按鈕、文本輸入框 ...
?? ?* 監(jiān)聽(tīng)器：代碼。
?? ?* 注冊(cè)監(jiān)聽(tīng)：將事件、事件源、監(jiān)聽(tīng)器結(jié)合在一起。當(dāng)事件源上發(fā)生了某個(gè)事件，則觸發(fā)執(zhí)行某個(gè)監(jiān)聽(tīng)器代碼。
常見(jiàn)的事件：
?? ?1. 點(diǎn)擊事件：
?? ??? ?1. onclick：單擊事件
?? ??? ?2. ondblclick：雙擊事件
?? ?2. 焦點(diǎn)事件
?? ??? ?1. onblur：失去焦點(diǎn)。
?? ??? ??? ?* 一般用于表單驗(yàn)證
?? ??? ?2. onfocus:元素獲得焦點(diǎn)。
?? ?3. 加載事件：
?? ??? ?1. onload：一張頁(yè)面或一幅圖像完成加載。
?? ?4. 鼠標(biāo)事件：
?? ??? ?1. onmousedown?? ?鼠標(biāo)按鈕被按下。
?? ??? ??? ?* 定義方法時(shí)，定義一個(gè)形參，接受event對(duì)象。
?? ??? ??? ?* event對(duì)象的button屬性可以獲取鼠標(biāo)按鈕鍵被點(diǎn)擊了。
?? ??? ?2. onmouseup?? ?鼠標(biāo)按鍵被松開(kāi)。
?? ??? ?3. onmousemove?? ?鼠標(biāo)被移動(dòng)。
?? ??? ?4. onmouseover?? ?鼠標(biāo)移到某元素之上。
?? ??? ?5. onmouseout?? ?鼠標(biāo)從某元素移開(kāi)。
?? ?5. 鍵盤事件：
?? ??? ?1. onkeydown?? ?某個(gè)鍵盤按鍵被按下。
?? ??? ?2. onkeyup?? ??? ?某個(gè)鍵盤按鍵被松開(kāi)。
?? ??? ?3. onkeypress?? ?某個(gè)鍵盤按鍵被按下并松開(kāi)。
?? ?6. 選擇和改變
?? ??? ?1. onchange?? ?域的內(nèi)容被改變。
?? ??? ?2. onselect?? ?文本被選中。
?? ?7. 表單事件：
?? ??? ?1. onsubmit?? ?確認(rèn)按鈕被點(diǎn)擊。
?? ??? ??? ?* 可以阻止表單的提交
?? ??? ??? ??? ?* 方法返回false則表單被阻止提交。
?? ??? ?2. onreset?? ?重置按鈕被點(diǎn)擊。
HTML DOM Event 對(duì)象
事件_常見(jiàn)事件演示
1、失去焦點(diǎn)事件
2、加載完成事件
3、綁定鼠標(biāo)事件
??
4、鍵盤事件
??
5、選擇和改變事件
6、表單事件
常見(jiàn)事件演示-代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>常見(jiàn)事件</title><script>//2.加載完成事件 onloadwindow.onload = function () {//1.失去焦點(diǎn)事件document.getElementById("username").onblur = function () {alert("失去焦點(diǎn)了...");}//3.綁定鼠標(biāo)移動(dòng)到元素之上事件document.getElementById("username").onmouseover = function () {alert("鼠標(biāo)來(lái)了...");}//3.綁定鼠標(biāo)點(diǎn)擊事件document.getElementById("username").onmousedown = function (event) {// 點(diǎn)擊鼠標(biāo)，瀏覽器引擎自動(dòng)調(diào)用方法，調(diào)用方法時(shí) 會(huì)傳遞一個(gè)對(duì)象event// 可以使用event獲取操作屬性// alert("鼠標(biāo)點(diǎn)擊了....");alert(event.button);}//4.鍵盤事件document.getElementById("username").onkeydown = function (event) {if (event.keyCode == 13) { // a：65；回車：13alert("提交表單~");}}//5.選擇和改變事件document.getElementById("username").onchange = function (event) {alert("改變了~")}document.getElementById("city").onchange = function (event) {alert("改變了...")}//6.表單事件document.getElementById("form").onsubmit = function () {//校驗(yàn)用戶名格式是否正確var flag = false;return flag;}}function checkForm() {return true;}</script></head><body><!--function fun(){return checkForm();}--><form action="#" id="form" onclick="return checkForm();"><input name="username" id="username"><select id="city"><option>--請(qǐng)選擇--</option><option>北京</option><option>上海</option><option>西安</option></select><input type="submit" value="提交"></form></body>
</html>
案例5_表格全選
分析：
?? ?1.全選：
?? ??? ?* 獲取所有的checkbox
?? ??? ?* 遍歷cb，設(shè)置每一個(gè)cb的狀態(tài)為選中狀態(tài)：checked
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>表格全選</title><style>table {border: 1px solid;width: 500px;margin-left: 30%;}td, th {text-align: center;border: 1px solid;}div {margin-top: 10px;margin-left: 30%;}.out {background-color: white;}.over {background-color: pink;}</style><script>//1.在頁(yè)面加載完后綁定事件window.onload = function () {//2.給全選按鈕綁定單擊事件document.getElementById("selectAll").onclick = function () {//1.獲取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍歷for (var i = 0; i < cbs.length; i++) {//3.設(shè)置每一個(gè)cb的狀態(tài)為選中：checkedcbs[i].checked = true;}}//全不選document.getElementById("unSelectAll").onclick = function () {//1.獲取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍歷for (var i = 0; i < cbs.length; i++) {//3.設(shè)置每一個(gè)cb的狀態(tài)為未選中狀態(tài)cbs[i].checked = false;}}//反選document.getElementById("selectRev").onclick = function () {//1.獲取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍歷for (var i = 0; i < cbs.length; i++) {//3.設(shè)置每一個(gè)cb的狀態(tài)為相反cbs[i].checked = !cbs[i].checked;}}//第一個(gè)cb點(diǎn)擊document.getElementById("firstCb").onclick = function () {//1.獲取所有的checkboxvar cbs = document.getElementsByName("cb");//獲取第一個(gè)cb// alert(this); // this：發(fā)生事件的事件源//2.遍歷for (var i = 0; i < cbs.length; i++) {//3.設(shè)置每一個(gè)cb的狀態(tài)和第一個(gè)cb的狀態(tài)一樣cbs[i].checked = this.checked;}}//給所有tr綁定鼠標(biāo)移到元素之上和移出元素事件var trs = document.getElementsByTagName("tr");for (var i = 0; i < trs.length; i++) { // 遍歷trs[i].onmouseover = function () { // 移到元素之上this.className = "over";}trs[i].onmouseout = function () { // 移出元素this.className = "out";}}}</script></head><body><table><caption>學(xué)生信息表</caption><tr><th><input type="checkbox" name="cb" id="firstCb"></th><th>編號(hào)</th><th>姓名</th><th>性別</th><th>操作</th></tr><tr><td><input type="checkbox" name="cb"></td><td>1</td><td>令狐沖</td><td>男</td><td><a href="javascript:void(0);">刪除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);">刪除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);">刪除</a></td></tr></table><div><input type="button" id="selectAll" value="全選"><input type="button" id="unSelectAll" value="全不選"><input type="button" id="selectRev" value="反選"></div></body>
</html>
Checkbox 對(duì)象的屬性
案例6_表單檢驗(yàn)
??
分析：
????1.給表單綁定onsubmit事件，監(jiān)聽(tīng)器中判斷每一個(gè)方法校驗(yàn)的結(jié)果。
????????如果都為true，則監(jiān)聽(tīng)器方法返回true
????????如果有一個(gè)為false，則監(jiān)聽(tīng)器方法返回false
????2.定義一些方法分別校驗(yàn)各個(gè)表單項(xiàng)。
????3.給各個(gè)表單項(xiàng)綁定onblur事件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注冊(cè)頁(yè)面</title><style>* {margin: 0px;padding: 0px;box-sizing: border-box;}body {background: url("img/register_bg.png") no-repeat center;padding-top: 25px;}.rg_layout {width: 900px;height: 500px;border: 8px solid #EEEEEE;background-color: white;margin: auto; /* 讓div水平居中 */}.rg_left {/*border: 1px solid red;*/float: left;margin: 15px;}.rg_left>p:first-child {color: #FFD026;font-size: 20px;}.rg_left>p:last-child {color: #A6A6A6;font-size: 20px;}.rg_center {float: left;/* border: 1px solid red;*/}.rg_right {/*border: 1px solid red;*/float: right;margin: 15px;}.rg_right>p:first-child {font-size: 15px;}.rg_right p a {color: pink;}.td_left {width: 100px;text-align: right;height: 45px;}.td_right {padding-left: 50px;}#username, #password, #email,#name, #tel, #birthday, #checkcode {width: 251px;height: 32px;border: 1px solid #A6A6A6;border-radius: 5px; /* 設(shè)置邊框圓角 */padding-left: 10px;}#checkcode {width: 110px;}#img_check {height: 32px;vertical-align: middle;}#btn_sub {width: 150px;height: 40px;background-color: #FFD026;border: 1px solid #FFD026;}.error {color: red;}#td_sub {padding-left: 150px;}</style><script>window.onload = function () {//1.給表單綁定onsubmit事件document.getElementById("form").onsubmit = function () {//調(diào)用用戶校驗(yàn)方法 chekUsername();//調(diào)用密碼校驗(yàn)方法 chekPassword();return checkUsername() && checkPassword();}//給用戶名和密碼框分別綁定離焦事件document.getElementById("username").onblur = checkUsername;document.getElementById("password").onblur = checkPassword;}//校驗(yàn)用戶名function checkUsername() {//1.獲取用戶名的值var username = document.getElementById("username").value;//2.定義正則表達(dá)式var reg_username = /^\w{6,12}$/;//3.判斷值是否符合正則的規(guī)則var flag = reg_username.test(username);//4.提示信息var s_username = document.getElementById("s_username");if (flag) {//提示綠色對(duì)勾s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";} else {//提示紅色，用戶名有誤s_username.innerHTML = "用戶名格式有誤";}return flag;}//校驗(yàn)密碼function checkPassword() {//1.獲取用戶名的值var password = document.getElementById("password").value;//2.定義正則表達(dá)式var reg_password = /^\w{6,12}$/;//3.判斷值是否符合正則的規(guī)則var flag = reg_password.test(password);//4.提示信息var s_password = document.getElementById("s_password");if (flag) {//提示綠色對(duì)勾s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";} else {//提示紅色用戶名有誤s_password.innerHTML = "密碼格式有誤";}return flag;}</script>
</head>
<body><div class="rg_layout"><div class="rg_left"><p>新用戶注冊(cè)</p><p>USER REGISTER</p></div><div class="rg_center"><div class="rg_form"><!--定義表單 form--><form action="#" id="form" method="get"><table><tr><td class="td_left"><label for="username">用戶名</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="請(qǐng)輸入用戶名"><span id="s_username" class="error"></span></td></tr><tr><td class="td_left"><label for="password">密碼</label></td><td class="td_right"><input type="password" name="password" id="password" placeholder="請(qǐng)輸入密碼"><span id="s_password" class="error"></span></td></tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="email" name="email" id="email" placeholder="請(qǐng)輸入郵箱"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="請(qǐng)輸入姓名"></td></tr><tr><td class="td_left"><label for="tel">手機(jī)號(hào)</label></td><td class="td_right"><input type="text" name="tel" id="tel" placeholder="請(qǐng)輸入手機(jī)號(hào)"></td></tr><tr><td class="td_left"><label>性別</label></td><td class="td_right"><input type="radio" name="gender" value="male" checked> 男<input type="radio" name="gender" value="female"> 女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="請(qǐng)輸入出生日期"></td></tr><tr><td class="td_left"><label for="checkcode">驗(yàn)證碼</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode"placeholder="請(qǐng)輸入驗(yàn)證碼"><img id="img_check" src="img/verify_code.jpg"></td></tr><tr><td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注冊(cè)"></td></tr></table></form></div></div><div class="rg_right"><p>已有賬號(hào)?<a href="#">立即登錄</a></p></div></div>
</body>
</html>
HTML DOM Text 對(duì)象
總結(jié)
以上是生活随笔為你收集整理的JavaScript学习笔记06【高级——JavaScript中的事件】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
