第1章 事件流

1-1.事件冒泡:事件最開始由最具體的元素(文檔中嵌套層次最深的那個節(jié)點)接收;

然后逐級向上傳播至最不具體的那個節(jié)點(文檔);

1-2.事件捕獲:不太具體的節(jié)點應(yīng)該更早接收到事件,而最具體的節(jié)點最后接收到事件;

第2章 事件處理程序

2-1 HTML事件處理程序

//缺點:HTML和JS代碼緊密的耦合在一起;

1

<input type="button" value="按鈕" onclick="showMessage()">

2-2 DOM0級事件處理程序

//較傳統(tǒng)的方式:把一個函數(shù)賦值給一個事件的處理程序?qū)傩?用的比較多;

//優(yōu)點:簡單/跨瀏覽器;

<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 == 獲取事件目標;

>3.stopPropagation() == 停止事件冒泡;

>4.preventDefault() == 阻止事件的默認行為;

function showMes(event){

alert(event.type); //onclick;點擊事件;

alert(event.target.nodeName); 　　//INPUT;input按鈕被觸發(fā);

event.stopPropagation(); //停止事件冒泡;

}

<a href="event.html" onclick="stopGoto();">跳轉(zhuǎn)</a>

function stopGoto(event){

event.preventDefault();　　　　　　　//阻止默認行為;

}

3-2 IE中的事件對象

>1.type == 同上;

>2.srcElement屬性 == 獲取事件目標;

>3.cancleBubble屬性 == 阻止冒泡;設(shè)置true表示阻止冒泡,false為不組織冒泡;

>4.returnValue屬性 == 用于阻止事件的默認行為;

function showMes(event){

//非IE用event,IE8以下用window.event;

event = event || window.event;

//事件目標兼容;

var ele = event.target || event.srcElement;

//兼容阻止事件冒泡;

if(event.stopPropagation){

event.stopPropagation();

}else{

event.cancleBubble();

};

//兼容取消事件默認行為;

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";

}

//鼠標滑過/離開和點擊狀態(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";

}

}

//鼠標按下事件;

function fnDown(event){

event = event || window.event;

var oDrag = document.getElementById('loginPanel'),

//鼠標按下時,鼠標和面板之間的距離;

disX = event.clientX - oDrag.offsetLeft,

disY = event.clientY - oDrag.offsetTop;

//移動

document.onmouseover = function(event){

event = event || window.event;

fnMove(event,disX,disY);

}

//釋放鼠標

document.onmouseup = function(){

document.onmouseover = null;

document.onmouseup = null;

}

}

//鼠標移動事件;

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:當用戶按下鍵盤上的任意鍵時觸發(fā),而且如果按住不放的話,會重復觸發(fā)此事件;

>>2.keyPress:當用戶按下鍵盤上的字符鍵時觸發(fā),而且如果按住不放的話,會重復觸發(fā)此事件;

>>3.keyUp:當用戶釋放鍵盤上的鍵時觸發(fā);

>2.抽獎程序

var data = ['iPhone5','iPad','三星電腦','謝謝參與'],

timer = null,

flag = 0;

window.onload = function(){

var play = document.getElementById('play'),

stop = document.getElementById('stop');

//(鼠標)開始抽獎

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');

//清除之前的定時器,放置定時器重復;

clearInterval(timer);

　　　　//設(shè)置定時器;

timer = setInterval(function(){

//隨機數(shù)*數(shù)組元素個數(shù)=數(shù)組隨機索引;

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';

}

更多信息請查看IT技術(shù)專欄