|
1.文檔事件 主要是指添加給整個文檔的事件，文檔事件中，絕大部分不需要用戶觸發(fā)調(diào)用，而是通過文檔的不同狀態(tài)進行自動執(zhí)行 主要事件： ?、?nbsp;load / error，加載成功/失敗事件 ?、?nbsp;DOMContentLoaded，當DOM加載完成時觸發(fā)事件 ③ beforeunload，頁面（文檔）發(fā)生卸載時觸發(fā)事件 ④ readystatechange，文檔加載狀態(tài)判斷事件 ?、?nbsp;resize，文檔大小發(fā)生改變時的回調(diào)事件 2.load / error load事件在節(jié)點加載成功時自動觸發(fā) error時間在節(jié)點加載失敗時自動觸發(fā) 語法：元素/文檔（node）.onload / onerror = function(){ }; <body>
<img src="Images/Model.jpg" alt="">
<script>
var img=document.querySelector('img');
img.onload=function () {
console.log('圖片加載成功！');
}
img.onerror=function () {
console.log('圖片加載Failed！');
}
</script>
3.DOMContentLoaded 與 load事件的區(qū)別是觸發(fā)時機不一樣，先觸發(fā)DOMContentLoaded事件，后觸發(fā) load事件 DOM文檔加載的步驟： ?、?nbsp;解析HTML結(jié)構(gòu) ?、?nbsp;加載外部腳本和樣式表文件 ③ 解析并執(zhí)行腳本代碼 ?、?DOM樹構(gòu)建完成 ——?觸發(fā)DOMContentLoaded事件執(zhí)行 ⑤ 加載圖片等外部文件 ?、?nbsp;頁面加載完成 ——?觸發(fā)load事件執(zhí)行 由此看出，樣式文件的加載會阻塞腳本執(zhí)行 即，如果把一個內(nèi)部腳本 <script>元素放在了一個 <link>后面，在頁面沒有完成解析時腳本不會觸發(fā)執(zhí)行，直至樣式文件加載完成之后。 注意，DOMContentLoaded事件只能使用DOM2方式綁定，不存在DOM0綁定方式！ 4.beforeunload 頁面發(fā)生卸載時觸發(fā)事件（頁面刷新和關(guān)閉頁面之前），通常情況下配合 event .returnValue使用 一般情況下都是直接添加到body上面，如果沒有在body上添加本事件，則需要在 window上添加 語法示例：window .onbeforeunload=function(){ event .returnValue=''; return'信息已修改是否確認離開？' }; 注意，beforeunload事件中彈出的對話框一般情況下不允許用戶修改，只能采用默認對話框，且在beforeunload關(guān)聯(lián)的回調(diào)函數(shù)中也不支持alert彈出框 5.readystatechange 當 document的 readyState改變時觸發(fā)這個事件（僅第二階段） document .readyState的三個屬性值： loading，加載DOM中 interactive，加載外部資源 complete，加載完成 而 readystatechange事件正是這個狀態(tài)發(fā)生改變時調(diào)用的事件 調(diào)用方式可以是 DOM0級事件，也可以是DOM2級事件 6.事件測試 <html lang="en">
<head>
<meta charset="UTF-8">
<title>文檔事件</title>
<style>
img{ width: 300px; }
</style>
</head>
<body>
<img src="Images/Model.jpg" alt="">
<script>
var img=document.querySelector('img');
img.onload=function () {
console.log('圖片加載成功！');
}
img.onerror=function () {
console.log('圖片加載Failed！');
}
console.log('頁面加載狀態(tài)：'+document.readyState);
document.addEventListener('readystatechange',function () {
console.log('頁面加載狀態(tài)變化：'+document.readyState);
});
document.addEventListener('DOMContentLoaded',function () {
console.log('文檔DOM樹構(gòu)建完成');
});
window.onload=function () {
console.log('瀏覽器窗口加載完成！')
}
</script>
</body>
</html>
7.resize 瀏覽器窗口變化事件 <script>
window.onresize=function(){
console.log('width:'+document.documentElement.clientWidth);
console.log('height:'+document.documentElement.clientHeight);
}
</script>
js中為了追求變化的敏感度，將 resize事件的響應(yīng)時間設(shè)置為了0，也就是說每一次的文檔大小改變都會立即調(diào)用本事件 這就造成了 一次變化 卻發(fā)生了 不止一次 的resize事件調(diào)用 為了解決這個問題可以采用一種延遲的寫法來實現(xiàn)。代碼如下： <script>
var flag=true
window.onresize=function(){
var w=document.documentElement.clientWidth;
var h=document.documentElement.clientHeight;
if (flag==true){
console.log('(w,h):('+w+','+h+')');
flag=false;
setTimeout(function () {
flag=true;
},1000);
}
}
</script>
8.焦點事件 在js中當前正在和用戶發(fā)生交互的節(jié)點稱為焦點，包括獲取焦點（focus）和失去焦點（blur）兩種情況 獲取焦點和失去焦點都既可以使用DOM0綁定也可以使用DOM2綁定，自動觸發(fā)事件執(zhí)行 語法：元素節(jié)點 .onfocus / onblur = function(){ }; 注意，這兩種事件均不支持事件冒泡，只有當前節(jié)點觸發(fā)調(diào)用 如果需要傳遞觸發(fā)，則需要使用DOM2綁定事件中的捕獲方式 事件本身的書寫格式：元素節(jié)點 .focus() / blur(); ，（方法）代表獲取焦點 / 失去焦點 <body>
Name:<input type="text" class="name">
Code:<input type="text" class="code">
<script>
var code=document.querySelector('.code');
code.onfocus=function(){
code.setAttribute('placeholder','請設(shè)置6位數(shù)密碼！');
};
code.onblur=function(){
if (code.length!==6){
code.setAttribute('style','border:1px solid red');
alert('密碼格式不符合要求，請重新設(shè)置。'); //先于setAttrbute執(zhí)行
};
};
</script>
</body>
9.用戶注冊界面 <html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶注冊界面</title>
<style>
input{
display: inline-block;
outline: none;
height: 20px;
line-height: 30px;
}
.boxName{
display: inline-block;
padding: 0;
width: 80px;
}
.submit{
display: inline-block;
margin-left: 60px;
}
.borderGreen{
border: 2px solid darkgreen;
}
.fontGreen{
color: darkgreen;
font-weight: bold;
}
.borderRed{
border: 2px solid red;
}
.fontRed{
color: red;
}
.idtCodePic{
width: 177px;
height: 50px;
line-height: 50px;
text-align: center;
/*word-spacing: 20px; 對字符無效*/
letter-spacing: 10px;
background-image: url("Images/idtCodePic.jpg");
margin-left: 85px;
font-size: 30px;
}
.idtCodePic:hover{
cursor: pointer;
}
</style>
</head>
<body>
<p>
<span class="boxName">用戶名:</span>
<input type="text" class="userName">
<span class="nameTips"></span>
</p>
<p>
<span class="boxName">手機號碼:</span>
<input type="text" class="phoneNumber"/>
<span class="phoneTips"></span>
</p>
<p>
<span class="boxName">登錄密碼:</span>
<input type="text" class="loginCode">
<span class="loginTips"></span>
</p>
<p>
<span class="boxName">確認密碼：</span>
<input type="text" class="confirmCode"/>
<span class="confirmTips"></span>
</p>
<span style="font-size: 12px;color: #b3d4fc;float: left;
width: 25px;height: 50px;margin-left: 50px">點擊圖片切換</span>
<div class="idtCodePic"></div>
<p>
<span class="boxName">驗證碼：</span>
<input type="text" class="idtCode"/>
<span class="idtTips"></span>
</p>
<button class="submit" disabled>提交注冊</button>
<script>
var userName=document.querySelector('.userName'); //name不能作為變量聲明！
var nameTips=document.querySelector('.nameTips');
var phoneNumber=document.querySelector('.phoneNumber');
var phoneTips=document.querySelector('.phoneTips');
var loginCode=document.querySelector('.loginCode');
var loginTips=document.querySelector('.loginTips');
var confirmCode=document.querySelector('.confirmCode');
var confirmTips=document.querySelector('.confirmTips');
var idtCodePic=document.querySelector('.idtCodePic');
var idtCode=document.querySelector('.idtCode');
var idtTips=document.querySelector('.idtTips');
var submit=document.querySelector('.submit');
// 用戶名內(nèi)容設(shè)置
userName.onfocus=function(){
userName.setAttribute('placeholder','不少于兩位字符！');
};
userName.onblur=function(){
if (userName.value.length>=3){
nameTips.innerHTML='通過';
nameTips.setAttribute('class','fontGreen');
userName.setAttribute('class','borderGreen');
}else{
nameTips.innerHTML='格式不符合要求，請重新填寫';
nameTips.setAttribute('class','fontRed');
userName.setAttribute('class','borderRed');
}
checkAllInfo();
};
// 手機號碼內(nèi)容設(shè)置
phoneNumber.onfocus=function(){
phoneNumber.setAttribute('placeholder','請?zhí)顚?1位手機號碼！');
};
phoneNumber.onblur=function(){
if (phoneNumber.value.length==11&&phoneNumber.value[0]==1){
phoneTips.innerHTML='通過';
phoneTips.setAttribute('class','fontGreen');
phoneNumber.setAttribute('class','borderGreen');
}else{
phoneTips.innerHTML='格式不符合要求，請重新填寫';
phoneTips.setAttribute('class','fontRed');
phoneNumber.setAttribute('class','borderRed');
}
checkAllInfo();
};
// 登錄密碼內(nèi)容設(shè)置
loginCode.onfocus=function(){
loginCode.setAttribute('placeholder','請設(shè)置6~12位數(shù)字或字母！');
};
loginCode.onblur=function(){
if (loginCode.value.length>=6&&loginCode.value.length<=12){
loginCode.setAttribute('class','borderGreen');
loginTips.innerHTML='通過';
loginTips.setAttribute('class','fontGreen');
}else{
loginCode.setAttribute('class','borderRed');
loginTips.innerHTML='密碼格式不符合要求，請重新設(shè)置';
loginTips.setAttribute('class','fontRed');
}
checkAllInfo();
};
// 確認密碼內(nèi)容設(shè)置
confirmCode.onfocus=function(){
confirmCode.setAttribute('placeholder','請確認上述密碼！');
};
confirmCode.onblur=function(){
if (confirmCode.value==loginCode.value&&confirmCode.value!=''){
confirmCode.setAttribute('class','borderGreen');
confirmTips.innerHTML='通過';
confirmTips.setAttribute('class','fontGreen');
}else{
confirmCode.setAttribute('class','borderRed');
confirmTips.innerHTML='密碼不符合要求，請重新確認';
confirmTips.setAttribute('class','fontRed');
}
checkAllInfo();
};
// 驗證碼圖片內(nèi)容設(shè)置
function creatIdtCode() {
var idtCodeSet='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var maxNum=idtCodeSet.length;
var idtCodeVal='';
for (var i=0;i<5;i++){
var index=Math.floor(Math.random()*maxNum);
var idtCodeTemp=idtCodeSet[index];
idtCodeVal+=idtCodeTemp;
}
return idtCodeVal;
}
idtCodePic.innerHTML=creatIdtCode();
idtCodePic.onclick=function(){
var newIdtCode=creatIdtCode();
console.log(newIdtCode);
idtCodePic.innerHTML=newIdtCode;
};
idtCodePic.setAttribute('letter-spacing','20px'); //此處設(shè)置無效！！
// 驗證碼內(nèi)容設(shè)置
idtCode.onfocus=function(){
idtCode.setAttribute('placeholder','請輸入上述圖片內(nèi)驗證碼！');
};
idtCode.onblur=function(){
if (idtCode.value==idtCodePic.innerHTML){
idtCode.setAttribute('class','borderGreen');
idtTips.innerHTML='通過';
idtTips.setAttribute('class','fontGreen');
}else{
idtCode.setAttribute('class','borderRed');
idtTips.innerHTML='驗證碼錯誤，請重新填寫';
idtTips.setAttribute('class','fontRed');
}
checkAllInfo();
};
// 提交注冊按鈕設(shè)置
function checkAllInfo(){
if (nameTips.innerHTML=='通過'&&phoneTips.innerHTML=='通過'&&loginTips.innerHTML=='通過'
&&confirmTips.innerHTML=='通過'&&idtTips.innerHTML=='通過'){
submit.removeAttribute('disabled');
}else {
submit.setAttribute('disabled','disabled');
}
}
</script>
</body>
</html>
10.滾動事件 scroll事件會在文檔或元素發(fā)生滾動操作時觸發(fā) ?、?文檔滾動事件 scrollTop，表示滾動條上下滾動的距離 scrollLeft，表示滾動條左右滾動的距離 注意，scrollTop和 ScrollLeft 距離沒有計量單位，實際上是文檔滾動的距離 兩個屬性不但可以讀取，還可以賦值！書寫格式：body節(jié)點 .scrollTop/.scrollLeft=value； 語法：IE環(huán)境，document .documentElement .scrollTop/.scrollLeft； 非IE環(huán)境，document .body .scrollTop/.scrollLeft； 為解決兼容性問題，在使用時可以采用“||”（或）的方式： document .body .scrollTop/.scrollLeft || document .documentElement .scrollTop/.scrollLeft； ?、?nbsp;元素滾動事件 元素發(fā)生滾動時，不存在兼容性問題，但前提是，必須存在滾動條 元素的滾動條可以通過 overflow相關(guān)屬性實現(xiàn) overflow屬性值： visible，默認值，溢出內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外 hidden，溢出內(nèi)容會被修剪，且不可見 auto，如果溢出內(nèi)容被修剪，瀏覽器會顯示滾動條以便查看 scroll，瀏覽器會顯示滾動條，以便查看溢出內(nèi)容 overflow-x和 overflow-y屬性使用方法與overflow基本相同 語法：元素節(jié)點 .scrollTop / scrollLeft； 注意，可以獲取元素位移距離，也可以寫入，書寫格式：元素節(jié)點 .scrollTop/.scrollLeft=value； 11.滾動事件代碼 <html lang="en">
<head>
<meta charset="UTF-8">
<title>滾動事件</title>
<style>
body{
width: 3000px;
height: 5000px;
background: linear-gradient(to bottom,lightblue,darkorange);
}
div{
width: 300px;
height: 200px;
margin-left: 100px;
background-color: lightpink;
overflow-y: auto;
}
.divBtn{
margin-left: 100px;
}
.bodyBtn{
position: fixed;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<div>
<p>下周就開學了。</p>
<p>下周就開學了。</p>
<p>下周就開學了。</p>
<p>下周就開學了。</p>
<p>下周就開學了。</p>
<p>下周就開學了。</p>
<p>下周就開學了。</p>
<p>下周就開學了。</p>
<p>下周就開學了。</p>
<p>下周就開學了。</p>
<p>下周就開學了。</p>
</div>
<button class="divBtn">滾回首行</button>
<button class="bodyBtn">返回頂部</button>
<script>
var divBox=document.querySelector('div');
var divBtn=document.querySelector('.divBtn');
var bodyBtn=document.querySelector('.bodyBtn');
window.onscroll=function () {
var top=document.body.scrollTop || document.documentElement.scrollTop;
var left=document.body.scrollLeft || document.documentElement.scrollLeft;
console.log('Top:'+top+','+'Left:'+left);
}
// 文檔頁面滾動事件設(shè)置
bodyBtn.onclick=function(){
var bodyScrollBack=null;
console.log(bodyBtn.firstChild.nodeValue);
// 添加返回頂部速度效果
bodyScrollBack=setInterval(function () {
var top=document.body.scrollTop || document.documentElement.scrollTop;
top = top-100;
if (top<=0){
top = 0;
clearInterval(bodyScrollBack);
}
document.body.scrollTop=top;
document.documentElement.scrollTop=top; //Chrome環(huán)境下也要設(shè)置這一句！
},50);
};
// 元素內(nèi)容滾動事件設(shè)置
divBtn.onclick=function(){
var divScrollBack=null;
divScrollBack=setInterval(function () {
var top=divBox.scrollTop;
top = top-10;
if (top<=0){
top = 0;
clearInterval(divScrollBack);
}
divBox.scrollTop=top;
},50);
}
</script>
</body>
</html>
|
|
|
