事件
事件的三大要素
事件繫結物件
指的是,繫結事件和事件處理函式的標籤
這個標籤有可能不是觸發事件的標籤
事件型別
繫結的標籤的事件型別
滑鼠事件 表單事件 鍵盤事件 觸控事件 特殊事件
事件處理函式
觸發事件時執行的程式
一個標籤,往往相同的事件型別只能繫結一個事件處理函式
如果要繫結多個事件處理函式,需要使用事件監聽語法
滑鼠事件
<style>
div{
width: 200px;
height: 200px;
border:1px solid black;
}
span{
border: 1px solid green;
}
</style>
</head>
<body>
<div>我是div
<span>我是span標籤</span>
</div>
<script>
// 滑鼠事件
// 通過操作滑鼠,來觸發事件
var oDiv = document.querySelector('div');
// 1,左鍵單擊事件 click
oDiv.onclick = function(){
console.log('觸發的是滑鼠左鍵單擊事件');
}
// 2,左鍵雙擊事件 dblclick
// oDiv.ondblclick = function(){
// console.log('觸發的是滑鼠左鍵雙擊事件');
// }
// 3,右鍵單擊事件 contextmenu
// oDiv.oncontextmenu = function(){
// console.log('觸發的是滑鼠右鍵事件');
// }
// 4,滑鼠按鍵按下事件 mousedown
// 當滑鼠按下時,觸發事件
// 滑鼠的點選事件是 兩個動作完成的
// 一個是滑鼠按下,一個是滑鼠抬起
// 如果只有按下動作,只會觸發 mousedown
// 抬起時,完成一個完整的點選效果,才會觸發 click
// oDiv.onmousedown = function(){
// console.log('滑鼠按下了');
// }
// 5,滑鼠按鍵抬起事件 mouseup
// 當滑鼠抬起時,觸發事件
// oDiv.onmouseup = function(){
// console.log('滑鼠抬起來了');
// }
// 總結:
// 1,滑鼠點選事件,分為兩部分完成
// 滑鼠按下 滑鼠抬起
// 2,只操作滑鼠按下,只會觸發滑鼠按下事件
// 3,只操作滑鼠抬起,只會觸發滑鼠抬起事件
// 4,兩個操作都完成後,才會觸發滑鼠點選事件
// 5,滑鼠按下抬起,不區分左鍵右鍵
// 6,滑鼠移入事件
// 經過標籤邊界線的時候觸發
// mouseover mouseenter
// 經過子級會觸發
oDiv.onmouseover = function(){
console.log('我進來了1111');
}
// 經過子級不觸發
oDiv.onmouseenter = function(){
console.log('我進來了2222');
}
// 7,滑鼠移出事件
// 經過標籤邊界線的時候觸發
// mouseout mouseleave
// 經過子級會觸發
oDiv.onmouseout = function(){
console.log('我出去了1111');
}
// 經過子級不會觸發
oDiv.onmouseleave = function(){
console.log('我出去了2222');
}
// 總結:
// 1,滑鼠移出,移出事件,只有經過標籤邊界線時觸發
// 在標籤內部時,不會觸發
// 2,mouseover mouseout
// 經過當前標籤邊界線時會觸發
// 經過子級標籤邊界線時也會觸發
// 3,mouseenter mouseleave
// 只有經過當前標籤時會觸發
// 經過子級標籤時,不會觸發
// 8,mousemove 滑鼠移動
// 滑鼠在標籤範圍內移動,會觸發事件
// 效果類似於 :hover
oDiv.onmousemove = function(){
console.log('我動來動去');
}
</script>
表單事件
<body>
<form action="./01_複習.html">
賬號 : <input type="text"><br>
<button>提交</button>
</form>
<script>
// 表單事件
// 與form表單相關的事件
var oIpt = document.querySelector('input');
var oForm = document.querySelector('form');
// 1, focus 標籤獲取焦點事件
// 所謂的滑鼠檢點,就是滑鼠點選的物件是當前標籤
oIpt.onfocus = function(){
console.log('我被點選了,我獲取了焦點');
}
// 2, change 標籤失去焦點,並且資料改變,觸發事件
// 觸發事件有兩個條件
// 1,標籤失去焦點 --- 焦點在其他標籤上
// 2,標籤的資料,發生改變
oIpt.onchange = function(){
console.log('我失去焦點了,而且我被改變了')
}
// 3, input 標籤輸入內容時,觸發事件
oIpt.oninput = function(){
console.log('我被輸入資料了')
}
// 4, submit 表單提交事件
// 繫結給form表單標籤
// 可以阻止提交表單
// 多用於,提交資料時,做判斷操作
// 如果資料不符合要求,就阻止表單提交
oForm.onsubmit = function(e){
// 阻止表單提交,後面詳細講
e.preventDefault();
window.alert('您輸入的資料有誤')
}
</script>
from表單
<body>
<form action="./01_複習.html">
註冊賬號: <input type="text" name="us" placeholder="請你您輸入賬號,8-16位"><span name="username"></span><br>
註冊密碼: <input type="password" placeholder="請你您輸入密碼,8-16位"><br>
重複密碼: <input type="password" placeholder="二次輸密碼,與密碼一致"><br>
驗 證 碼 : <input type="text" placeholder="請你您二次驗證碼"> <br>
<span name="vc"></span><button type="button" name="reset">看不清重新整理</button><br>
<button>提交</button>
</form>
<script>
// 簡單的form表單驗證demo
// 1,要獲取生成,驗證碼
// 實際專案中,往往是與第三方機構獲取驗證碼
// 目前本地生成一個隨機的6位驗證碼
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCEDEFGHIJKLMNOPQRSTUVWXYZ';
var oVc = document.querySelector('[name="vc"]');
oVc.innerHTML = setVc(str);
var oBtnReset = document.querySelector('[name="reset"]');
oBtnReset.onclick = function(){
oVc.innerHTML = setVc(str);
}
// 2,當標籤獲取焦點時,給標籤後,輸入提示資訊
// 標籤要在不同的事件中獲取資料,不能直接獲取資料
// 一般是先獲取標籤物件,然後在事件執行的時候,獲取 標籤物件.value資料
// 當輸入賬號標籤獲取焦點時
var oIptUserName = document.querySelector('[name="us"]');
var oSpanUserName = document.querySelector('[name="username"]');
// 獲取焦點,在span標籤中輸入提示
oIptUserName.onfocus = function(){
oSpanUserName.innerHTML = '請您輸入賬號,不能為空,長度是8-16位';
oSpanUserName.style.color = 'black';
}
// 輸入資料,在span標籤中輸入提示
oIptUserName.oninput = function(){
// 1,獲取input標籤資料的資料,length屬性就是輸入的資料長度
var usernameValue = oIptUserName.value;
oSpanUserName.innerHTML = `您當前輸入${usernameValue.length}個字元,最多輸入16位字元,您還是可以輸入${16-usernameValue.length}個字元`;
oSpanUserName.style.color = 'black';
}
// 當失去焦點時,判斷,輸入的資料,是否符合規範
// 目前就判斷資料的長度是8-16為字元
oIptUserName.onchange = function(){
// 驗證資料長度在8-16位之間
var usernameValue = oIptUserName.value;
// 當賬號長度在8-16位之間時,輸入賬號符合規範的提示資訊
if( usernameValue.length >= 8 && usernameValue.length <= 16 ){
oSpanUserName.innerHTML = '您輸入的賬號符合規範';
oSpanUserName.style.color = 'black';
// 當賬號長度不在8-16位之間時,輸入賬號不符合規範的提示資訊
}else{
oSpanUserName.innerHTML = '您輸入的賬號不符合規範';
oSpanUserName.style.color = 'red';
}
}
// 其他輸入框的驗證,自己補全
// 愛怎麼寫怎麼寫,能有提示內容和效果就可以
// 當點選提交按鈕時,進行資料驗證
// 資料必須符合規範,才能執行提交表單效果
// 否則會阻止表單提交
var oForm = document.querySelector('form');
// 提交事件,要阻止調教,引數必須有一個e
oForm.onsubmit = function(e){
// 1,輸入內容不能為空
// 如果輸入內容是空字串,就在對應項輸入提示,並且組織表單提交,終止程式
var usernameValue = oIptUserName.value;
// 如果賬號資料為空
if( usernameValue === '' ){
// 阻止表單提交
e.preventDefault();
oSpanUserName.innerHTML = '您輸入的賬號,不能為空';
oSpanUserName.style.color = 'red';
return;
}
// 其他的為空判斷,自己來補充完整
// 驗證資料長度
if( !( usernameValue.length >= 8 && usernameValue.length <= 16 ) ){
e.preventDefault();
oSpanUserName.innerHTML = '您輸入的賬號,不符合長度規範,請輸入8-16位賬號';
oSpanUserName.style.color = 'red';
return;
}
// 其他的長度判斷,自己來補充完整
// 密碼和二次輸入密碼,資料必須完全一致
// ===
// 輸入的驗證碼資料,必須與生成的驗證碼內容,完全一致
// ===
// 如果之前所有的if判斷,都沒有被執行
// 證明輸入的賬號,密碼符合規範
// 才能正確提交資料
}
function setVc(str) {
var vc = '';
while (vc.length < 6) {
var num = parseInt(Math.random() * str.length);
if (vc.indexOf(str[num]) === -1) {
vc += str[num];
}
}
return vc;
}
</script>