JavaScript--DOM事件(笔记)-白红宇

JavaScript--DOM事件(笔记)

阅读量：6706 次

发布时间：2019-06-25

本文共 5335 字，大约阅读时间需要 17 分钟。

第1章事件流

1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收;

然后逐级向上传播至最不具体的那个节点(文档);

1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件;

第2章事件处理程序

2-1 HTML事件处理程序

//缺点:HTML和JS代码紧密的耦合在一起;

1 1

2-2 DOM0级事件处理程序

//较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多;

//优点:简单/跨浏览器;

1 2

2-3 DOM2级事件处理程序

//DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作;

//addEventListener()和removeEventListner();

//接收三个参数:要处理的事件名/事件处理函数和布尔值;

//在IE8一下,不起作用;

1 2

2-4 IE事件处理程序及跨浏览器

//接收两个参数:事件处理函数名称和事件处理函数

>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 跳转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

>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
     
      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 }

转载于:https://www.cnblogs.com/yizihan/p/4318125.html

你可能感兴趣的文章