事件对象event

一:事件对象event的属性

1. e.client:相对于当前页面(窗口,不是这个元素)可视区域的左顶点

document.onmousemove = function(e){
    var x = e.clientX;
    var y = e.clientY;
    console.log("横坐标:" + x + ",纵坐标:" + y;
}

2.e.screen:相对于计算机屏幕的左顶点

document.body.onclick = function(e){
    var x = e.screenX;
    var y = e.screenY;
    console.log("距离屏幕左边的距离:" + x + ",距离屏幕上边的距离:" + y);

}

3.offset:事件触发时鼠标距离该元素左边(x)或上边(y)的距离(与定位无关)

document.getElementById("son").onclick =  function(e){
    console.log(e.offsetY);
}

二:scroll、client、page、offset解析

1.offset: 偏移量(包含边框)

// 即使元素没有设置样式,只用文字填充,也能获取到  
offsetWidth:获取dom元素的宽度
offsetHight:获取dom元素的高度

// 注意:是到父盒子的padding为止
offsetLeft:到最近的带有定位的父盒子的padding左侧的距离。
offsetTop:到最近的带有定位的父盒子的padding上边的距离。

2.client: 可视;当前对象的可视区域宽高(不包含边框)(有兼容性)

clientWidth: 可视宽度(width + padding)
clientHight: 可视高度(height + padding)

兼容性写法:
var clientWidth = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0;

备注:
clientTop和clientLeft没用,他们通常指的就是border的宽度 
(如果有滚动条会包含滚动条的宽度)

3.scroll:卷曲;获取页面卷曲的距离(页面滚动的坐标)(有兼容性)

 document.onmouseover = function(){
    var x = document.body.scrollLeft;  
    var y = document.body.scrollTop;   
    console.log("左边卷曲的距离:" + x + ",上边卷曲的距离:" + y);
}

兼容性写法:
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

4.page:鼠标在当前页面的位置(页面有卷曲的话要加上卷曲)(有兼容性)

// pageX和pageY不支持IE浏览器
// 它的用法和e.clientX和e.clienY大致相同,
// 但是当页面卷曲时,page系列能够获取到页面的准确坐标,计算了滚动的距离
// client系列不会计算滚动的距离
// 所以当设置图片随着鼠标滚动时,不计兼容问题的话,page系列很简单
// clien系列需要 + 对应的scroll

client:
pic.style.left = e.clientX + scrollLeft +"px";
pic.style.top = e.clientY + scrollTop + "px";

page:
pic.style.left = pageX +"px";
pic.style.top = pageY + "px";

三:jQuery中的offset和position

1. offset()方法
    offset({left: 100,top: 100}):设置元素相对于文档doucment的位置
    offset(): 获取元素相对于文档doucment的位置,获取的是一个对象
    offset().left;offset().top 获取距离文档左边或上边的距离   

事件对象event_第1张图片
2. position()方法
只能获取位置,不能设置
获取相对于其最近的有定位的父元素

你可能感兴趣的:(javascript)