JavaScript--DOM事件(笔记)
第1章 事件流
1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收;
然后逐级向上传播至最不具体的那个节点(文档);
1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件;
第2章 事件处理程序
2-1 HTML事件处理程序
//缺点:HTML和JS代码紧密的耦合在一起;
1 1 <input type="button" value="按钮" onclick="showMessage()">
2-2 DOM0级事件处理程序
//较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多;
//优点:简单/跨浏览器;
1 <input type="button" value="按钮" id="btn2"> 2 <script> 3 var btn2 = document.getElementById('btn2'); //取得btn2按钮对象; 4 btn2.onclick = function () { //给btn2添加onclick属性; 5 alert('这是通过DOM0级添加的事件!'); 6 } 7 btn2.onclick=null; //删除onclick属性; 8 </script>
2-3 DOM2级事件处理程序
//DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作;
//addEventListener()和removeEventListner();
//接收三个参数:要处理的事件名/事件处理函数和布尔值;
//在IE8一下,不起作用;
1 <input type="button" value="按钮" id="btn3"> 2 <script> 3 var btn3 = document.getElementById('btn3'); 4 btn3.addEventListener('click',showMessage,false); //添加事件程序; 5 btn3.addEventListener('click',function(){ //添加多个事件程序; 6 alert(this.value); 7 },false); 8 btn3.removeEventListener('click',showMessage,false); //删除事件程序; 9 </script>
2-4 IE事件处理程序及跨浏览器
//接收两个参数:事件处理函数名称和事件处理函数
1 <script> 2 var btn3 = document.getElementById('btn3'); 3 btn3.attachEvent('onclick',showMessage); //添加事件; 4 btn3.detachEvent('onclick',showMessage); //删除事件; 5 </script>
>2.浏览器兼容
1 //将添加和删除事件处理程序封装到对象中并赋值给变量'eventUtil'; 2 var eventUtil = { 3 //添加句柄 4 addHandler:function(element,type,handler){ 5 //判断DOM2级事件处理程序; 6 if(element.addEventListener){ 7 element.addEventListener(type,handler,false); 8 //判断IE浏览器; 9 }else if(element.attachEvent){ 10 element.attachEvent("on"+type,handler); 11 //使用DOM0级事件处理程序; 12 }else{ 13 element['on'+type] = handler; 14 } 15 }; 16 //删除句柄 17 removeHandler:function(element,type,handler){ 18 //判断DOM2级事件处理程序; 19 if(element.removeEventListener){ 20 element.removeEventListener(type,handler,false); 21 //判断IE浏览器; 22 }else if(element.detachEvent){ 23 element.detachEvent("on"+type,handler); 24 //使用DOM0级事件处理程序; 25 }else{ 26 element['on'+type] = null; 27 }; 28 }; 29 }; 30 //跨浏览器添加事件处理程序; 31 eventUtil.addHandler(btn3,'click',showMessage);
第3章 事件对象
3-1 DOM中的事件对象
//在触发DOM上的事件时都会产生一个对象==event;
>1.type == 获取事件类型;
>2.target == 获取事件目标;
>3.stopPropagation() == 停止事件冒泡;
>4.preventDefault() == 阻止事件的默认行为;
1 function showMes(event){ 2 alert(event.type); //onclick;点击事件; 3 alert(event.target.nodeName); //INPUT;input按钮被触发; 4 event.stopPropagation(); //停止事件冒泡; 5 } 6 <a href="event.html" onclick="stopGoto();">跳转</a> 7 function stopGoto(event){ 8 event.preventDefault(); //阻止默认行为; 9 }
3-2 IE中的事件对象
>1.type == 同上;
>2.srcElement属性 == 获取事件目标;
>3.cancleBubble属性 == 阻止冒泡;设置true表示阻止冒泡,false为不组织冒泡;
>4.returnValue属性 == 用于阻止事件的默认行为;
1 function showMes(event){ 2 //非IE用event,IE8以下用window.event; 3 event = event || window.event; 4 //事件目标兼容; 5 var ele = event.target || event.srcElement; 6 //兼容阻止事件冒泡; 7 if(event.stopPropagation){ 8 event.stopPropagation(); 9 }else{ 10 event.cancleBubble(); 11 }; 12 //兼容取消事件默认行为; 13 if(event.preventDefault){ 14 event.preventDefault(); 15 }else{ 16 event.returnValue = false; 17 } 18 }
第4章 QQ面板拖拽效果
>1.封装获取Class方法
1 function getClass(clsName,parent){ 2 var oParent = parent?document.getElementById(parent):document, 3 eles = [], 4 elements = oParent.getElementsByTagName('*'); 5 6 for (var i=0,l=elements.length; i<l; i++){ 7 if(elements[i].className == clsName){ 8 eles.push(elements[i]); 9 } 10 } 11 return eles; 12 }
>2.封装拖拽函数
1 window.onload = drag; 2 function drag(){ 3 var oTitle = getClass('login_logo_webqq','loginPanel')[0]; 4 //拖拽 5 oTitle.onmousedown = fnDown; 6 //关闭弹窗 7 var oClose = document.getElementById('ui_boxyClose'); 8 oClose.onclick = function(){ 9 document.getElementById('loginPanel').style.display = 'none'; 10 } 11 //切换状态 12 var loginState = document.getElementById('loginstate'), 13 stateList = document.getElementById('loginStatePanel'), 14 lis = stateList.getElementsByTagName('li'), 15 stateTxt = document.getElementById('login2qq_state_txt'), 16 loginStateShow = document.getElementById('login-state_show'); 17 loginState.onclick = function(e){ 18 //阻止冒泡到document使ul隐藏; 19 e = e || window.event; 20 if(e.stopPropagation){ 21 e.stopPropagation(); 22 }esle{ 23 e.cancleBubble = true; 24 } 25 stateList.style.display = "block"; 26 } 27 //鼠标滑过/离开和点击状态列表时 28 for(var i=0,i<lis.length,i++){ 29 lis[i].onmouseover = function(){ 30 this.style.background = "#567"; 31 } 32 lis[i].onmouseout = function(){ 33 this.style.background = "#fff"; 34 } 35 lis[i].onclick = function(e){ 36 //阻止冒泡到loginState使stateList显示; 37 e = e || window.event; 38 if(e.stopPropagation){ 39 e.stopPropagation(); 40 }esle{ 41 e.cancleBubble = true; 42 } 43 var id = this.id; 44 stateList.style.display = "none"; 45 stateTxt.innerHTML = getClass('stateSelect_text',id)[0].innerHTML; 46 loginStateShow.className = ''; 47 loginStateShow.className = 'login-state-show '+id; 48 } 49 } 50 document.onclick = function(){ 51 stateList.style.display = "none"; 52 } 53 } 54 //鼠标按下事件; 55 function fnDown(event){ 56 event = event || window.event; 57 var oDrag = document.getElementById('loginPanel'), 58 //鼠标按下时,鼠标和面板之间的距离; 59 disX = event.clientX - oDrag.offsetLeft, 60 disY = event.clientY - oDrag.offsetTop; 61 //移动 62 document.onmouseover = function(event){ 63 event = event || window.event; 64 fnMove(event,disX,disY); 65 } 66 //释放鼠标 67 document.onmouseup = function(){ 68 document.onmouseover = null; 69 document.onmouseup = null; 70 } 71 } 72 //鼠标移动事件; 73 function fnMove (e,posX,posY){ 74 var oDrag = document.getElementById('loginPanel'), 75 l = e.clientX-posX, 76 t = e.clientY-posY, 77 winW = document.documentElement.clientWidth || document.body.clientWidth, 78 winH = document.documentElement.clientHeight || document.body.clientHeight; 79 maxW = winW-oDrag.offsetWidth, 80 maxH = winH-oDrag.offsetHeight; 81 if(l<0){ 82 l = 0; 83 }else if(l>maxW){ 84 l = maxW; 85 } 86 if(t<0){ 87 t = 0; 88 }else if(t>maxH){ 89 t=maxH; 90 } 91 oDrag.style.left = l+'px'; 92 oDrag.style.top = t+'px'; 93 }
第4章 抽奖系统
>1.键盘事件
>>1.keyDown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件;
>>2.keyPress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件;
>>3.keyUp:当用户释放键盘上的键时触发;
>2.抽奖程序
1 var data = ['iPhone5','iPad','三星电脑','谢谢参与'], 2 timer = null, 3 flag = 0; 4 window.onload = function(){ 5 var play = document.getElementById('play'), 6 stop = document.getElementById('stop'); 7 //(鼠标)开始抽奖 8 play.onclick = palyFun; 9 stop.onclick = stopFun; 10 //(键盘Enter)开始抽奖 11 document.onkeyup = function(event){ 12 event = event || window.event; 13 if(event.keyCode == 13){ 14 if(flag == 0){ 15 palyFun(); 16 flag = 1; 17 }else{ 18 stopFun(); 19 flag = 0; 20 } 21 } 22 } 23 } 24 function palyFun(){ 25 var title = document.getElementById('title'), 26 play = document.getElementById('play'); 27 //清除之前的定时器,放置定时器重复; 28 clearInterval(timer);
//设置定时器; 29 timer = setInterval(function(){ 30 //随机数*数组元素个数=数组随机索引; 31 var random = Math.floor(Math.random()*data.length); 32 title.innerHTML = data[random]; 33 },50); 34 play.style.background = "#999"; 35 } 36 function stopFun(){ 37 clearInterval(timer); 38 var paly = document.getElementById('play'); 39 paly.style.background = '#036'; 40 }
