hh

//创建奖池数组,与定时器。
var data=['phone5','ipad','samsung','canon','hp','thankyou','shopcard','¥1000'],
    timer=null,
    flag=0;

window.onload=function(){
    var play=document.getElementById('play'),
        stop=document.getElementById('stop');

    //鼠标抽奖开始
    play.onclick=playFun;
    stop.onclick=stopFun;
    //键盘抽奖事件
    document.onkeyup=function(e){
        e=event || window.event;
        //event.keyCode获取事件键码
        if(e.keyCode===13){
            //判断当前flag的值
            if(flag===0){
                playFun(); 
            }else {
                stopFun();
            }
        }
    }
}

function playFun(){
    var play=document.getElementById('play'),
        title=document.getElementById('title');
    //先停止定时器，防止多次点击叠加定时
    clearInterval(timer);
    //设定定时器执行函数与间隔
    timer=setInterval(function(){
        //Math.random取0～1中间随机浮点数(不包括0与1),再乘以奖池数组长度，并用Math.floor取整得到0到数组长度之间的随机整数。
        var random=Math.floor(Math.random()*data.length);
        //通过随机数取到的数组项替换元素内容
        title.innerHTML=data[random];
    },50);
    //谁调用函数，this指谁。但此处不能用this替代play，否则键盘事件中this将指代document.onkeyup，document无法改变背景
    play.style.background='#ccc';
    //flag放到这里对单纯的onclick事件没有影响，但对键盘事件与键鼠交叉操作的事件会有影响
    flag=1;
}

function stopFun(){
    clearInterval(timer);
    var play=document.getElementById('play');
    play.style.background='#036';
    flag=0;
}

kk

//封装函数，通过className获取需要的元素数组
function getByClass(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;
}

window.onload=drag;

function drag(){
    //拖拽
    var oTilte=getByClass('login_logo_webqq','loginPanel')[0];
    oTilte.onmousedown=fnDown;

    //关闭
    var oClose=document.getElementById('ui_boxyClose');
    oClose.onclick=function(){
        document.getElementById('loginPanel').style.display='none'; 
    }

    //切换状态
    //根据功能目标，分析html结构，设置步骤方法，先取出必须元素
    var loginState=document.getElementById('loginState'),
        stateList=document.getElementById('loginStatePanel'),
        lis=stateList.getElementsByTagName('li'),
        statetTxt=document.getElementById('login2qq_state_txt'),
        loginStateShow=document.getElementById('loginStateShow');
    
    // 先设置点击显示状态列表，并对点击事件设置阻止冒泡，防止冒泡到document层的点击关闭列表功能
    loginState.onclick=function(e){
        e=e || window.event;
        if(e.stopPropagation){
            e.stopPropagation();
        }else {
            e.cancleBubble=true;
        }
        stateList.style.display='block';
    }

    //光标滑过、离开和点击状态列表效果
    //使用for遍历循环，为每个li添加事件
    for (var i = 0,l=lis.length; i < l; i++) {
        //滑过
        lis[i].onmouseover=function(){
            this.style.background='#567';
        }
        //离开
        lis[i].onmouseout=function(){
            this.style.background='#fff';
        }
        //点击，先隐藏列表、阻止冒泡(否则会冒泡到loginState.onclick事件)
        lis[i].onclick=function(e){
            //点击到哪个li就获取哪个li的id
            var id=this.id;
            e=e || window.event;
            if(e.stopPropagation){
                e.stopPropagation();
            }else {
                e.cancleBubble=true;
            }
            stateList.style.display='none';
            //并替换指定className,使用之前的函数封装
            statetTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;
            //注意保留的className后的空格
            loginStateShow.className='login-state-show '+id;
        }
    }
    //实现点击窗口任意地方都可关闭状态列表，为防止冒泡冲突loginState.onclick事件需要阻止冒泡
    document.onclick=function(){
        stateList.style.display='none';
    }
}

function fnDown(event){   //此event为onmousedown触发,携带光标clientXY参数
    event=event || window.event;
    var oDrag=document.getElementById('loginPanel'),
        //计算出onmousedown时光标与面板之间的水平垂直距离
        disX=event.clientX-oDrag.offsetLeft,
        disY=event.clientY-oDrag.offsetTop;
    //移动
    document.onmousemove=function(event){ //此event为onmousemove触发
        event=event || window.event;
        fnMove(event,disX,disY);//为下一步进行封装 
    }
    //释放
    document.onmouseup=function(){
        document.onmousemove=null;//光标释放直接将onmousemove赋值null，清空
        document.onmouseup=null;//在清空自身，不浪费资源，防止与其他的onmouseup冲突 
    }
}

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,//窗口的宽度，后者为IE兼容
        winH=document.documentElement.clientHeight || document.body.clientHeight,//窗口的高度
        maxW=winW-oDrag.offsetWidth-10,//避免面板拖出窗口，限定拖拽最大距离(减10是因为面板关闭按钮盒子使用了绝对定位，拖拽时会被边框遮挡)
        maxH=winH-oDrag.offsetHeight;//用窗口宽高减去面板宽高即可得到
    
    //进行距离判断，固定上下限
    if(l<0){
        l=0;
    }else if(l>maxW){
        l=maxW;
    }
    //因为关闭按钮在面板顶部，所以最小值改为其绝对定位位移的相反值
    if(t<10){
        t=10;
    }else if(t>maxH){
        t=maxH;
    }

    oDrag.style.left=l+'px';
    oDrag.style.top=t+'px';
}

addEvent(ele, type, hander)

hander是函数名，不能加()，加了()就成了函数方法有返回值。

function showMessage(event){

    alert("event.target.nodename");

     event.stopPropagation();//阻止事件向上传播

}

this引用被触发的元素：

DOM2级事件处理程序 **定义了两个方法： 

> addEventListener()--------------添加事件 >

 removeEventListener()-----------移除事件 

三个参数设置;事件名称，处理方法(函数)，布尔值-----冒泡（false）或捕获（true）

DOM0级事件处理程序：

var y=document.getElementById('btn2');  取得btn2按钮对象。

btn2.onclick=function(){

    alert('这是通过DOM0级添加的事件！')

}

btn2.onclick=null;    删除onclick属性

HTML事件处理程序：

DOM的事件对象

1. type属性  用于获取事件类型

2. target属性 用于获取事件目标

3. stopPropagation()方法 用于阻止事件冒泡

4. preventDefault()方法 阻止事件的默认行为
   

stopPropagation阻止冒泡

dom不支持IE浏览器

IE事件处理程序

attachEvent（）添加事件

detachEvent（）删除事件

        接收相同的两个参数;事件处理程序的名称和事件处理程序的函数

    三种事件处理

1、对于HTML事件来说，只能添加一个事件程序，且与JS的耦合过密，不利于后期的维护。

2、对于DOM0级事件，可以添加多个事件程序，但是只会执行最后一个事件。

3、对于DOM2级事件，同样可以添加多个事件程序，并且从上到下按顺序执行

  DOM2级事件定义了两个方法：

        用于处理指定和删除事件程序的操作，addEventListener（）和removeEventListener（）。

        接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值。

dom中和ie中的event属性，比如获取dom中的事件目标event.target,在ie中则要用event.srcElement

两种事件流（处理顺序完全相反）

                                            三种事件处理

1、对于HTML事件来说，只能添加一个事件程序，且与JS的耦合过密，不利于后期的维护。

2、对于DOM0级事件，可以添加多个事件程序，但是只会执行最后一个事件。

3、对于DOM2级事件，同样可以添加多个事件程序，并且从上到下按顺序执行！