有两种：Javaｓｃｒｉｐｔ事件模型做，DOM2。我还没有对这两次模型很清楚，现在我终于明白，有些人通过互联网。

1。Dom0级事件模型

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


点击我

document.getelementbyid（听到咔哒声）。Onclick =函数（事件）{
警报（事件，目标）；
}



此事件模型将直接在DOM对象上注册事件名。这个代码是登记在P标签的onclick事件，并输出目标点击事件内部函数和事件的发布更为简单，即复制无效的事件函数，如下：

document.getelementbyid（一'_）。Onclick = null；

从这里我们可以知道在做，一个DOM对象只能登记一个相同类型的功能，因为它会覆盖同一类型的多种功能，并在登记前将无效的功能。


VaR点击= document.getelementbyid（听到咔哒声）；
click.onclick =函数（）{
提醒（你点击第一个功能）；
}；
click.onclick =函数（）{
提醒（你点击第二功能）
}


在这段代码中，我们登记为DOM对象两onclick函数，但结果是只有二注册功能，和以前注册的功能覆盖。

两。DOM2级事件模型

1。事件捕获和事件冒泡（捕获、冒泡）

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


如上所示，123表示事件捕获，4567表示冒泡事件：









假设我们点击ID为内部的div，然后事件流是，首先执行捕获阶段：文档HTML主体div（外部）。然后冒泡阶段执行：div（内部）div（外部）体HTML文档。

2。DOM2级注册事件和释放事件

使用addEventListener和removeEventListener登记和溶解在DOM2级事件（IE8和以前的版本不支持），与以往的方法相比，这一功能是DOM对象，可以登记多个同类型的事件，不覆盖的事件，每个事件的顺序和执行功能。

AddEventListener（'event名称'，'事件回调，捕捉/泡沫），例子如下：






VaR点击= document.getelementbyid（内心的）；
Click.addEventListener（听到咔哒声，函数（）{（）{
警报（一人）；
}，假）；
Click.addEventListener（听到咔哒声，函数（）{（）{
（一个）警报；
}，假）；



首先我们需要知道addeventlistenr的第一个参数是事件名。不像做水平，没有。其他第三个参数表示捕获或气泡。true表示捕获事件，false表示冒泡事件。

在这个代码中，我们为内部div注册了两个单击事件函数，结果是浏览器依次执行这两个函数。

下面我们将展示如何使用事件流的发生机制。






VaR点击= document.getelementbyid（内心的）；
无功clickouter = document.getelementbyid（'outer）；
Click.addEventListener（听到咔哒声，函数（）{（）{
警报（内心的节目）；
}，真的）；
Clickouter.addEventListener（听到咔哒声，函数（）{（）{
警报（'outer秀）；
}，真的）；



在这个代码中，我们使用捕获事件，因为内部是嵌套在外部的，所以我们知道当外部被捕获时，我们应该首先捕获这个事件，然后内部可以捕获这个事件，结果是外部首先执行，然后是内部执行。



那么，我是不是要把时间变成泡沫阶段呢


Alickouter.addEventListener（听到咔哒声，函数（）{（）{
警报（'outer秀）；
}，假）；



在这种情况下，外后内执行。以同样的方式，我们改变了两个泡沫阶段的事件的执行时间，然后执行内第一和执行外，还有一个问题，就是如果我们把内注册两个单击事件，一个是在捕获阶段，另一个是在冒泡阶段，也就是说addeventlistenter第三参数设置为false，真的，然后执行的顺序是什么。



VaR点击= document.getelementbyid（内心的）；
无功clickouter = document.getelementbyid（'outer）；
Click.addEventListener（听到咔哒声，函数（）{（）{
警报（捕获显示的）；
}，真的）；
Click.addEventListener（听到咔哒声，函数（）{（）{
警报（‘泡沫节目）；
}，假）；



在这种情况下，第一个是捕获显示，然后是气泡显示，但是这个结果与注册顺序有关，第一个注册是首先执行的，因为我们正在查看事件捕获和事件冒泡示意图，我们发现最后一个特定的DOM对象只有一个。



因此，如果我们为外部和内部注册点击事件，我不希望外部做什么这个时候我们需要使用里面的功能，此功能是用来防止泡沫，其含义是，事件不会继续泡了，所以接下来的注册事件的DOM对象相同类型的不执行。

例如，当我们创建下拉框时，我们点击浏览器的其他位置。We need the options of the drop-down box to hide, then we will use stopPropagation.As follows:



VaR点击= document.getelementbyid（内心的）；
无功clickouter = document.getelementbyid（'outer）；
Click.addEventListener（听到咔哒声，功能（事件）{
警报（内心的节目）；
event.stoppropagation（）；
}，假）；
Clickouter.addEventListener（听到咔哒声，函数（）{（）{
警报（'outer秀）；
}，假）；



正常情况下，我们不把里面的功能，我们应该进行内，然后外实施的，但是当我们把里面的功能在内部功能的事件，事件的内在功能的执行后不会在外部事件的实现功能，也可以理解为内部事件后就消失了，所以它不会在下一个活动功能的实现。



由于没有阻止事件捕获阶段的功能，所以通常将其设置为事件气泡。

以上就是所有的内容，希望能帮到你学习~