事件对象

来源：互联网发布：餐厅网络推广方案编辑：程序博客网时间：2024/05/21 18:31

跨浏览器事件对象兼容性写法

    var EventUtil = {        //取得事件的event对象        getEvent: function(event){            return event?event:window.event;        },        //添加事件处理程序        addHandler: function(element,type,handler){            if(element.addEventListener){                element.addEventListener(type,handler,false);            }else if(element.attachEvent){                element.attachEvent("on"+type,handler);            }else{                element["on"+type]=handler            }        },        //移除事件处理程序        removeHandler: function(){            if(element.removeEventListener){                element.removeEventListener(type,handler,false);            }else if(element.detachEvent){                element.detachEvent("on"+type,handler);            }else{                element["on"+type] = null;            }        },        //返回事件的目标        getTarget: function(event){            return event.target||event.srcElement;        },        //阻止事件的默认行为        stopDefault: function(event){            if(event.preventDefault){                event.preventDefault()            }else{                event.returnValue = false;            }        },        //阻止事件冒泡        stopPropagation: function(event){            if(event.stopPropagation){                event.stopPropagation();            }else{                event.cancelBubble = true;            }        }    };

用法：

 var btn = document.getElementById("btn"); var body = document.body; EventUtil.addHandler(btn,"click",function(event){        alert("btn");        EventUtil.stopPropagation(event);    });    EventUtil.addHandler(body,"click",function(){        alert("body");    })

各种位置

客户区坐标位置 clientX/clientY
页面坐标位置 pageX/pageY
屏幕坐标位置 screenX/screenY
页面滚动信息 scrollX/scrollY

事件委托

对“事件处理程序”过多的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

offsetLeft,clientLeft,offsetWidth,clientWidth各种区别

实现拖拽效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body{            margin: 0;            padding: 0;            height: 100%;        }        #drag{            position: relative;            width: 100px;            height: 100px;            top:0;            left: 0;            background-color: skyblue;            cursor: pointer;        }    </style></head><body><div id="drag"></div><script>    window.onload= function(){        var box = document.getElementById('drag');        box.onmousedown = function(event){            var event = event||window.event;            var distanceX = event.clientX - box.offsetLeft;            var distanceY = event.clientY - box.offsetTop;            document.onmousemove = function(event){                var event = event||window.event;                var left = event.clientX - distanceX;                var top = event.clientY - distanceY;                //当left小于等于左边界时，不再拖动出左边界                if(left<=0){                    left = 0;                }else if(left>=document.documentElement.clientWidth - box.offsetWidth){                    left = document.documentElement.clientWidth - box.offsetWidth;                }                if(top<= 0){                    top = 0;                }else if(top>= document.documentElement.clientWidth - box.offsetHeight){                    top = document.documentElement.clientWidth - box.offsetHeight                }                box.style.left = left + "px";                box.style.top = top + "px";            };        };        box.onmouseup = function(){           document.onmousemove = null;        };    }</script></body></html>

阅读全文

0 0