事件绑定高级应用

 1 addEvent(document.getElementById('d1'),'click', function(){alert('1');})
 2 
 3 /*绑定事件的函数封装*/
 4 function addEvent(obj, otype, fn ){
 5       if(obj.attachEvent)
 6       {
 7             obj.attachEvent('on'+otype, fn);
 8           }
 9        else{
10           obj.addEventListener(otype,  fn, false);
11            }
12            }
13       }

    function(){alert('a');stopBubble(this.ev)}
    /*阻止冒泡函数封装*/
    function stopBubble(ev){
        var e=window.event||event;
        if(e.stopPropagation)
        {
            e.stopPropagation();
            }
        else{
            window.event.cancelBubble=true;
            }
        
        };

事件绑定

IE方式

attachEvent(事件名称，函数)，绑定事件处理函数

datachEvent（事件名称，函数），解除绑定

DOM方式

addEventListener（事件名称，函数，捕获）

removeEventListener(事件名称，函数，捕获)

何时使用时间绑定

绑定事件和this

绑定匿名函数，会无法删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    
    /*oBtn.onclick=function ()
    {
        alert(this);
    };*/
    
    //IE    事件绑定        this->window
    /*oBtn.attachEvent('onclick', function (){
        alert(this==window);
    });*/
    
    //FF
    oBtn.addEventListener('click', function (){
        alert(this);
    }, false);
};
</script>
</head>

<body>
<input id="btn1" type="button" value="aaa" />
</body>
</html>

绑定IEthis问题

高级拖拽

复习拖拽原理

距离不变

三个事件， down move up

封装成函数

限制范围

对位置进行判断

例1 不能拖出窗口的Div

例2 不能拖出指定对象的div

磁性吸附

高级拖拽（2）

图片拖拽

阻止默认事件

文字选中

阻止默认事件

ie下拖动问题

事件捕获

碰撞检测

碰撞检测原理-----九宫格

拖拽中的碰撞检测

高级拖拽（3）

与DOM的配合

带框的拖拽

保留原有的位置拖拽

弹出层

拖拽改变Div的大小

自定义滚动条

拖拽

只有横向的拖拽

限制范围------范围的大小

计算比例---当前值/最大值

控制其他对象，

控制物体的大小

控制物体的透明度

控制文字的滚动

鼠标滚轮

鼠标滚轮事件

事件

mousewheel

DOMMousescroll

》DOM事件只能绑定，阻止默认事件--preventDefault

属性

IE下 wheelDelta

DOM下 detail

应用到自定义滚动条---给谁加事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上下滑动的索引值</title>
<style>
#div1 {200px; height:200px; background:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上下滑动的索引值</title>
<script>
//处理函数监听兼容事件
function myAddEvent(obj, sEvent, fn)
{
    if(obj.attachEvent)
    {
        obj.attachEvent('on'+sEvent, fn);
        }
    else
    {
        obj.addEventListener(sEvent, fn, false);
        }
}
window.onload=function()
{
    var oDiv=document.getElementById('div1');
        myAddEvent(oDiv, 'mouseWheel', onMouseWheel);
        myAddEvent(oDiv, 'DOMMouseScroll', onMouseWheel);

function onMouseWheel(ev)
    {
        var oEvent=ev||event;
        //iE    下付，上正
        //wheelDalta
        
        //ff
        //detail 下正， 上负
        
        var bDown=true;
        alert(bDown);
        
        if(oEvent.wheelDelta)
        {
            if(oEvent.wheelDelta<0)
            {
                bDown=true;
                }
            else{
                bDown=false;
                }
            }
         else
         {
             if(oEvent.detail>0)
             {
                 bDown=true;
                 }
             else
             {
                 bDown=false;
                 }
             }
             alert(bDown);
        }
        myAddEvent(oDiv, 'mouseWheel', onMouseWheel);
        myAddEvent(oDiv, 'DOMMouseScroll', onMouseWheel);
    }
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

滚动索引设置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {200px; height:200px; background:red;}
</style>
<script>
//捕获函数处理兼容
function myAddEvent(obj, sEvent, fn)
{
    if(obj.attachEvent)
    {
        
        obj,attachEvent('on'+sEvent, fn);
        }
    else
    {

        obj.addEventListener(sEvent, fn, false);
        }
}
window.onload=function()
{
    var oDiv=document.getElementById('div1');
    function onMouseWheel(ev)
    {
        var oEvent=ev||event;
        var bDown=true;
        //上下索引值兼容
        bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
        //处理索引值
        if(bDown)
        {
            oDiv.style.height=oDiv.offsetHeight+10+'px';
            }
        else{
            oDiv.style.height=oDiv.offsetHeight-10+'px';
            }
        //阻止默认事件兼容
        if(oEvent.preventDefault)
        {
            oEvent.preventDefault();
            }
        return false;
        }
    myAddEvent(oDiv, 'mousewheel', onMouseWheel);
    myAddEvent(oDiv, 'DOMMouseScroll', onMouseWheel);
    }
    
