javascript中有两种事件模型：DOM0和DOM2。但是对于这两个时间模型，我一直不是很清楚，现在终于通过网上查阅资料了解了一些。

一、DOM0级事件模型

DOM0级事件模型是早期的事件模型，所有浏览器都支持，实现也比较简单。代码如下：

p id=' click ' click me/pscript document . getelementbyid(' click ')。onclick=function(event){ alert(event . target)；}/script是一个直接在dom对象上注册事件名称的事件模型。这段代码在P标签上注册一个onclick事件，并在这个事件函数中输出被点击的目标。通过将null复制到事件函数来取消事件更简单，如下所示：

document . getelementbyid(' click ' _)。onclick=null所以我们可以知道，在dom0中，一个dom对象只能注册一个同类型的函数，因为如果注册了多个同类型的函数，就会发生覆盖，之前注册的函数就会失效。

var click=document . getelementbyid(' click ')；click.onclick=function(){ alert('您单击了第一个函数')；};点击。onclick=function () {alert('您单击了第二个函数')}在这段代码中，我们为dom对象注册了两个onclick函数，但结果是只执行了第二个注册的函数，而之前注册的函数被覆盖。

二.DOM2二级事件模型

1.事件捕捉和气泡(捕捉、气泡)

首先，IE8及以下不支持此事件模型。事件捕获和事件冒泡的机制如下：

如上图所示，123代表事件捕获，4567代表事件冒泡。首先，我们使用以下代码：

div id=' outer ' style=' margin : 100px 0 0 100px；宽度： 200 px；高度： 200 px；背景：红色div id=' inner ' style=' margin-left :20 px；宽度： 50px；高度：50 px；背景：绿色/div/div假设我们点击ID为inner的div，那么此时的事件流就是先执行捕获阶段：document-html-body-div(outer)。然后，执行冒泡阶段：div(内部)-div(外部)-body-html-document。

2.DOM2级注册事件和取消事件

使用addEventListener和removeEventListener注册和消除DOM2级别的事件(IE8和早期版本不支持)。与以前的方法相比，这个函数的优点是一个dom对象可以注册多个相同类型的事件，没有事件覆盖，每个事件函数都会依次执行。

AddEventListener('事件名称'，'事件回调'，'捕获/冒泡')。例子如下：

div id=' outer ' style=' margin : 100px 0 0 100px；宽度： 200 px；高度： 200 px；背景：红色div id=' inner ' style=' margin-left :20 px；宽度： 50px；高度：50 px；背景：绿色/div/div script var click=document . getelementbyid(' inner ')；click.addEventListener('click '，function(){ alert(' click one ')；}，false)；click.addEventListener('click '，function(){ alert(' click two ')；}，false)；/script首先，我们需要知道addEventListenr的第一个参数是事件名称，与DOM0级别的区别在于没有“on”，第三个参数代表capture或冒泡，true代表capture事件，false代表冒泡事件。

在这段代码中，我们为inner的div注册了两个click事件函数，结果是浏览器将依次执行这两个函数。接下来，我们演示如何使用事件流的生成机制。

div id=' outer ' style=' margin : 100px 0 0 100px；宽度： 200 px；高度： 200 px；背景：红色div id=' inner ' style=' margin-left :20 px；宽度： 50px；高度：50 px；背景：绿色/div/div script var click=document . getelementbyid(' inner ')；var click outer=document . getelementbyid(' outer ')；click.addEventListener('click '，function(){ alert('内部显示')；}，真)；click outer . addeventlistener(' click ')，function(){ alert(' outer show ')；}，真)；/script这段代码中，我们使用了capture事件，因为内部是嵌套在外部的，所以我们知道在使用capture的时候，外部应该先捕获这个事件，然后内部才能捕获这个事件。结果是先执行外部，然后执行内部。

于是，我把outer的执行时机改成了冒泡阶段。

alickouter . addeventlistener(' click ')，function(){ alert(' outer show ')；}，false)；在这种情况下，首先执行内部，然后执行外部。同理，如果我们把两个事件的执行时机都改成冒泡阶段，我们还是会先内部执行，再外部执行。那么还有一个问题，就是如果我们用两个click事件注册inner，一个在捕获阶段，一个在冒泡阶段，也就是说addEventListenter的第三个参数分别设置为false和true，那么执行的顺序是什么呢？

脚本var click=document . getelementbyid(' inner ')；var click outer=document . getelementbyid(' outer ')；click.addEventListener('click ')，function(){ alert(' capture show ')；}，真)；click.addEventListener('click '，function(){ alert(' bubble show ')；}，false)；/script在这种情况下，第一个是捕获显示，其次是气泡显示。但是这个结果和注册的顺序有关，会先执行注册。因为我们正在查看事件捕获和事件冒泡的图表，我们发现最终只有一个特定的dom对象。

那么，如果我们为外部和内部都注册了click事件，但我不希望外部执行它们，该怎么办呢？此时，我们需要使用stopPropagation函数，该函数用于防止冒泡。这意味着事件不会继续冒泡，因此注册相同类型事件的dom对象不会被执行。

例如，在制作下拉框时，我们点击浏览器中的其他地方，我们需要隐藏下拉框的选项，所以我们将使用stopPropagation。如下所示：

脚本var click=document . getelementbyid(' inner ')；var click outer=document . getelementbyid(' outer ')；click.addEventListener('click ')，函数(event){ alert('内部显示')；event . stopperpagation()；}，false)；click outer . addeventlistener(' click ')，function(){ alert(' outer show ')；}，false)；当/script正常时，当我们不添加stopPropagation函数时，我们应该先执行内部，然后执行外部。但是，当我们在内部的事件函数中添加stopPropagation函数后，我们将不会执行外部的事件函数。也可以理解为事件冒泡到inner后就消失了，所以我们不会执行下一个事件函数。

由于在事件捕获阶段没有可以阻止事件的功能，因此通常将其设置为事件冒泡。

好了，就这些。希望对大家的学习有帮助~ ~