JS事件基础

一、事件类型
clientX，clientY鼠标的坐标
二、获取时间对象
var oEvent = e || event;
三、事件冒泡
概念：在多级嵌套的标签内，最底部的事件会往上传递，直到body、html（有执行语句的话）。
四、清除事件冒泡
oEvent.cancelBubble = true;

实例：在页面中的btn，点击显示div，display:block;点击空白处，div消失，display:none;

btn.onclick = function(){
div.style.display = ’ block’;
oEvent.cancelBubble = true;//取消冒泡
}
document.onclick = function(){
div.style.display= ‘none’;
}

五、鼠标事件
clientX 代表在可视区内范围距离

当网页中出现竖向滚动轴（设置了body2000px）
会出现：只有当鼠标在上半部分的时候拖动div位置正确，越往下鼠标与div距离越大，
这里写图片描述

出现拖不下去的情况。

解决方法：添加上滚动轴离开的位置
完整代码

document.onmousemove = function(e){
                           var oEvent = e ||event;
                           var div1 = document.getElementById('div1');

       var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
       var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;


       div1.style.left = oEvent.clientX+scrollLeft-50+'px';
       div1.style.top = oEvent.clientY+scrollTop-50+'px';
   };

封装获取鼠标x，y坐标轴距离的方法（出现滚动轴的时候加上滚动轴的距离防止出错）

    function getPos(e){

        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;

        return{x:e.clientX + scrollLeft,y:e.clientY + scrollTop};//e.clientX 鼠标所在地的X轴距离，加上兼容条件下滚动轴的距离
        }

实例：
简易版本贪吃蛇（一串跟随鼠标移动的div，原理是从后往前循环赋值，前一个的左、上距离赋值给后一个的左、上style，最后一个即adiv[0]的左、上距离是鼠标的X、Y轴距离。）

  function getPos(e) {

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

            return { x: e.clientX + scrollLeft, y: e.clientY + scrollTop };
        }
    var adiv = document.getElementsByTagName('div');
   document.onmousemove = function (e) {
            for (var i = adiv.length - 1; i > 0; i--) {//从后往前复制距离，前一个的距离赋值给后一个
                adiv[i].style.left = adiv[i - 1].offsetLeft + 'px';
                adiv[i].style.top = adiv[i - 1].offsetTop + 'px';
            }
            adiv[0].style.left = getPos(e).x + 'px';
            adiv[0].style.top = getPos(e).y + 'px';

        };

六、键盘事件

猜你喜欢