JavaScript中的事件模型有哪些

<h2>一、事件与事件流</h2>
<code>javascript</code>中的事件，可以理解就是在<code>HTML</code>文档或者浏览器中发生的一种交互操作，使得网页具备互动性， 常见的有加载事件、鼠标事件、自定义事件等
由于<code>DOM</code>是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流的概念
事件流都会经历三个阶段：
<ul>
<li>事件捕获阶段(capture phase)</li>
<li>处于目标阶段(target phase)</li>
<li>
事件冒泡阶段(bubbling phase)
<img src="https://static.ecool.fun//article/cda1838d-f839-4588-9787-bbaa0bec65ea.png" alt="" />
</li>
</ul>
事件冒泡是一种从下往上的传播方式，由最具体的元素（触发节点）然后逐渐向上传播到最不具体的那个节点，也就是<code>DOM</code>中最高层的父节点
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Event Bubbling&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;button id="clickMe"&gt;Click Me&lt;/button&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
然后，我们给<code>button</code>和它的父元素，加入点击事件
<pre><code class="language-js">var button = document.getElementById('clickMe');

button.onclick = function() {
 console.log('1.Button');
};
document.body.onclick = function() {
 console.log('2.body');
};
document.onclick = function() {
 console.log('3.document');
};
window.onclick = function() {
 console.log('4.window');
};</code></pre>
点击按钮，输出如下
<pre><code class="language-js">1.button
2.body
3.document
4.window</code></pre>
点击事件首先在<code>button</code>元素上发生，然后逐级向上传播
事件捕获与事件冒泡相反，事件最开始由不太具体的节点最早接受事件, 而最具体的节点（触发节点）最后接受事件
<h2>二、事件模型</h2>
事件模型可以分为三种：
<ul>
<li>原始事件模型（DOM0级）</li>
<li>标准事件模型（DOM2级）</li>
<li>IE事件模型（基本不用）</li>
</ul>
<h3>原始事件模型</h3>
事件绑定监听函数比较简单, 有两种方式：
<ul>
<li>HTML代码中直接绑定</li>
</ul>
<pre><code class="language-js">&lt;input type="button" onclick="fun()"&gt;</code></pre>
<ul>
<li>通过<code>JS</code>代码绑定</li>
</ul>
<pre><code class="language-js">var btn = document.getElementById('.btn');
btn.onclick = fun;</code></pre>
<h4>特性</h4>
<ul>
<li>绑定速度快</li>
</ul>
<code>DOM0</code>级事件具有很好的跨浏览器优势，会以最快的速度绑定，但由于绑定速度太快，可能页面还未完全加载出来，以至于事件可能无法正常运行
<ul>
<li>
只支持冒泡，不支持捕获
</li>
<li>
同一个类型的事件只能绑定一次
</li>
</ul>
<pre><code class="language-js">&lt;input type="button" id="btn" onclick="fun1()"&gt;

var btn = document.getElementById('.btn');
btn.onclick = fun2;</code></pre>
如上，当希望为同一个元素绑定多个同类型事件的时候（上面的这个<code>btn</code>元素绑定2个点击事件），是不被允许的，后绑定的事件会覆盖之前的事件
删除 <code>DOM0</code> 级事件处理程序只要将对应事件属性置为<code>null</code>即可
<pre><code class="language-js">btn.onclick = null;</code></pre>
<h3>标准事件模型</h3>
在该事件模型中，一次事件共有三个过程:
<ul>
<li>事件捕获阶段：事件从<code>document</code>一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行</li>
<li>事件处理阶段：事件到达目标元素, 触发目标元素的监听函数</li>
<li>事件冒泡阶段：事件从目标元素冒泡到<code>document</code>, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行</li>
</ul>
事件绑定监听函数的方式如下:
<pre><code>addEventListener(eventType, handler, useCapture)</code></pre>
事件移除监听函数的方式如下:
<pre><code>removeEventListener(eventType, handler, useCapture)</code></pre>
参数如下：
<ul>
<li><code>eventType</code>指定事件类型(不要加on)</li>
<li><code>handler</code>是事件处理函数</li>
<li><code>useCapture</code>是一个<code>boolean</code>用于指定是否在捕获阶段进行处理，一般设置为<code>false</code>与IE浏览器保持一致</li>
</ul>
举个例子：
<pre><code class="language-js">var btn = document.getElementById('.btn');
btn.addEventListener(‘click’, showMessage, false);
btn.removeEventListener(‘click’, showMessage, false);</code></pre>
<h4>特性</h4>
<ul>
<li>可以在一个<code>DOM</code>元素上绑定多个事件处理器，各自并不会冲突</li>
</ul>
<pre><code class="language-js">btn.addEventListener(‘click’, showMessage1, false);
btn.addEventListener(‘click’, showMessage2, false);
btn.addEventListener(‘click’, showMessage3, false);</code></pre>
<ul>
<li>执行时机</li>
</ul>
当第三个参数(<code>useCapture</code>)设置为<code>true</code>就在捕获过程中执行，反之在冒泡过程中执行处理函数
下面举个例子：
<pre><code class="language-js">&lt;div id='div'&gt;
 &lt;p id='p'&gt;
 &lt;span id='span'&gt;Click Me!&lt;/span&gt;
 &lt;/p &gt;
&lt;/div&gt;</code></pre>
设置点击事件
<pre><code class="language-js">var div = document.getElementById('div');
var p = document.getElementById('p');

function onClickFn (event) {
    var tagName = event.currentTarget.tagName;
    var phase = event.eventPhase;
    console.log(tagName, phase);
}

div.addEventListener('click', onClickFn, false);
p.addEventListener('click', onClickFn, false);</code></pre>
上述使用了<code>eventPhase</code>，返回一个代表当前执行阶段的整数值。1为捕获阶段、2为事件对象触发阶段、3为冒泡阶段
点击<code>Click Me!</code>，输出如下
<pre><code class="language-js">P 3
DIV 3</code></pre>
可以看到，<code>p</code>和<code>div</code>都是在冒泡阶段响应了事件，由于冒泡的特性，裹在里层的<code>p</code>率先做出响应
如果把第三个参数都改为<code>true</code>
<pre><code class="language-js">div.addEventListener('click', onClickFn, true);
p.addEventListener('click', onClickFn, true);</code></pre>
输出如下
<pre><code class="language-js">DIV 1
P 1</code></pre>
两者都是在捕获阶段响应事件，所以<code>div</code>比<code>p</code>标签先做出响应
<h3>IE事件模型</h3>
IE事件模型共有两个过程:
<ul>
<li>事件处理阶段：事件到达目标元素, 触发目标元素的监听函数。</li>
<li>事件冒泡阶段：事件从目标元素冒泡到<code>document</code>, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行</li>
</ul>
事件绑定监听函数的方式如下:
<pre><code>attachEvent(eventType, handler)</code></pre>
事件移除监听函数的方式如下:
<pre><code>detachEvent(eventType, handler)</code></pre>
举个例子：
<pre><code class="language-js">var btn = document.getElementById('.btn');
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);</code></pre>

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识