在各种浏览器中存在三种事件模型:原始事件模型,DOM2事件模型,IE事件模型。

其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持.

原始事件模型：

在原始事件模型中(也有说DOM0级)，事件发生后没有传播的概念，没有事件流。北大青鸟http://www.kmbdqn.com/认为事件发生，处理，结束，就这么简单。监听函数只是元素的一个属性值，通过指定元素的属性值来绑定监听器。书写方式有两种：

(1)HTML代码中指定属性值：

(2)在js代码中指定属性值：document.getElementsByTagName(‘input’)[0].onclick=func

优点：所有浏览器都兼容

缺点：

1.逻辑与显示没有分离

2.相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的

3.无法通过事件的冒泡、委托等机制。

DOM2事件模型

此模型是W3C制定的标准模型。W3C制定的事件模型中，一次事件的发生包含三个过程：

(1)事件捕获阶段。事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。

(2)事件处理阶段。事件到达目标元素,执行目标元素的事件处理函数.

(3)事件冒泡阶段。事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册了该事件的监听函数，有则执行。

所有的事件类型都会经历"事件捕获阶段"但是只有部分事件会经历"事件冒泡阶段"阶段,例如submit事件就不会被冒泡。

e.target与e.currentTarget是干什么的?

e.target获取当前实际触发事件节点，e.currentTarget获取获取当前监听节点。

11111

$('div').on('click',function(e){console.log(e.currentTarget)console.log(e.target)})

如果点击span的输出：

li对象

span对象

点击li的非span区域，输出

li对象

li对象

preventDefault与stopPropagation是干什么的

javascript【事件驱动】机制

所【谓事件驱动】就是对浏览器事件做出响应

简单讲，就是发生了什么事，再对发生了的这件事做出回应

例如

我用javascript监听了keydown事件，为这个事件写了一个回应函数，那么当keydown事件发生后，javascript就会执行你的回应函数，作为对这个事件的【回应】

继续说你的需求，那么写出来代码差不多是这个样子

<style>

img {

    width:40px

    height:40px

    position:absolute

}

</style>

<img src="1.jpg" id="i" style="left:0pxtop:0px">

<script>

var t = document.getElementById('i')

t.left = 0

t.top = 0

document.onkeydown = move

document.onkeyup = move

function move(e){

    var k = e.keyCode || e.which

    switch(k){

        case 37:

            t.left = t.left

        break

        case 38:

            t.top = t.top - 10

        break

        case 39:

            t.left = t.left + 10

        break

        case 40:

            t.top = t.top + 10

        break

    }

    return t.style.left = t.left + 'px', t.style.top = t.top + 'px'

}

</script>

js事件是为了实现用户交互，比如当用户鼠标点击或者键盘输入时，浏览器会监听截获并且通知js做出反馈执行相应的函数，实现交互。

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怎么区分出点击的是鼠标左键还是右键？

---