</script>
</head>

<body><div id="div1"></div>
</body>
</html>

滚动事件处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条2</title>
<style>
#parent {400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
#div1 {20px; height:20px; background:red; cursor:pointer; position:absolute;}
#div2 {300px; height:300px; filter:alpha(opacity:0); opacity:0; background:yellow; }
</style>
<script>
window.onload=function()
{
    var oDiv=document.getElementById('div1');
    var oParent=document.getElementById('parent');
    var oDiv2=document.getElementById('div2');
    oDiv.onmousedown=function(ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        
        document.onmousemove=function(ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            if(l<0)
            {
                l=0
                }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWdith;
                }
                oDiv.style.left=l+'px';
            //算速度    
            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            oDiv2.style.filter='alpha(opacity:'+100*scale+')';
            oDiv2.style.opacity=scale;
            document.title=scale;
            };
        document.onmouseup=function()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        }
        }
        };
    
</script>
</head>

<body><div id="parent">
    <div id="div1">
</div>
</div>
    <div id="div2">
    </div>
</body>
</html>

滚动改变亮度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#parent {400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
#div1 {20px; height:20px; background:red; cursor:pointer; position:absolute;}
#div2 {0px; height:0px; background:yellow;}
</style>
<script>
window.onload=function()
{
    var oDiv=document.getElementById('div1');
    var oParent=document.getElementById('parent');
    var oDiv2=document.getElementById('div2');
    oDiv.onmousemove=function(ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        document.onmousemove=function(ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            if(l<0)
            {
                l=0
                }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWdith;
                }
                oDiv.style.left=l+'px';
            //算速度    
            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            oDiv2.style.width=scale*300+'px';
            oDiv2.style.height=scale*300+'px';
            document.title=scale;
            }
                    document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        }
        }
    }
</script>
<title>滚动条</title>
</head>

<body><div id="parent">
    <div id="div1">
</div>
</div>
    <div id="div2">
    </div>
</body>
</html>

滚动改变大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#parent {400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
#div1 {20px; height:20px; background:red; cursor:pointer; position:absolute;}
#div2 {200px; height:300px; border:1px solid black; position:relative; overflow:hidden;}
#div3 {position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function myAddEvent(obj, sEvent, fn)
{
    if(obj.attachEvent)
    {
        obj.attachEvent('on'+sEvent, fn);
    }
    else
    {
        obj.addEventListener(sEvent, fn, false);
    }
}

window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var oParent=document.getElementById('parent');
    var oDiv2=document.getElementById('div2');
    var oDiv3=document.getElementById('div3');
    
    function onMouseWheel(ev)
    {
        var oEvent=ev||event;
        var bDown=true;
        
        bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
        
        if(bDown)
        {
            setLeft(oDiv.offsetLeft+10);
        }
        else
        {
            setLeft(oDiv.offsetLeft-10);
        }
        
        if(oEvent.preventDefault)
        {
            oEvent.preventDefault();
        }
        
        return false;
    }
    
    myAddEvent(oParent, 'mousewheel', onMouseWheel);
    myAddEvent(oParent, 'DOMMouseScroll', onMouseWheel);
    myAddEvent(oDiv2, 'mousewheel', onMouseWheel);
    myAddEvent(oDiv2, 'DOMMouseScroll', onMouseWheel);
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            
            setLeft(l);
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
    
    function setLeft(l)
    {
        if(l<0)
        {
            l=0;
        }
        else if(l>oParent.offsetWidth-oDiv.offsetWidth)
        {
            l=oParent.offsetWidth-oDiv.offsetWidth;
        }
        
        oDiv.style.left=l+'px';
        var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
        
        oDiv3.style.top=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale+'px';
        
        document.title=scale;
    }
};
</script>
</head>

<body>
<div id="parent">
    <div id="div1">
    </div>
</div>
<div id="div2">
    <div id="div3">
         所有可能让你变得更好的努力，在一开始就被你扼杀了。如果你一直没有尝试迈出第一步，怎么可能掌握栽培绿植的方法，怎么可能享受到跑步之后大汗淋漓的酣畅……难道害怕自己没有经验，害怕中途突然出现的变故，害怕事到最后依然不尽如人意的结局，或者仅仅是怕输、怕被嘲笑，就不敢尝试了吗？
  我们每个人都有自己的梦想，都有想要达成的目标，都有希望成为的样子，但在这个过程中，总会出现各种干扰。与其畏缩不前，何不趁青春年少，大胆一试？许多事情，不是因为做不到才让人失去了信心，而是因为失去了信心，才变得难以做到
  想起之前看到杨澜在书中写到她对迈克尔·乔丹的采访，这位被誉为“飞人”的伟大运动员说：“我起码有9000次投球不中，我输过不下300场比赛，有26次人们期待我投入制胜一球而我却失误了。我的一生中失败一个接着一个，这就是为什么我能够成功。我从未害怕过失败，我可以接受失败，但我不能接受没有尝试。”乔丹说，面对所有的伤痛和困境，他的法宝就是父母从小教育他的那句话：“谁都会遇到倒霉事，你的任务是想办法把坏事变成好事。
  人这一生总有很多的残缺，我不是为了追求完美而活着，我是为了弥补残缺而更好的活着。为了自己，为了父亲，也为了很多很多的关心我的人。

