标签：

一、事件概述 　　事件是什么？

　　　　在我们的生活中，城市接触到事件这样一个观点，它凡是通过描述产生这件事的时间、所在、人物，产生了什么来进行归纳综合。

　　　　同样的在javascript也有这样的一个的对象------事件。

　　　　页面上产生的事件：鼠标移动、点击、滚动等等。

　　　　事件描述了页面上产生的工作，凡是它有以下三个要素构成：

　　　　　　　　事件源：触发事件的元素

　　　　　　　　事件类型：事件的触发方法(例如鼠标点击或键盘点击)

　　　　　　　　事件措置惩罚惩罚措施（事件监听器）：事件触发后要执行的代码(函数形式)

　　　　Javascript 使我们可以动态的去操纵一个页面。当我们在与浏览器交互的时候，浏览器就会触发各类事件。

　　　　好比我们打开某一个网页的时候，浏览器需要加载完成这个网页，就会触发一个加载事件；当我们点击页面中的某一个“处所”，浏览器就会在阿谁“处所”触发一个点击事件。

二、事件流 　　什么是事件流？

　　　　DOM(文档东西模型)布局是一个树型布局，当一个HTML元素孕育产生一个事件时，该事件会在元素结点与根结点之间的路径流传，路径所颠末的结点城市收到该事件，这个流传过程、这种问题的措置惩罚惩罚方法可以称之为事件流即事件的流传机制。对付事件流IE跟FF有差此外解释。

　　　　IE下的解决方案称之为：冒泡型事件，

　　　　而FF下称之为：捕获型事件。

　　　　冒泡型事件是从低而上的触发机制，而捕获型事件则是从上到下的触发机制。

　　　　　　　事件冒泡：事件开始时由最具体的元素（文档中嵌套条理最深的阿谁节点）接收，然后逐级向上流传到较为不具体的结点（文档），即沿着DOM树向上流传。

　　　　　　　事件捕获：不太具体的节点（document）应该更早接收到事件，最具体的节点最后接收到事件，即沿着DOM树向下流传。

 

　　　　DOM同时撑持这两种事件模型：捕获型事件和冒泡型事件，并且把事件流分为了三个阶段：

　　　　　　　事件捕获阶段，处于方针阶段，事件冒泡阶段。

　　　　处于方针阶段时(中间阶段)，事件的先后和声明挨次有关，一般不怎么存眷前两个阶段，默认冒泡阶段dom0。

 

三、事件措置惩罚惩罚要领 　　事件的绑定、添加监听器

　　　　要使用事件，首先我们需要绑定事件。

　　DOM0级供给了两种事件绑定方案：

　　　　事件绑定在html标签上：

<input type="button" value="test">　　//onclick="doit()",内嵌式，鼠标点击，挪用函数 doit <script> function doit() {alert("html绑定");} </script>

注：将js与html合并在一起，没有实现疏散。

　　　　函数绑定：

<input id=‘inputBtn‘ type="button" value="test"> <script> let btn = document.getElementById(‘inputBtn’); btn.onclick = function () {alert(‘函数绑定‘);} //可以通过btn.onclick = null;的方法 删除 </script>

注：兼容性很好，但是只能绑定一个监听措置惩罚惩罚函数。

　　　　DOM2级新增了一种事件绑定方案：

　　　　　　通过要领addEventListener()：

<input id=‘inputBtn‘ type="button" value="test"> <script> let btn = document.getElementById(‘inputBtn’); btn.addEventListener(‘click‘, function () {alert(‘addEventListener要领‘);}); </script>

注：兼容性稍差，但是可以绑定多个事件函数。

　　事件的移除

　　DOM0级：

　　　　targetElement.onclick = null;

　　DOM2级：

　　　　targetElement.removeEventListener(type, listener);

注意：事件函数listener需要生存才可以移除，因为需要传入该函数的引用

四、事件类型 　　页面事件

　　　　　　onload 一张页面或一幅图像完成加载时触发的事件

　　　　　　onresize 窗口或框架被从头调解巨细时触发的事件。

　　　　　　onscroll 当文档被滚动时触发的事件

　　　　　　　　

　　鼠标事件

　　　　　　onclick　　　　　　　　　 当鼠标点击某个元素时触发的事件

　　　　　　ondblclick　　　　　　　　当鼠标双击某个元素时触发的事件

　　　　　　onmousedown　　　　　　当鼠标按钮被按下时触发的事件

　　　　　　onmouseup　　　　　　　 当鼠标按键被松开时触发的事件

　　　　　　onmousemove　　　　　　当鼠标在鼠标事件某个元素上移动时触发的事件

　　　　　　onmouseenter　　　　　　 当鼠标指针移动到元素上时触发的事件

　　　　　　onmouseleave　　　　　　当鼠标指针移出元素时触发的事件

　　　　　　onmou搜索引擎优化ver　　　　　　  鼠标指针移动到元素上时触发的事件

　　　　　　onmou搜索引擎优化ut　　　　　　    当鼠标指针移出元素时触发的事件

注意1：事件mousemove会在满足条件的情况下不停触发；

注意2： onmouseenter和onmouseleave在进入元素时触发，其他时候不会触发；

　　　　onmou搜索引擎优化ver和onmou搜索引擎优化ut不光会在进入元素时触发，在元素的子元素上也会触发。

　　键盘事件

　　　　　　onkeydown 当键盘按键被按下时触发的事件。

　　　　　　onkeypress 当键盘按键被按下并松开时触发的事件。

　　　　　　onkeyup 当键盘按键被松开时触发的事件。

注意1：事件触发挨次是down，press，up；

注意2：此中down和up任意的按键都能触发，press只有字符输入时会触发；

　　　　也就是说，，shift，delete这些特殊按键不会触发press事件;

　　　　同时down和up并不能知道按下键的具体内容（好比巨细写），而press就存眷内容。

　　表单事件

　　focus　　获得焦点时触发

　　blur　　　掉去焦点时触发

　　reset　　重置表单时触发

　　submit　　提交表单时触发

　　change　　input框掉去焦点，判断value是否转变，转变时触发

　　input　　输入内容时，value转变了就触发

五、事件东西

　　事件中的详细信息，事件内部的一些措置惩罚惩罚要领。

　　IE 8 及之前版本 IE 浏览器：event 事件东西被供给在window东西中。

　　所以有了兼容性的写法：