第1章 事件流
1-1.事件冒泡:事件最開始由最具體的元素(文檔中嵌套層次最深的那個節(jié)點(diǎn))接收;
然后逐級向上傳播至最不具體的那個節(jié)點(diǎn)(文檔);
1-2.事件捕獲:不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件,而最具體的節(jié)點(diǎn)最后接收到事件;
第2章 事件處理程序
2-1 HTML事件處理程序
//缺點(diǎn):HTML和JS代碼緊密的耦合在一起;
1
<input type="button" value="按鈕" onclick="showMessage()">
2-2 DOM0級事件處理程序
//較傳統(tǒng)的方式:把一個函數(shù)賦值給一個事件的處理程序?qū)傩?用的比較多;
//優(yōu)點(diǎn):簡單/跨瀏覽器;
<input type="button" value="按鈕" id="btn2">
<script>
var btn2 = document.getElementById('btn2'); //取得btn2按鈕對象;
btn2.onclick = function () { //給btn2添加onclick屬性;
alert('這是通過DOM0級添加的事件!');
}
btn2.onclick=null; //刪除onclick屬性;
</script>
2-3 DOM2級事件處理程序
//DOM2級事件定義了兩個方法:用于處理指定和刪除事件處理程序的操作;
//addEventListener()和removeEventListner();
//接收三個參數(shù):要處理的事件名/事件處理函數(shù)和布爾值;
//在IE8一下,不起作用;
<input type="button" value="按鈕" id="btn3">
<script>
var btn3 = document.getElementById('btn3');
btn3.addEventListener('click',showMessage,false); //添加事件程序;
btn3.addEventListener('click',function(){ //添加多個事件程序;
alert(this.value);
},false);
btn3.removeEventListener('click',showMessage,false); //刪除事件程序;
</script>
2-4 IE事件處理程序及跨瀏覽器
//接收兩個參數(shù):事件處理函數(shù)名稱和事件處理函數(shù)
<script>
var btn3 = document.getElementById('btn3');
btn3.attachEvent('onclick',showMessage); //添加事件;
btn3.detachEvent('onclick',showMessage); //刪除事件;
</script>
>2.瀏覽器兼容
//將添加和刪除事件處理程序封裝到對象中并賦值給變量'eventUtil';
var eventUtil = {
//添加句柄
addHandler:function(element,type,handler){
//判斷DOM2級事件處理程序;
if(element.addEventListener){
element.addEventListener(type,handler,false);
//判斷IE瀏覽器;
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
//使用DOM0級事件處理程序;
}else{
element['on'+type] = handler;
}
};
//刪除句柄
removeHandler:function(element,type,handler){
//判斷DOM2級事件處理程序;
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
//判斷IE瀏覽器;
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
//使用DOM0級事件處理程序;
}else{
element['on'+type] = null;
};
};
};
//跨瀏覽器添加事件處理程序;
eventUtil.addHandler(btn3,'click',showMessage);
第3章 事件對象
3-1 DOM中的事件對象
//在觸發(fā)DOM上的事件時都會產(chǎn)生一個對象==event;
>1.type == 獲取事件類型;
>2.target == 獲取事件目標(biāo);
>3.stopPropagation() == 停止事件冒泡;
>4.preventDefault() == 阻止事件的默認(rèn)行為;
function showMes(event){
alert(event.type); //onclick;點(diǎn)擊事件;
alert(event.target.nodeName); //INPUT;input按鈕被觸發(fā);
event.stopPropagation(); //停止事件冒泡;
}
<a href="event.html" onclick="stopGoto();">跳轉(zhuǎn)</a>
function stopGoto(event){
event.preventDefault(); //阻止默認(rèn)行為;
}
3-2 IE中的事件對象
>1.type == 同上;
>2.srcElement屬性 == 獲取事件目標(biāo);
>3.cancleBubble屬性 == 阻止冒泡;設(shè)置true表示阻止冒泡,false為不組織冒泡;
>4.returnValue屬性 == 用于阻止事件的默認(rèn)行為;
function showMes(event){
//非IE用event,IE8以下用window.event;
event = event || window.event;
//事件目標(biāo)兼容;
var ele = event.target || event.srcElement;
//兼容阻止事件冒泡;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancleBubble();
};
//兼容取消事件默認(rèn)行為;
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
第4章 QQ面板拖拽效果
>1.封裝獲取Class方法
function getClass(clsName,parent){
var oParent = parent?document.getElementById(parent):document,
eles = [],
elements = oParent.getElementsByTagName('*');
for (var i=0,l=elements.length; i<l; i++){
if(elements[i].className == clsName){
eles.push(elements[i]);
}
}
return eles;
}
>2.封裝拖拽函數(shù)
window.onload = drag;
function drag(){
var oTitle = getClass('login_logo_webqq','loginPanel')[0];
//拖拽
oTitle.onmousedown = fnDown;
//關(guān)閉彈窗
var oClose = document.getElementById('ui_boxyClose');
oClose.onclick = function(){
document.getElementById('loginPanel').style.display = 'none';
}
//切換狀態(tài)
var loginState = document.getElementById('loginstate'),
stateList = document.getElementById('loginStatePanel'),
lis = stateList.getElementsByTagName('li'),
stateTxt = document.getElementById('login2qq_state_txt'),
loginStateShow = document.getElementById('login-state_show');
loginState.onclick = function(e){
//阻止冒泡到document使ul隱藏;
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}esle{
e.cancleBubble = true;
}
stateList.style.display = "block";
}
//鼠標(biāo)滑過/離開和點(diǎn)擊狀態(tài)列表時
for(var i=0,i<lis.length,i++){
lis[i].onmouseover = function(){
this.style.background = "#567";
}
lis[i].onmouseout = function(){
this.style.background = "#fff";
}
lis[i].onclick = function(e){
//阻止冒泡到loginState使stateList顯示;
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}esle{
e.cancleBubble = true;
}
var id = this.id;
stateList.style.display = "none";
stateTxt.innerHTML = getClass('stateSelect_text',id)[0].innerHTML;
loginStateShow.className = '';
loginStateShow.className = 'login-state-show '+id;
}
}
document.onclick = function(){
stateList.style.display = "none";
}
}
//鼠標(biāo)按下事件;
function fnDown(event){
event = event || window.event;
var oDrag = document.getElementById('loginPanel'),
//鼠標(biāo)按下時,鼠標(biāo)和面板之間的距離;
disX = event.clientX - oDrag.offsetLeft,
disY = event.clientY - oDrag.offsetTop;
//移動
document.onmouseover = function(event){
event = event || window.event;
fnMove(event,disX,disY);
}
//釋放鼠標(biāo)
document.onmouseup = function(){
document.onmouseover = null;
document.onmouseup = null;
}
}
//鼠標(biāo)移動事件;
function fnMove (e,posX,posY){
var oDrag = document.getElementById('loginPanel'),
l = e.clientX-posX,
t = e.clientY-posY,
winW = document.documentElement.clientWidth || document.body.clientWidth,
winH = document.documentElement.clientHeight || document.body.clientHeight;
maxW = winW-oDrag.offsetWidth,
maxH = winH-oDrag.offsetHeight;
if(l<0){
l = 0;
}else if(l>maxW){
l = maxW;
}
if(t<0){
t = 0;
}else if(t>maxH){
t=maxH;
}
oDrag.style.left = l+'px';
oDrag.style.top = t+'px';
}
第4章 抽獎系統(tǒng)
>1.鍵盤事件
>>1.keyDown:當(dāng)用戶按下鍵盤上的任意鍵時觸發(fā),而且如果按住不放的話,會重復(fù)觸發(fā)此事件;
>>2.keyPress:當(dāng)用戶按下鍵盤上的字符鍵時觸發(fā),而且如果按住不放的話,會重復(fù)觸發(fā)此事件;
>>3.keyUp:當(dāng)用戶釋放鍵盤上的鍵時觸發(fā);
>2.抽獎程序
var data = ['iPhone5','iPad','三星電腦','謝謝參與'],
timer = null,
flag = 0;
window.onload = function(){
var play = document.getElementById('play'),
stop = document.getElementById('stop');
//(鼠標(biāo))開始抽獎
play.onclick = palyFun;
stop.onclick = stopFun;
//(鍵盤Enter)開始抽獎
document.onkeyup = function(event){
event = event || window.event;
if(event.keyCode == 13){
if(flag == 0){
palyFun();
flag = 1;
}else{
stopFun();
flag = 0;
}
}
}
}
function palyFun(){
var title = document.getElementById('title'),
play = document.getElementById('play');
//清除之前的定時器,放置定時器重復(fù);
clearInterval(timer);
//設(shè)置定時器;
timer = setInterval(function(){
//隨機(jī)數(shù)*數(shù)組元素個數(shù)=數(shù)組隨機(jī)索引;
var random = Math.floor(Math.random()*data.length);
title.innerHTML = data[random];
},50);
play.style.background = "#999";
}
function stopFun(){
clearInterval(timer);
var paly = document.getElementById('play');
paly.style.background = '#036';
}