在javaScript中，采用异步事件驱动编程模型，在这种模型下，浏览器，文档对象，元素对象等发生一些动作的时候，我们可以迅速知道。在对事件模型进行深入探讨之前，我们先来认识些有关的概念，避免初学者到时候看得云里雾里。
1.事件类型：是一个用来说明发生什么类型事件的字符串，由于事件类型是一个字符串，因此实际上有时会把事件类型叫做事件名字，比如：click, keyup…
2.事件目标：就是这个事件在谁身上触发的，常见的有Window, Document和Element对象
3.事件处理函数：就是触发某个事件后，会发生什么操作，这个操作就是事件处理函数
4.事件对象：就是事件源对象，是与特定事件相关且包含该事件详细信息的对象，通过这个对象的target属性可以来获取我们的事件目标。
什么是事件模型？
在javaScript中，一共有三种事件模型：
1.DOM0级模型，这种模型可以直接绑定在html结构上，或者是绑定在dom元素的某些和事件相关的属性上，也叫做句柄绑定（本质就是赋值操作），所以不能同时绑定多个事件处理函数。
2.IE事件模型，在这种模型中，一次事件的触发可以分为两个阶段，分别是事件处理阶段和事件冒泡阶段。事件处理阶段就是触发这个事件之后，对应的事件处理函数被执行；然后是事件冒泡阶段，这个阶段，事件会从html结构的内部向外部传递到document,如果在传递的过程中，有元素绑定了这个事件的事件处理函数，就会执行事件处理函数。这边模型对事件的监听是通过attachEvent来实现的。
3.DOM2级模型，在这种模式中，一次事件的触发会有三个阶段，分别是事件捕获阶段，事件处理阶段和事件冒泡阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和IE事件模型相同。这种模式是通过addEventListener来实现的，这个函数的第三个参数，可以用来阶段是否进行事件捕获，默认值是false, 即默认是冒泡。所以，在对应同一个事件的同一个事件处理函数要不就事件冒泡，要不就是事件捕获。
IE事件模型和DOM2级事件模型可以同时绑定多个事件处理函数。
事件委托：
事件委托本质是利用是事件冒泡的原理。把应该在子元素身上触发的事件处理函数委托给父元素来触发。
我们来看个例子：
一个ul里面包裹了10li, 当我们点某个li是，就打印这个li里的内容。请问，你会怎么实现呢？
我们可以直接给每一个li绑定一个事件处理函数，使得我们点击每一个li都会触发对应的事件处理函数。但是，这样做高效吗？不高效吧。从开发效率上看，我们给每一个li绑定一个事件处理函数，是不是就很麻烦了呀，可能你会想要使用for循环来进行绑定，这是可以的，但是使用for循环也是会消耗我们的内容，消耗我们的cpu的吧。因为计算就占用我们的cpu，而且每一个li都绑定一个函数，函数的存储得用到我们得堆内存吧。所以，这种方法不是高效的。
我们之前说，事件是可以冒泡的，所以我们可以使用这个特点，使我们的事件处理函数绑定在父元素。然后，我们点击子元素时，事件就会冒泡到父元素，触发父元素绑定的事件处理函数。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
<script>
var oUl = document.getElementsByTagName('ul')[0];
oUl.addEventListener('click', function(e) {
console.log(e.target.innerHTML);
})
</script>
</html>
这篇文章主要时针对事件模型进行讲解，如果有疏漏的地方，麻烦指出，谢谢。
如果喜欢，可以关注我，点个赞。
1146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
