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怎么区分出点击的是鼠标左键还是右键？
一、MVC
MVC模式的意思是，软件可以分成三个部分。
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存
各部分之间的通信方式如下。
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈
所有通信都是单向的。
二、互动模式
接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。
另一种是直接通过controller接受指令。
三、实例：Backbone
实际项目往往采用更灵活的方式，以 Backbone.js 为例。
1. 用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
2. 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
3. Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器） 。
四、MVP
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
1. 各部分之间的通信，都是双向的。
2. View 与 Model 不发生联系，都通过 Presenter 传递。
3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
五、MVVM
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。 Angular 和 Ember 都采用这种模式。
1、js工厂模式
说明：
在函数中定义对象，并定义对象的各种属性，虽然属性可以为方法，但是建议将属性为方法的属性定义到函数之外，这样可以避免重复创建该方法。
引用该对象的时候，这里使用的是 var x = Parent()而不是 var x = new object()因为后者可能会出现很多问题（前者也成为工厂经典方式，后者称之为混合工厂方式），不推荐使用new的方式使用该对象。
在函数的最后返回该对象。
不推荐使用这种方式创建对象，但应该了解。
2、js构造函数模式
说明：
与工厂方式相比，使用构造函数方式创建对象无需在函数内部创建对象，而使用this指代，并而函数无需明确return。
同工厂模式一样，虽然属性的值可以为方法，仍建议将该方法定义在函数之外。
同样的，不推荐使用这种方式创建对象，但仍需了解。
3、js原型模式
说明：
函数中不对属性进行定义。
利用prototype属性对属性进行定义。
同样的额，不推荐使用这样的方式创建对象。
4、构造函数+原型的js混合模式（推荐）
说明：
该模式是指混合搭配使用构造函数和原型方式。
将所有的属性，不是方法的定义在函数中（构造函数的方式），将所有属性值为方法的利用prototype在函数之外定义（原型方式）。
推荐使用这样的方式创建对象，这样有好处。
5、构造函数+原型的动态原型模式（推荐）
说明：
动态原型方式可以理解为混合构造函数，原型方式的一个特例。
该模式中，属性为方法的属性直接在函数中进行了定义，但是因为
if(typeof Parent.lev == "undefined"){
Parent.prototype.lev = function(){
return this.name
}
Parent.lev = true
}
从而保证创建该对象的实例时，属性的方法不会被重复的创建。