　　人这一生总会遇到很多的不如意，我不是为了逃避而活着，我是为了好好地面对而更好的活着。

　　人这一生总是会让命运作弄，一次又一次，周而复始，我不是为了认命而活着，我是为了坚持，为了信仰，为了梦想而更好的活着。

　　即便曾经一度垂死挣扎，而今，乌云散去，风雨平息，一切又是新的开始，即便生活再艰难，人生再无奈。为了自己，为了父亲，为了很多很多关心我的人。为了信仰，为了希望，为了梦想。我想好好的活着。
    </div>
</div>
</body>
</html>

鼠标配合滚动文本

本节重点

拖拽---封装

拖拽----限制范围

拖拽----磁性吸附

拖拽---图片

拖拽---DOM

碰撞检测

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;
            
            if(l<50)
            {
                l=0;
            }
            else if(l>document.documentElement.clientWidth-oDiv.offsetWidth-50)
            {
                l=document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            
            if(t<50)
            {
                t=0;
            }
            else if(t>document.documentElement.clientHeight-oDiv.offsetHeight-50)
            {
                t=document.documentElement.clientHeight-oDiv.offsetHeight;
            }
            
            oDiv.style.left=l+'px';
            oDiv.style.top=t+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>

拖拽磁性吸附

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.box {position:absolute; border:1px dashed black;}
#div1 {100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        var oNewDiv=document.createElement('div');
        
        oNewDiv.className='box';
        oNewDiv.style.width=oDiv.offsetWidth+'px';
        oNewDiv.style.height=oDiv.offsetHeight+'px';
        
        document.body.appendChild(oNewDiv);
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oNewDiv.style.left=oEvent.clientX-disX+'px';
            oNewDiv.style.top=oEvent.clientY-disY+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
            
            oDiv.style.left=oNewDiv.style.left;
            oDiv.style.top=oNewDiv.style.top;
            
            document.body.removeChild(oNewDiv);
        };
    };
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>

带框拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.box {position:absolute; border:1px dashed black;}
#div1 {100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        var oNewDiv=document.createElement('div');
        
        oNewDiv.className='box';
        oNewDiv.style.width=oDiv.offsetWidth-2+'px';
        oNewDiv.style.height=oDiv.offsetHeight-2+'px';
        oNewDiv.style.left=oDiv.offsetLeft+'px';
        oNewDiv.style.top=oDiv.offsetTop+'px';
        
        document.body.appendChild(oNewDiv);
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oNewDiv.style.left=oEvent.clientX-disX+'px';
            oNewDiv.style.top=oEvent.clientY-disY+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
            
            oDiv.style.left=oNewDiv.style.left;
            oDiv.style.top=oNewDiv.style.top;
            
            document.body.removeChild(oNewDiv);
        };
    };
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>

带框拖拽2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {100px; height:100px; background:red; position:absolute;}
#div2 {100px; height:100px; background:yellow; position:absolute;}
#div3 {100px; height:100px; background:green; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    drag('div1');
    drag('div2');
    drag('div3');
};

function drag(id)
{
    var oDiv=document.getElementById(id);
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oDiv.style.left=oEvent.clientX-disX+'px';
            oDiv.style.top=oEvent.clientY-disY+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
}
</script>
</head>

<body>
<div id="div1">
</div>

<div id="div2">
</div>

<div id="div3">
</div>
</body>
</html>

拖拽封装

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {11px; height:11px; background:url(drag_ico.gif); position:absolute; bottom:0; right:0; cursor:nw-resize;}
#div2 {200px; height:150px; background:#CCC; position:relative;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oDiv2.style.width=oEvent.clientX-disX+oDiv.offsetWidth+'px';
            oDiv2.style.height=oEvent.clientY-disY+oDiv.offsetHeight+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
};
</script>
</head>

<body>
<div id="div2">
    <div id="div1">
    </div>
</div>
</body>
</html>

拖拽改变大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        if(oDiv.setCapture)
        {
            oDiv.onmousemove=fnMove;
            oDiv.onmouseup=fnUp;
            
            oDiv.setCapture();
        }
        else
        {
            document.onmousemove=fnMove;
            document.onmouseup=fnUp;
        }
        
        function fnMove(ev)
        {
            var oEvent=ev||event;
            
            oDiv.style.left=oEvent.clientX-disX+'px';
            oDiv.style.top=oEvent.clientY-disY+'px';
        }
        
        function fnUp()
        {
            this.onmousemove=null;
            this.onmouseup=null;
            
            if(this.releaseCapture)
            {
                this.releaseCapture();
            }
        }
        
        return false;
    };
};
</script>
</head>

<body>
asdfas
<div id="div1">
asdfs
</div>
zcvx
</body>
</html>

拖拽问题解决