js的事件类型有很多，我们先来大概总结一下常用的JS事件

click点击事件、mousedown鼠标按下事件、mousemove鼠标移动事件、mouseup鼠标抬起事件

contextmenu右键出菜单事件、mouseenter/mouseover鼠标进入事件、mouserleave/mouseout鼠标离开事件

可通过事件对象的button属性来区分是左键\滚轮\右键，分别对应值 0 / 1 / 2

DOM3规定：click事件只能监听左键；只能通过mousedown和mouseup来判断鼠标键

keydown某键被按下时、keyup被松开时、keypress按下并且松开时

触发顺序：先 keydown，然后keypress，最后keyup

keydown和keypress的区别：

input：文本变化时触发

change：聚焦或失去焦点时判断状态是否改变，发生改变是触发change事件

focus：聚焦时触发

blur：失去焦点时触发

利用focus和blur可模拟placeholder

scroll：滚动条滚动时

load：页面加载完触发

abort：图像的加载失败

dblclick：双击事件

error：当加载图像和文档时发生错误

resize：窗口或者框架被重新调整大小

select：文本被选中时

reset：点击重置按钮时

submit：点击提交按钮时

接着看如何给DOM元素绑定事件处理函数

兼容性很好

但是根据js的特点，这种赋值的方式肯定会被后面的值覆盖。因此这种方式绑定事件处理函数规则是：同一个元素同一个事件只能绑定一个处理函数。等同于第一种写在行间。

IE8及以下不兼容

通过addEventListener绑定的方式，同个元素的同一个事件可以绑定多个处理函数，不会被覆盖。

attachEvent跟addEventListener 基本一致，也是同一个元素的同一个事件可以绑定多个处理函数，不会被覆盖。不同的是attachEvent可以绑定的函数是可以重复的，即即使绑定同一个函数都不会不覆盖。

以上几种事件绑定方式里面的this指向有点区别：

也比较好理解，IE独有的特殊一点指向window，其他都指向dom元素本身

封装一个兼容性的方法，用于绑定事件：

有的时候我们希望解除事件处理函数，那怎么办呢？

其实解除事件处理函数也对应有办法方法：

1. ele.onxxx = false / ' ' / null

2. ele.removeEventListener(type,fnName,false)

3. ele.attachEvent('on' + type,fnName)

值得注意的是：若干绑定的事件处理函数是匿名函数，则无法解除绑定！

不知道有没有发现，在上面绑定事件处理函数的时候，处理函数有个参数e或者叫event，其实是一个事件对象

事件对象就是处理函数里面的一个参数，说白了就是浏览器打包好的一个对象自动传入到处理函数的第一个参数中。

为了兼容IE一般这么写： e = e || window.event

事件对象会有个属性target，这个target叫事件源对象，记录可事件具体在谁身上触发的那个源头

同样IE上事件源对象是e.srcElement，谷歌两个都有

所以为了兼容IE一般获取事件源对象是这么来写：

当浏览器发展到第四代时(IE4及Netscape4)，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？想象画在一张纸上的一组同心圆。如果把手指放在圆心上，那么手指指向的不是一个圆，而是纸上的所有圆

两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上，甚至也单击了整个页面

但有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。事件冒泡和事件捕获称为两种事件处理模型

IE的事件流叫做事件冒泡(event bubbling)， 事件冒泡是结构上（非视觉上）嵌套的函数存在事件冒泡功能，即同一事件自子元素冒泡向父元素（自底向上）

[注意]所有现代浏览器都支持事件冒泡

但在具体实现在还是有一些差别。IE9、Firefox、Chrome、Safari将事件一直冒泡到window对象

而事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前就捕获它

即事件捕获是指： 结构上（非视觉上）嵌套的元素存在事件捕获功能，即同一事件自父元素冒泡向子元素（自顶向下）

注意IE上没有事件捕获，Chrome和新版本的Firefox等都实现了

一个dom元素的一个事件类型绑定的一个处理函数只能存在一种事件模型，要么事件冒泡要么事件捕获。正常的通过addEventListener(type,fn,false)绑定事件时，最后一个参数默认是false表示的是，事件冒泡模型。如果改成true，立即变成事件捕获模型

如果一个dom元素的一个事件类型绑定了两个处理函数，两个函数的事件处理模型一个是事件冒泡一个是事件捕获，触发顺序是先捕获，后冒泡。

focus、blur、change、submit、reset、select等事件类型不冒泡

可以 利用事件冒泡和事件源对象可以叫事件委托给父元素

利用事件冒泡和事件源对象进行处理

优点：

性能好，不需要循环所有元素一个个绑定事件

灵活，当有其他新的子元素时，不需要重新绑定事件。

有的时候，我们不希望有冒泡功能，那我们怎么取消事件冒泡呢？

封装一个都好使的取消冒泡函数

