JavaScript DOM事件(笔记)

第1章 事件流

1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收;
然后逐级向上传播至最不具体的那个节点(文档);
1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件;

第2章 事件处理程序

2-1 HTML事件处理程序
//缺点:HTML和JS代码紧密的耦合在一起;

?

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

2-2 DOM0级事件处理程序

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

?

1 2 3 4 5 6 7 8

<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一下,不起作用;

?

1 2 3 4 5 6 7 8 9

<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事件处理程序及跨浏览器

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

?

1 2 3 4 5

<script>     var btn3 = document.getElementById( 'btn3' );     btn3.attachEvent( 'onclick' ,showMessage);      //添加事件;     btn3.detachEvent( 'onclick' ,showMessage);      //删除事件; </script>

>2.浏览器兼容

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

//将添加和删除事件处理程序封装到对象中并赋值给变量'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() == 阻止事件的默认行为;

?

1 2 3 4 5 6 7 8 9

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属性 == 用于阻止事件的默认行为;

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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方法

?

1 2 3 4 5 6 7 8 9 10 11 12

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.封装拖拽函数

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

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.抽奖程序

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

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