JavaScript DOM事件（笔记）

第1章事件流
1-1.事件冒泡:事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收;
然后逐级向上传播至最不具体的那个节点（文档）;
1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件;
第2章事件处理程序
2-1 HTML事件处理程序
//缺点:HTML和JS代码紧密的耦合在一起;

<input type="button" value="按钮" onclick="showMessage（）">

2-2 DOM0级事件处理程序
//较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多;
//优点:简单/跨浏览器;

<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（）;
//接收三个参数:要处理的事件名/事件处理函数和布尔值;
//在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事件处理程序及跨浏览器
//接收两个参数:事件处理函数名称和事件处理函数

<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中的事件对象
//在触发DOM上的事件时都会产生一个对象==event;
>1.type == 获取事件类型;
>2.target == 获取事件目标;
>3.stopPropagation（） == 停止事件冒泡;
>4.preventDefault（） == 阻止事件的默认行为;

function showMes（event）{alert（event.type）;//onclick;点击事件;alert（event.target.nodeName）;  //INPUT;input按钮被触发;event.stopPropagation（）;//停止事件冒泡;}<a href="event.html" onclick="stopGoto（）;">跳转</a>function stopGoto（event）{event.preventDefault（）;       //阻止默认行为;}

3-2 IE中的事件对象
>1.type == 同上;
>2.srcElement属性 == 获取事件目标;
>3.cancleBubble属性 == 阻止冒泡;设置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.封装拖拽函数

window.onload = drag;function drag（）{var oTitle = getClass（"login_logo_webqq","loginPanel"）[0];//拖拽oTitle.onmousedown = fnDown;//关闭弹窗var oClose = document.getElementById（"ui_boxyClose"）;oClose.onclick = function（）{document.getElementById（"loginPanel"）.style.display = "none";}//切换状态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";}//鼠标滑过/离开和点击状态列表时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章抽奖系统
>1.键盘事件
>>1.keyDown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件;
>>2.keyPress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件;
>>3.keyUp:当用户释放键盘上的键时触发;
>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）;    //设置定时器;timer = setInterval（function（）{//随机数*数组元素个数=数组随机索引;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";}