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 }