js事件应用（事件绑定、拖拽吸附、事件捕获）-蒲公英云

js事件应用（事件绑定、拖拽吸附、事件捕获）

案例1：事件绑定：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>function myAddEvent(obj, ev, fn) {
    if(obj.attachEvent) {
        //IE下
        //attachEvent(事件名,函数);
        //detachEvent()  解除绑定
         obj.attachEvent('on' + ev, fn);
    } else {
        //FF Chrome下
        //addEventListener(事件名,函数,false);
        //removeEventListener()解除绑定
        obj.addEventListener(ev, fn, false);
    }
}
window.onclick = function() {
    var oBtn = document.getElementById("btn1");
    myAddEvent(oBtn, 'click', function() {
        alert('a');
    });
    myAddEvent(oBtn, 'click', function() {
        alert('b');
    });
}</script>
    </head>
    <body>
        <input type="button" id = "btn1" value="按钮"/>
    </body>
</html>

案例2：拖拽吸附

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #div1 {height: 200px;width: 200px;background: red;position: absolute;}
            #div2 {height: 500px;width: 700px;background: gray;position:relative;}
        </style>
        <script>
            window.onclick = 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;
                    //这里不能用oDiv，因为宽度小，当鼠标移出时就会失去效果
                    document.onmousemove = function(ev){
                        var oEvent = ev || event;
                        var x = oEvent.clientX - disX;
                        var y = oEvent.clientY - disY;
                        //解决div跑出界面的情况
                        if(x < 50){ //吸附原理
                            x = 0;
                        }
                        else if(x > oDiv2.offsetWidth - oDiv.offsetWidth - 50){
                            x = oDiv2.offsetWidth - oDiv.offsetWidth;
                        }
                        if(y < 50){
                            y = 0;
                        }
                        else if(y > oDiv2.offsetHeight - oDiv.offsetHeight - 50){
                            y = oDiv2.offsetHeight - oDiv.offsetHeight;
                        }
                        oDiv.style.left = x + 'px';
                        oDiv.style.top = y + 'px';
                    }
                    document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                    //解决FF问题
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <div id = "div2">
            <div id = "div1"></div>
        </div>
    </body>
</html>

案例3：事件捕获

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onclick = function(){
                var oBtn = document.getElementById("btn1");
                oBtn.onclick = function(){
                    alert('yes');
                }
                //IE下使用
                //oBtn.setCapture();
                //oBtn.releaseCapture();
            }
        </script>
    </head>
    <body>
        <input type = "button" value="按钮" id = "btn1"/>
    </body>
</html>