有的时候我们需要阻止一些浏览器默认的事件

比如：表单提交、a链接跳转、右键菜单等

有几种方式：

参考资料：

DOM事件流的三个阶段

深入理解DOM事件机制系列第一篇——事件流

JS事件汇总

JS事件模型

事件1（上）

事件1（下）

DOM级别与DOM事件

DOM事件机制解惑

事件模型

JavaScript 事件委托详解

JavaScript 事件的学与记：stopPropagation 和 stopImmediatePropagation

event.target和event.currentTarget的区别

js怎么区分出点击的是鼠标左键还是右键？

先提两个关键词，方便你查找更详细的分析：1）事件冒泡 2）事件捕获

然后借用一下网上的一个图：

如图：有三个圆，好比dom中的三个div，当你点击了绿色圆的同时，会有两个连带事件：

点击了蓝圆

点击了粉圆

那么当你这三个圆（div）都绑定了点击事件时，该怎么触发呢，同时触发？显然不是，这是就涉及到一开始给你的两个关键词了。

事件捕获：js会顺着文档流顺序由外往内，依次触发事件。即从DOM树的根到叶子，粉->蓝->绿

事件冒泡：js会逆着文档流顺序由内至外，一次触发事件。即从DOM树的叶子到根，绿->蓝->粉

补充一点：多数时候推荐事件冒泡，因为大多数主流浏览器都兼容两种事件，但一开始ie是不支持事件捕获的，后来ie是否支持最近没有具体了解，应该是可以设置，有需要可以百度一下，本人小菜，以上回答如有错误还请指出，谢谢。

首先，事件对象 event 是一个对象，包含着跟事件有关的所有信息，包括触发事件的 dom 以及 每种事件的一些特征。当dom操作触发某个事件时，会产生事件对象 event， 当事件被触发时产生，事件执行完毕时销毁。

获取鼠标在那个标签上 e.target

2.1. 事件捕获: 当时事件被触发的时候，系统会从 window 开始 依次向下遍历，遍历的过程中，遇到没有触发的相同事件便触发。

(window =>document =>html =>body =>祖先元素 =>父元素 =>目标元素)

2.2 事件触发: 直到找到触发这个事件的元素，触发元素绑定的事件方法

2.3 事件冒泡: 触发目标事件之后，然后会一层一层向上遍历，遍历的过程中，遇到没有触发的相同事件便触发。

直到返回 window 结束 这整个过程叫做事件流。

事件捕获 和 事件冒泡 同一事件流 只能有一个生效，JS中默认执行事件冒泡 (false)。

3.1 Dom 0级

写法： ele.on事件名 = function(){}

特点： js 与 html 完全分离 便于封装

缺点:同一个DOM对象 同时间只能绑定一个 同事件

    也就是说 一个 dom对象 只能执行一个事件处理函数

    如果给 这个事件 绑定了多个事件处理函数, 则执行最后一个事件处理函数

3.2 Dom 2级(事件监听)

写法：

    ele.addEventListener("事件类型",事件处理函数,bool)

    事件处理函数可以是： 匿名函数、 命名函数、 对象

    bool: 布尔值 (只有true 和 false) 不写默认为 false

    true： 触发 事件捕获   false：触发事件冒泡

特点:

    1.DOM 2级不会与DOM 0级事件冲突 同时存在时两个都执行

    2.可以绑定多个事件函数 不会起冲突

    Dom2级 可以删除命名函数 事件移除 removeEventListener

注意： 事件名中没有 on， on是DOM0级的写法

4.1 鼠标事件

 1. 单机事件 click

 2. 双击事件 dblclick

 3. 右键事件 contextmenu   默认事件：右击打开默认菜单栏

 4. 移入事件 mouseenter

 5. 移出事件 mouseoutmouseover

 6. 移动事件 mouseenter mouseleave

 7. 按下事件 mousedown

 8. 释放事件 mouseup

 9. 滚轮事件 mousewheel   e.wheelDelta>0 向上滑 <0 向下滑

4.2 键盘事件

 1. 键盘按下事件 只要按下就一直触发 keydown 获取键码： e.keyCode

 2. 键盘抬起事件keyup

4.3 UI事件(窗口事件)

 1. 资源加载完毕 load

 2. 窗口大小发生改变 resize

 3. 窗口滚动条 scroll

 4. 资源加载完毕 error

4.4 表单事件

 1. 获取焦点focus

 2. 失去焦点blur

 3. 正在输入input

 4. 内容发生改变 change

1.获取鼠标坐标：

 1. 在浏览器的可视窗口的坐标 --- e.clientX / e.clientY

 2. 在标签内的坐标 ----- e.offsetX / e.offsetY

 3. 在屏幕内的坐标 ----- e.screenX / e. screenY

 4. 在文档中内的坐标 -- e.pageX / e.pageY

2. 阻止默认事件：