一、事件类型
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';
};
六、键盘事件