1. event事件

概念： Event 对象代表事件的状态，当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。）的对象，这个对象就是event（事件对象）。

2. Event事件对象的使用

通过函数传参数的形式来使用

2.1 event常用的属性和方法

2.1.1 type属性

type属性用来获得当前触发事件的类型，是只读属性

2.1.2 bubnles属性

bubbles属性用来获得当前触发事件类型是否冒泡，如果当前事件类型支持冒泡则返回true，否则返回false

注意： bubbles属性是该事件是否冒泡。和事件处理机制无关！！！

2.1.3 eventPhase属性

事件传导至当前节点时出于什么时的状态。

1：事件处于捕获状态

2：事件处于真正的触发者

3: 事件处于冒泡状态

备注：两张图的不同在于图一的事件监听函数开启了事件捕获状态

2.1.4 target属性和currentTarfet

target：事件真正的触发者

currentTarget: 返回事件的监听者（触发的事件绑定到了那个节点，就返回谁）

总结：事件冒泡会影响到上一级元素的target属性，但是currenTarget只会受到改区间的事件监听者的控制

2.1.5 button属性

button 返回事件被触发时，那个鼠标按钮被点击。

e.button= 0|1|2

0：鼠标左键

1：鼠标中键

2：鼠标右键

从左到右

2.1.6 key和keyCode

key指的是我们按了键盘上的哪个键

keyCode返回的是keydown和keyup事件发生的时候按键的代码，以及keypress事件的Unicode字符（ASCll码值）；（firefox2不支持event.keyCode,可以用event.which替代）

2.1.7 获取当前坐标的属性

event事件获取当前坐标
clientX	鼠标相对于浏览器左上角x轴的坐标；不随滚动条滚动而改变
client	Y 鼠标相对于浏览器左上角y轴的坐标；不随滚动条滚动而改变
pageX	鼠标相对于浏览器文档左上角x轴的坐标；随滚动条滚动而改变，定点为文档的左上角，被卷进去也是默认按照被卷去的文档定位
pageY	鼠标相对于浏览器文档左上角y轴的坐标；随滚动条滚动而改变
screenX	鼠标相对于显示器屏幕左上角x轴的坐标
screenY	鼠标相对于显示器屏幕左上角y轴的坐标
offsetX	鼠标相对于事件源左上角X轴的坐标
offsetY	鼠标相对于事件源左上角Y轴的坐标

获取当前事件的相关属性

offsetLeft	获取事件源左边到Y轴零点的坐标
offsetTop	获取事件源上方到X轴零点的坐标
offsetWidth	水平方向 width + 左右padding + 左右border-width
offsetHeight	垂直方向 height + 上下padding + 上下border-width
clientWidth	水平方向 width + 左右padding
clientHeight	垂直方向 height + 上下padding
scrollWidth	元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth
scrollHeight	元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight

代码展示：

    document.getElementById("father").addEventListener("click",function(e){console.log("father:"+"我的宽度是300px,高度是300px,我的padding是50px,我的border是10px")console.log("clieX:"+e.clientX+" clieY:"+e.clientY+"<br>");console.log("pageX:"+e.pageX+"pageY:"+e.pageY+"<br>");console.log("screenX:"+e.screenX+" offsetY:"+e.screenY+"<br>");console.log("offsetX:"+e.offsetX+" offsetY:"+e.offsetY+"<br>");console.log("关于元素偏移量的计算")console.log("fatherLeft:"+this.offsetLeft+" fatherTop:"+this.offsetTop+"<br>");console.log("fatherclientWidth:"+this.clientWidth+" fatherclientHeight:"+this.clientHeight+"<br>");console.log("fatheroffsetWidth:"+this.offsetWidth+" fatheroffsetHeight:"+this.offsetHeight+"<br>");console.log("fatherscrollWidth:"+this.scrollWidth+" fatherscrollHeight:"+this.scrollHeight+"<br>");})}</script>
</head>
<body><div id="father">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<!-- <div id="son"></div> --></div>

运行结果：

3. event中常用的方法

stopPropgation()：阻止冒泡

preventDefault()：默认阻止行为

  <script>window.onload = function(){document.getElementById("a").addEventListener("click",function(e){        e.preventDefault()})}</script><a href="http://baidu.com " id="a">百度</a> //阻止默认链接跳转

4. 滚轮事件

onmousewheel就是鼠标滚动事件，mouse鼠标，wheel就是轮子。

event参数最最重要的事就event.wheelDelta属性，表示滚动的方向。这是浏览器的规定：

鼠标往上滚， 120

鼠标往下滚， -120

5. 文档事件

5.1 加载成功\失败事件：load\error

load事件指的是：节点加载成功时自动发生回调事件

error事件值得是：节点加载失败时自动发生的回调事件

5.2 当DOM加载完成时触发事件：DOMContentLoaded

DOMContentLoaded事件和load事件的区别是触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。

DOM文档加载的步骤为:
解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。 //DOMContentLoaded执行
加载图片等外部文件。
页面加载完毕。 //load执行

5.3 文档加载状态判断事件：readystatechange

众所周知，document节点中拥有一个属性叫做readyState。其拥有三个可能值：

loading：加载DOM中文件

interactive：加载外部资源

complete：加载完成

而readystatechange事件正是在这个状态发生改变时调用的事件。

js中event事件对象相关推荐

js中的事件对象event （获取元素的,x,y坐标）
event的使用获取元素的,x,y坐标如图所示当鼠标放在上面那个框上时获取其坐标,并且在下面框中显示其实需要使用到鼠标移动事件 onmousemove event 事件对象中封装了当前事项相关 ...
js中获取事件对象的方法小结
代码如下: var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式. 1,第一种添加事件的方式,直接在htm ...
js之event事件对象
...........仅对以前所学做复习记录使用......... 当一个事件发生的时候,这个事件的有关详细信息会临时保存到一个指定的地方,这个地方就是event事件对象. 每一个事件都有一个even ...
【js】event(事件对象)详解
1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...
js中event事件
event.target.nodeName //获取事件触发元素标签name event.target.id //获取事件触发元素id event.target.className //获取事件触发元 ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
如何正确使用Node.js中的事件
by Usama Ashraf 通过Usama Ashraf 如何正确使用Node.js中的事件 (How to use events in Node.js the right way) Before ...
java 中鼠标事件_[Java教程]js中鼠标事件总结
[Java教程]js中鼠标事件总结 0 2017-07-11 00:00:19 js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblc ...
JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...

js中event事件对象