原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX
首先我们先介绍什么是事件:
事件就是某一个对象在特定的时刻做了某一件事。比如:点击事件,当我点击了按钮后变触发了点击事件浏览器会做出相应的响应。
那么事件有三大要素:
1、事件源:dom对象
2、事件类型:具体参照W3C的javas事件参考手册
3、事件响应:一般是一个函数,称之为事件处理函数
原生JS注册事件的语法:
//原生注册事件语法:
document.getElementById("box").onclick = function() {
//点击盒子输出111
console.log('111');
}
jQuery中也是同样遵循上面的事件三元素的,其注册语法是:
//入口函数,所有的代码是包含在入口函数里面的
$(function(){
$('#box').on("click",function(){
/* 具体语法:
$(选择器).on(事件类型,事件处理函数)
*/
})
})
二:事件对象
什么又是事件对象呢?
A、当某一个事件被触发时(例如点击事件),此时浏览器会记录触发时的某些信息, 例如你是在哪个位置点击的,你在点击的时候是直接鼠标左键点击的,还是鼠标左右键一起点击(骚操作)的等等 浏览器把这些所有的信息放到一个变量中存储,这个变量的数据类型是对象,所以称之为事件对象。
B、如何获取事件对象:只需要给事件函数传递一个参数,要么是event要么是就可以了。
<!-- 这里是原生代码 -->
<script>
//原生注册事件语法:
document.getElementById("box").onclick = function(e) {
//兼容性处理
e = e || window.event;
//输出事件对象观察
console.log(e);
}
</script>
<script src="jquery-1.12.4.js"></script>
<!-- 这里是jQuery的代码 -->
<script>
//入口函数,所有的代码是包含在入口函数里面的
$(function(){
$('#box').on("click",function(e){
//兼容性处理
e = e || window.event;
//输出事件对象观察
console.log(e);
})
})
</script>
展开之后,两者的内容是一样的:
这里是jQuery的事件对象:
**现在介绍每次都主角:事件的三大坐标**
原生JS中的三大家族:
screen(screenX与screenY)坐标:屏幕的左上角到我触发点的距离
client(clientX与clientY)坐标:浏览器可视区域的左上角距离触发点的距离
注意:页面滚动做了client这个值会发生变化的,它的参照对象是页面的可视区。
page(pageX与pageY)坐标:不管浏览器是否滚动,都是距离浏览器左上角的距离。
注意:它与页面未被滚动时的client坐标对应的值是一致的。
offset(offsetX与offsetY)坐标:相对于事件源的XY坐标.
原生的具体代码:
<!-- 这里是原生代码 -->
<script>
//原生注册事件语法:
document.getElementById("box").onclick = function(e) {
//兼容性处理
e = e || window.event;
//输出事件对象观察
console.log(e);
//电脑屏幕的左上角,距离你触发事件的那一点的x值和y值。
console.log("e.screenX:"+e.screenX+"---e.screenY:"+ e.screenY);
//浏览器可视区域,距离触发事件的那一点的x值和y值
console.log("e.clientX:"+e.clientX+"---e.clientY:"+ e.clientY);
//页面的左上角(哪怕页面滚走了,还是页面左上角),距离触发事件的那一点的x值和y值。
//浏览器兼容问题:IE8及之前不支持
console.log("e.pageX:"+e.pageX+"---e.pageY:"+ e.pageY);
// console.log ( getPagePoint ( e ).pageX, getPagePoint ( e ).pageY );
}
</script>
jQuery中的事件坐标:
与原生的事件坐标的一模一样。
代码段:
<!-- 这里是jQuery的代码 -->
<script>
//入口函数,所有的代码是包含在入口函数里面的
$(function(){
$('#box').on("click",function(e){
//兼容性处理
e = e || window.event;
//输出事件对象观察
console.log(e);
//电脑屏幕的左上角,距离你触发事件的那一点的x值和y值。
console.log("e.screenX:"+e.screenX+"---e.screenY:"+ e.screenY);
//浏览器可视区域,距离触发事件的那一点的x值和y值
console.log("e.clientX:"+e.clientX+"---e.clientY:"+ e.clientY);
//页面的左上角(哪怕页面滚走了,还是页面左上角),距离触发事件的那一点的x值和y值。
//浏览器兼容问题:IE8及之前不支持
console.log("e.pageX:"+e.pageX+"---e.pageY:"+ e.pageY);
})
})
</script>
好了,知道了事件对象以及事件对象的三大坐标,关于事件对象里面的其他内容,敬请期待.