day51—JavaScript绑定事件

转换学开发，代码100天——2018-05-06

今天学习JavaScript的绑定事件。因为浏览器的原因绑定事件需要考虑兼容性问题。

attachEvent	IE浏览器，ie9以上事件执行顺序与绑定顺序相同；ie9以下事件执行顺序与绑定顺序相反	btn.attachEvent("onclick",function(){ alert("a"); });
detachEvent	IE浏览器，ie9以上事件执行顺序与绑定顺序相同；ie9以下事件执行顺序与绑定顺序相反	btn.detachEvernt("onclick",function(){ alert("a"); });
addEventListener	FF及chrome浏览器	btn.addEventListener("click",function(){ alert("a"); });
removeEventListener	FF及chrome浏览器	btn.renoveEventListener("onclick",function(){ alert("a"); });

如对一个按钮添加多个事件：

<script type="text/javascript">
        window.onload = function(){
            var btn = document.getElementById("btn");
            addMyEvent(btn,"click",function()
            {
                alert("a");
            });
            addMyEvent(btn,"click",function()
            {
                alert("b");
            });
        }

        function addMyEvent(obj,ev,fn){
            if (obj.attachEvent) {
                obj.attachEvent("on"+ev,fn);
            }
            else{
                obj.addEventListener(ev,fn);
            }
        }
    </script>

补充：将上一篇文章中的拖拽事件改成线框拖拽效果

按下鼠标，拖动物体时：

松开鼠标后：

<!DOCTYPE html>
<html>
<head>
    <title>javascript 拖拽</title>
    <style type="text/css">
    #div1{
         100px;
        height: 100px;
        background: red;
        position: absolute;
    }
    .Box{
        border: 1px dashed black;
        position: absolute;
    }
</style>

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        var disX =0;
        var disY =0;
        oDiv.onmousedown = function(ev){
            //创建虚线框
            var oBox = document.createElement("div");
            oBox.className = "Box";
            oBox.style.width = oDiv.offsetWidth+"px";
            oBox.style.height = oDiv.offsetHeight+"px";
            oBox.style.left = oDiv.offsetLeft+"px";
            oBox.style.top = oDiv.offsetTop+"px";
            document.body.appendChild(oBox);

            var oEvent = ev||event;
            disX = oEvent.clientX-oDiv.offsetLeft;
            disY = oEvent.clientY-oDiv.offsetTop;
            if (oDiv.setCapture) {
            //鼠标移动事件
            oDiv.onmousemove = mouseMove;
            oDiv.onmouseup = mouseUp;
            oDiv.setCapture();//ie专用
            return false;
        }else{
               //鼠标移动
               document.onmousemove =mouseMove; 
               document.onmouseup = mouseUp;
                return false;
               }
              //鼠标按下事件
              function mouseMove(ev){
                   var oEvent  = ev||event;
                   var l = oEvent.clientX-disX;
                   var t = oEvent.clientY-disY;
                   oBox.style.left = l+"px";
                   oBox.style.top = t+"px";
               };
            //鼠标抬起事件
            function mouseUp()
            {
                this.onmousemove = null;
                this.onmouseup = null;
                if (this.setCapture) 
                {
                    this.releaseCapture();//ie专用
                }
                oDiv.style.left = oBox.offsetLeft+"px";
                oDiv.style.top = oBox.offsetTop+"px";
                document.body.removeChild(oBox);
            };
            };
         }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
    </html>