- w3school 在線教程：https://www.w3school.com.cn
JavaScript學習筆記01【基礎——簡介、基礎語法、運算符、特殊語法、流程控制語句】【day01】JavaScript學習筆記02【基礎——對象（Function、Array、Date、Math、RegExp、Global）】【day01】JavaScript學習筆記03【基礎——對象（RegExp、Global）】【day01】JavaScript學習筆記04【高級——DOM和事件的簡單學習、BOM對象】【day02】JavaScript學習筆記05【高級——DOM對象】【day02】JavaScript學習筆記06【高級——JavaScript中的事件】【day02】
目錄
10 JavaScirpt中的事件
事件_概述
HTML DOM Event 對象
事件_常見事件演示
1、失去焦點事件
2、加載完成事件
3、綁定鼠標事件
4、鍵盤事件
5、選擇和改變事件
6、表單事件
常見事件演示-代碼
案例5_表格全選
Checkbox 對象的屬性
案例6_表單檢驗
HTML DOM Text 對象
10 JavaScirpt中的事件
事件_概述
* 概念：某些組件被執行了某些操作后，觸發某些代碼的執行。?? ?
?? ?* 事件：某些操作。如： 單擊、雙擊、鍵盤按下了、鼠標移動了 ...
?? ?* 事件源：組件。如： 按鈕、文本輸入框 ...
?? ?* 監聽器：代碼。
?? ?* 注冊監聽：將事件、事件源、監聽器結合在一起。當事件源上發生了某個事件，則觸發執行某個監聽器代碼。
常見的事件：
?? ?1. 點擊事件：
?? ??? ?1. onclick：單擊事件
?? ??? ?2. ondblclick：雙擊事件
?? ?2. 焦點事件
?? ??? ?1. onblur：失去焦點。
?? ??? ??? ?* 一般用于表單驗證
?? ??? ?2. onfocus:元素獲得焦點。
?? ?3. 加載事件：
?? ??? ?1. onload：一張頁面或一幅圖像完成加載。
?? ?4. 鼠標事件：
?? ??? ?1. onmousedown?? ?鼠標按鈕被按下。
?? ??? ??? ?* 定義方法時，定義一個形參，接受event對象。
?? ??? ??? ?* event對象的button屬性可以獲取鼠標按鈕鍵被點擊了。
?? ??? ?2. onmouseup?? ?鼠標按鍵被松開。
?? ??? ?3. onmousemove?? ?鼠標被移動。
?? ??? ?4. onmouseover?? ?鼠標移到某元素之上。
?? ??? ?5. onmouseout?? ?鼠標從某元素移開。
?? ?5. 鍵盤事件：
?? ??? ?1. onkeydown?? ?某個鍵盤按鍵被按下。
?? ??? ?2. onkeyup?? ??? ?某個鍵盤按鍵被松開。
?? ??? ?3. onkeypress?? ?某個鍵盤按鍵被按下并松開。
?? ?6. 選擇和改變
?? ??? ?1. onchange?? ?域的內容被改變。
?? ??? ?2. onselect?? ?文本被選中。
?? ?7. 表單事件：
?? ??? ?1. onsubmit?? ?確認按鈕被點擊。
?? ??? ??? ?* 可以阻止表單的提交
?? ??? ??? ??? ?* 方法返回false則表單被阻止提交。
?? ??? ?2. onreset?? ?重置按鈕被點擊。
HTML DOM Event 對象
事件_常見事件演示
1、失去焦點事件
2、加載完成事件
3、綁定鼠標事件
??
4、鍵盤事件
??
5、選擇和改變事件
6、表單事件
常見事件演示-代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>常見事件</title><script>//2.加載完成事件 onloadwindow.onload = function () {//1.失去焦點事件document.getElementById("username").onblur = function () {alert("失去焦點了...");}//3.綁定鼠標移動到元素之上事件document.getElementById("username").onmouseover = function () {alert("鼠標來了...");}//3.綁定鼠標點擊事件document.getElementById("username").onmousedown = function (event) {// 點擊鼠標，瀏覽器引擎自動調用方法，調用方法時 會傳遞一個對象event// 可以使用event獲取操作屬性// alert("鼠標點擊了....");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 () {//校驗用戶名格式是否正確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>--請選擇--</option><option>北京</option><option>上海</option><option>西安</option></select><input type="submit" value="提交"></form></body>
</html>
案例5_表格全選
分析：
?? ?1.全選：
?? ??? ?* 獲取所有的checkbox
?? ??? ?* 遍歷cb，設置每一個cb的狀態為選中狀態：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.在頁面加載完后綁定事件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.設置每一個cb的狀態為選中：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.設置每一個cb的狀態為未選中狀態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.設置每一個cb的狀態為相反cbs[i].checked = !cbs[i].checked;}}//第一個cb點擊document.getElementById("firstCb").onclick = function () {//1.獲取所有的checkboxvar cbs = document.getElementsByName("cb");//獲取第一個cb// alert(this); // this：發生事件的事件源//2.遍歷for (var i = 0; i < cbs.length; i++) {//3.設置每一個cb的狀態和第一個cb的狀態一樣cbs[i].checked = this.checked;}}//給所有tr綁定鼠標移到元素之上和移出元素事件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>學生信息表</caption><tr><th><input type="checkbox" name="cb" id="firstCb"></th><th>編號</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 對象的屬性
案例6_表單檢驗
??
分析：
????1.給表單綁定onsubmit事件，監聽器中判斷每一個方法校驗的結果。
????????如果都為true，則監聽器方法返回true
????????如果有一個為false，則監聽器方法返回false
????2.定義一些方法分別校驗各個表單項。
????3.給各個表單項綁定onblur事件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注冊頁面</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; /* 設置邊框圓角 */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 () {//調用用戶校驗方法 chekUsername();//調用密碼校驗方法 chekPassword();return checkUsername() && checkPassword();}//給用戶名和密碼框分別綁定離焦事件document.getElementById("username").onblur = checkUsername;document.getElementById("password").onblur = checkPassword;}//校驗用戶名function checkUsername() {//1.獲取用戶名的值var username = document.getElementById("username").value;//2.定義正則表達式var reg_username = /^\w{6,12}$/;//3.判斷值是否符合正則的規則var flag = reg_username.test(username);//4.提示信息var s_username = document.getElementById("s_username");if (flag) {//提示綠色對勾s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";} else {//提示紅色，用戶名有誤s_username.innerHTML = "用戶名格式有誤";}return flag;}//校驗密碼function checkPassword() {//1.獲取用戶名的值var password = document.getElementById("password").value;//2.定義正則表達式var reg_password = /^\w{6,12}$/;//3.判斷值是否符合正則的規則var flag = reg_password.test(password);//4.提示信息var s_password = document.getElementById("s_password");if (flag) {//提示綠色對勾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>新用戶注冊</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="請輸入用戶名"><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="請輸入密碼"><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="請輸入郵箱"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="請輸入姓名"></td></tr><tr><td class="td_left"><label for="tel">手機號</label></td><td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></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="請輸入出生日期"></td></tr><tr><td class="td_left"><label for="checkcode">驗證碼</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode"placeholder="請輸入驗證碼"><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="注冊"></td></tr></table></form></div></div><div class="rg_right"><p>已有賬號?<a href="#">立即登錄</a></p></div></div>
</body>
</html>
HTML DOM Text 對象
總結
以上是生活随笔為你收集整理的JavaScript学习笔记06【高级——JavaScript中的事件】的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
