首先我们先介绍一下什么是风暴：
干扰是指某个物体在某个时刻做了某件事。 例如：点击暴风雨，当我点击按钮并触发暴风雨的点击时，浏览器就会做出相应的响应。
这场动荡有三个因素：
1.事件来源：dom对象
2. 事件类型：详情请参考W3C的Javas Disturbance Reference Guide
3.事件响应：通常是一个函数，称为风暴处理函数
原生JS注册干扰的句型：
//原生注册事件语法：
document.getElementById("box").onclick = function() {
//点击盒子输出111
console.log('111');
}
jQuery也遵守风暴三要素jquery坐标，其注册句型为：
//入口函数，所有的代码是包含在入口函数里面的
$(function(){
$('#box').on("click",function(){
/* 具体语法：
$(选择器).on(事件类型，事件处理函数)
*/
})
})
二：Storm对象
哪些是风暴的对象？
A、当暴风雨触发时（如点击暴风雨），浏览器会记录触发时的个人信息。 比如你在那个位置点击，点击的时候直接用键盘左键点击。 或者同时点击键盘左右键（sao操作）等。浏览器将所有这些信息存储在一个变量中。 该变量的数据类型是对象，因此称为storm对象。
B. 如何获取storm对象：只需要向storm函数传递一个参数，可以是eventjquery坐标，也可以是.
<!-- 这里是原生代码 -->
<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 的 Storm 对象：
**现在介绍每次都主角：事件的三大坐标**
原生 JS 的三个家族：
屏幕（screenX和screenY）坐标：从屏幕左上角到我的触发点的距离
client（clientX和clientY）坐标：浏览器可视区域左上角到触发点的距离
注意：client的值会在页面滚动时发生变化，其引用对象是页面的可见区域。
page（pageX和pageY）坐标：无论浏览器是否滚动，都是距浏览器左上角的距离。
注：与页面不滚动时客户端坐标对应的值一致。
偏移（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 中的 Storm 坐标：
和原来的风暴坐标一模一样。
代码片段：
<!-- 这里是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>
现在发一张图帮助大家理解：（此图由博客园大鳄鱼提供）
发表评论