|
1.this對象 this 是在函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)用來“指代函數(shù)調(diào)用者”的對象 this只能在函數(shù)內(nèi)部使用 2.event對象 當(dāng)DOM Tree中某個(gè)事件被觸發(fā)的時(shí)候，會(huì)同時(shí)自動(dòng)產(chǎn)生一個(gè)用來描述事件所有相關(guān)信息（如觸發(fā)事件的元素、事件類型等）的對象，這個(gè)對象就是event（事件對象） 獲取方式： ?、?nbsp;直接通過 event來獲取 ?、?nbsp;通過函數(shù)傳參數(shù)的形式來使用，一般使用形參“e或 eve”來代替 div.onclick=function (e) { console.log(e);}
div.onmousedown=function (eve) { console.log(eve);}
div.onmouseup=function () { console.log(event);}
3.event常用屬性 event對象中提供了一系列的屬性和方法用以獲取發(fā)生事件的相關(guān)信息 ① type， 用于獲取當(dāng)前事件的類型，為只讀屬性，依賴于事件的觸發(fā)而存在 語法：event .type； ② bubbles， 用于獲取當(dāng)前觸發(fā)的事件的類型是否支持 冒泡，如果支持則返回 true，否則返回 false 注意，bubbles屬性指的是該屬性是否支持冒泡，和事件的處理機(jī)制無關(guān)！ 語法：event .bubbles； ③ eventPhase， 用于獲取事件傳導(dǎo)至當(dāng)前節(jié)點(diǎn)時(shí)所處的狀態(tài)（用如下編號(hào)表示）： 1，代表事件處于捕獲狀態(tài) 2，代表事件處于真正的觸發(fā)者 3，代表事件處于冒泡狀態(tài) 語法：event .eventPhase； //返回值為只讀屬性 ?、?nbsp;target 和 currentTarget target，返回事件的真正觸發(fā)者（事件的觸發(fā)節(jié)點(diǎn)） currentTarget，返回事件的監(jiān)聽者（事件的綁定節(jié)點(diǎn)） 語法： event .target； event .currentTarget； <body>
<div class="div2" style="width: 500px;height: 600px;background-color: lightgreen;">div2
<div class="div1" style="width:200px;height:300px;background-color:#df5000;">div1</div>
</div>
<script>
var div1=document.querySelector('.div1');
var div2=document.querySelector('.div2');
// 冒泡機(jī)制
div1.onclick=function (e) {
console.log('div1:','狀態(tài)'+event.eventPhase,'觸發(fā)者',e.target.textContent,'監(jiān)聽者'+e.currentTarget.innerHTML,event.type);
};
div2.onclick=function (e) {
console.log('div2:','狀態(tài)'+event.eventPhase,'觸發(fā)者'+e.target.textContent,'監(jiān)聽者'+e.currentTarget,event.type);
};
document.body.onclick=function (e) {
console.log('body:','狀態(tài)'+event.eventPhase,'觸發(fā)者'+e.target.textContent,'監(jiān)聽者',e.currentTarget,event.type);
}
// 捕獲機(jī)制
div1.addEventListener('mouseup',function (e) {
console.log('div1:','狀態(tài)'+e.eventPhase,'觸發(fā)者'+e.target.textContent,'監(jiān)聽者'+e.currentTarget.textContent,e.type);
},true);
div2.addEventListener('mouseup',function (e) {
console.log('div2:','狀態(tài)'+e.eventPhase,'觸發(fā)者'+e.target.textContent,'監(jiān)聽者'+e.currentTarget,e.type);
},true);
document.body.addEventListener('mouseup',function (e) {
console.log('body:','狀態(tài)'+e.eventPhase,'觸發(fā)者'+e.target.textContent,'監(jiān)聽者',e.currentTarget,e.type);
},true);
</script>
</body>
4.event常用方法 ?、?nbsp;stopPropagation()， 該方法用于阻止事件從當(dāng)前節(jié)點(diǎn)傳播到下一個(gè)節(jié)點(diǎn) 語法：event .stopPropagation(); 注意，stopPropagation()方法雖然可以阻斷事件的傳播，但并不會(huì)影響同一節(jié)點(diǎn)上其他事件句柄！ ?、?nbsp;preventDefault()， 該方法用于取消當(dāng)前節(jié)點(diǎn)的默認(rèn)行為（比如超鏈接的點(diǎn)擊跳轉(zhuǎn)行為），該方法沒有返回值 語法：event .preventDefault(); ③ cancelable， 該屬性用于判斷當(dāng)前節(jié)點(diǎn)能否使用 preventDefault()方法來取消默認(rèn)行為，如果可以返回 true，否則返回 false 語法：event .cancelable; 5.圖片驗(yàn)證案例 <html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片驗(yàn)證</title>
<style>
.div1{
margin: 100px auto 0px;
width: 500px;
height: 500px;
background-image: url("Images/ButterflyPart1.jpg");
background-size: contain;
position: relative;
}
.div2{
width: 152px;
height: 138.6px;
background-image: url("Images/ButterflyPart2.jpg");
background-size: contain;
box-shadow: 1px 1px 2px 2px aqua;
position: absolute;
}
.freshBtn{
position: absolute;
bottom: 0;
right: 0;
color:darkgreen;
font-weight: bold;
letter-spacing: 2px;
background-color: rgba(90,35,20,.3);
outline: none;
}
</style>
</head>
<body>
<div class="div1" >
<div class="div2"></div>
<button class="freshBtn">重新驗(yàn)證</button>
</div>
<script>
var idtPic=document.querySelector('.div1');
var subPic=document.querySelector('.div2');
var freshBtn=document.querySelector('.freshBtn');
var flag=false;
var refresh=true;
subPic.onmousedown=function () {
if (refresh==true){
flag=true;
}
console.log(flag);
};
subPic.onmousemove=function (e) {
if (flag==true){
var moveLeft=e.clientX-533.5-76;
var moveTop=e.clientY-100-69.3;
console.log(moveLeft,moveTop);
switch (true){
case moveLeft<0:moveLeft=0;
break;
case moveLeft>348:moveLeft=348;
break;
case moveLeft>=0&&moveLeft<=348:subPic.style.left=moveLeft+'px';
break;
}
switch (true){
case moveTop<0:moveTop=0;
break;
case moveTop>361.7:moveTop=361.7;
break;
case moveTop>=0&&moveTop<=361.7:subPic.style.top=moveTop+'px';
break;
}
/* subPic.style.left=moveLeft+'px';
subPic.style.top=moveTop+'px';*/
}
if (moveLeft>80&&moveLeft<175&&moveTop>170&&moveTop<260){
subPic.style.boxShadow='0 0 0';
}else{
subPic.style.boxShadow='1px 1px 2px 2px aqua';
}
};
subPic.onmouseup=function () {
flag = false;
refresh=false;
subPic.style.boxShadow='1px 1px 2px 2px aqua';
var locationLeft=parseInt(subPic.style.left);
var locationTop=parseInt(subPic.style.top);
if (locationLeft>110&&locationLeft<150&&locationTop>200&&locationTop<235){
alert('驗(yàn)證通過！')
}else{
alert('驗(yàn)證失??！')
}
};
freshBtn.onclick=function () {
refresh=true;
};
</script>
</body>
</html>
?、?nbsp;設(shè)置元素移動(dòng)時(shí)的 Left和 Top值需使用“style”屬性， 語法：元素節(jié)點(diǎn) .style .left | top = ' 數(shù)值 '; 注意，style 屬性的值必須是“字符串形式”，因此通常使用例如 clientX+'px'這種形式進(jìn)行賦值 ?、?nbsp;將 字符串類型的數(shù)值 轉(zhuǎn)換為 數(shù)字形式的數(shù)值，使用 parseInt()方法 語法：parseInt(string，radix); 參數(shù)radix表示數(shù)字的基數(shù)（取值為 2~36之間），默認(rèn)為 10 parseInt()方法的特點(diǎn)： parseInt()方法用于解析一個(gè)字符串，并返回一個(gè)整數(shù)，示例：parseInt('12.34'); // 12 當(dāng)參數(shù) radix為 0、null、undefined時(shí)，parseInt()會(huì)根據(jù) string自動(dòng)判斷基數(shù)： 如果 string是以“0~9”的數(shù)字開頭，parseInt()將其解析為十進(jìn)制的整數(shù)，示例：parseInt('011'); // 11 如果 string是以“0x”開頭，parseInt()會(huì)將 string的其余部分解析為十六進(jìn)制的整數(shù)，示例：parseInt('0x10'); // 16 如果 string的開頭或結(jié)尾有空格，在轉(zhuǎn)換時(shí)會(huì)自動(dòng)被去除 在字符轉(zhuǎn)換過程中，是逐個(gè)字符一次轉(zhuǎn)換，遇到不能轉(zhuǎn)換為數(shù)字的字符時(shí)就會(huì)停止繼續(xù)轉(zhuǎn)換，返回已轉(zhuǎn)換好的部分 只有 string中的第一個(gè)數(shù)字會(huì)被返回（不是第一位數(shù)字），示例：parseInt('15e2'); // 15 如果 string的第一個(gè)字符不能轉(zhuǎn)換為數(shù)字，則 parseInt()會(huì)返回 NaN，示例：parseInt('.3'); // NaN 如果 string不是字符串（包括數(shù)字），則該方法會(huì)先將其轉(zhuǎn)換為字符串，然后再進(jìn)行數(shù)字轉(zhuǎn)換，示例：parseInt(12.3) 等同于 parseInt('12.3') ?、?nbsp;parseFloat()，將一個(gè)字符串轉(zhuǎn)換為浮點(diǎn)數(shù) 用法與 parseInt()類似，但 parseFloat()方法計(jì)算科學(xué)計(jì)數(shù)法符號(hào)（e） 另外，用于數(shù)字轉(zhuǎn)換的還有 Number()方法 6.IE環(huán)境中的Event事件 IE與非 IE中Event的區(qū)別： ?、?nbsp;非IE下的Event事件的默認(rèn)值為 undefined，而IE中 Event的默認(rèn)值為null ?、?nbsp;非 IE下可以隨意通過 DOM0或 DOM2中的參數(shù)來調(diào)用 event對象，而 IE中 DOM0級無法通過傳參的形式調(diào)用 event（DOM2可以） 由于 event本身歸屬于 window的一個(gè)屬性，因此，可以在函數(shù)中通過下面聲明方式解決 event對象的兼容性問題 語法：var eve = e || window .event; 示例：元素節(jié)點(diǎn) .onclick=function(eve){ var e = eve || window .event; // 在非IE環(huán)境下 e=eve，在IE下時(shí)為 window .event console .log(e); }; 7.IE中Event對象常用屬性 ?、?srcElement，代表事件的真正觸發(fā)者，等同于非 IE下的 target屬性 為了解決不同瀏覽器下獲取 target的兼容性問題，可以使用如下聲明方式： 語法：var target = eve .target || eve .srcElement; ?、?nbsp;cancelBubble，用于阻止事件在當(dāng)前節(jié)點(diǎn)上的冒泡行為，類似于非 IE下的 stopPropagation()方法 語法：event .cancelBubble = false;（默認(rèn)值） event .cancelBubble = true;（取消冒泡） 注意，stopPropagation表示阻斷事件傳遞，而 cancelBubble屬性則僅阻斷事件冒泡，對捕獲無效！ ?、?nbsp;returnValue，用于設(shè)置是否取消當(dāng)前節(jié)點(diǎn)的默認(rèn)行為，類似于非 IE下的 preventDefault()方法 語法：event .returnValue = false;（取消默認(rèn)行為） event .returnValue = true;（默認(rèn)值） ④ 阻斷冒泡和取消默認(rèn)行為，解決IE與非IE兼容性問題參考代碼 var Event={
stopBubble:function () {
if (event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
cancelDefault:function () {
if (event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
}
}
|
|
|
