JavaScript addEventListener()事件监听方法
<p><strong>addEventListener()</strong>方法将事件处理程序附加到指定的元素。</p><p><strong>addEventListener()</strong>方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。</p>
<p>您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。</p>
<p>您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。</p>
<p><strong>addEventListener()</strong>方法可以更容易地控制事件对冒泡的反应。</p>
<p>使用<strong>addEventListener()</strong>方法时，JavaScript与HTML标记分离，以提高可读性，</p>
<p>并允许您添加事件侦听器，即使您不控制HTML标记也是如此。</p>
<p>您可以使用<strong>removeEventListener()</strong>方法轻松删除事件侦听器。</p>
<div><strong>语法：element.addEventListener(event, function, useCapture);</strong></div>
<div>
<ul>
<li>第一个参数是事件的类型（如“ click”或“ mousedown”）。</li>
<li>第二个参数是我们想要在事件发生时调用的函数。</li>
<li>第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。</li>
</ul>
<blockquote class="jc-info layui-elem-quote">请注意，您不要为事件使用“on”前缀; 用“ click”而不是“ onclick”。</blockquote>
</div>
<div>
<div class="cnblogs_code">
<pre>document.getElementById("myBtn").addEventListener("click", displayDate);</pre>
</div>
<h3 id="titleDir1" class="layui-timeline-title">向元素添加事件处理程序</h3>
<div>当用户点击某个元素时提醒“Hello World！” ：</div>
<div>
<div class="cnblogs_code">
<pre>element.addEventListener("click", <span style="color: rgba(0, 0, 255, 1)">function</span>(){ alert("Hello World!"); });</pre>
</div>
<p>您还可以在外部定义函数，然后把函数名当参数传：</p>
<div class="cnblogs_code">
<pre>element.addEventListener("click"<span style="color: rgba(0, 0, 0, 1)">, myFunction);
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> myFunction() {
alert (</span>"Hello World!"<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<h3 id="titleDir2" class="layui-timeline-title">将许多事件处理程序添加到同一元素</h3>
<div>addEventListener()方法允许您向同一元素添加许多事件，而不会覆盖现有事件</div>
</div>
<div>
<div class="cnblogs_code">
<pre>element.addEventListener("click"<span style="color: rgba(0, 0, 0, 1)">, myFunction);
element.addEventListener(</span>"click"<span style="color: rgba(0, 0, 0, 1)">, mySecondFunction);
element.addEventListener(</span>"mouseover"<span style="color: rgba(0, 0, 0, 1)">, myFunction);
element.addEventListener(</span>"mouseout", myThirdFunction);</pre>
</div>
<h3 id="titleDir3" class="layui-timeline-title">将事件处理程序添加到window对象</h3>
<div>addEventListener()方法允许您在任何HTML DOM对象上添加事件侦听器，例如HTML元素，HTML文档，window对象或支持事件的其他对象，</div>
<div>如<strong>xmlHttpRequest</strong>对象。</div>
<div>添加在用户调整窗口大小时触发的事件侦听器：</div>
<div>
<div class="cnblogs_code">
<pre>window.addEventListener("resize", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
document.getElementById(</span>"demo").innerHTML =<span style="color: rgba(0, 0, 0, 1)"> sometext;
});</span></pre>
</div>
<p>传递参数值时，使用“匿名函数”，使用以下参数调用指定的函数：</p>
<div class="cnblogs_code">
<pre>element.addEventListener("click", <span style="color: rgba(0, 0, 255, 1)">function</span>(){ myFunction(p1, p2); });</pre>
</div>
<h3 id="titleDir5" class="layui-timeline-title">事件冒泡或事件捕获？</h3>
<div>HTML DOM中有两种事件传播方式，即冒泡和捕获。</div>
<div>事件传播是一种在事件发生时定义元素顺序的方法。</div>
<div>如果<div>元素中有<p>元素，并且用户单击<p>元素，应该首先处理哪个元素的“click”事件？</div>
<div>在冒泡中，首先处理内部元素的事件，然后处理外部：首先处理<p>元素的click事件，然后处理<div>元素的click事件。</div>
<div>在捕获最外层元素时，首先处理事件然后处理内部：首先处理<div>元素的click事件，然后处理<p>元素的click事件。</div>
<div>使用addEventListener()方法，您可以使用“useCapture”参数指定传播类型：</div>
<div>默认值为false，将使用冒泡传播，当值设置为true时，事件使用捕获传播。</div>
<div>
<div class="cnblogs_code">
<pre>document.getElementById("myP").addEventListener("click", myFunction, <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">);
document.getElementById(</span>"myDiv").addEventListener("click", myFunction, <span style="color: rgba(0, 0, 255, 1)">true</span>);</pre>
</div>
<h3 id="titleDir6" class="layui-timeline-title">removeEventListener()方法</h3>
<div>
<div class="cnblogs_code">
<pre>element.removeEventListener("mousemove", myFunction);</pre>
</div>
<p><strong>注</strong>：该addEventListener()和removeEventListener()方法并不在IE 8和更早版本的支持。</p>
<p>但是，对于这些特定的浏览器版本，您可以使用attachEvent()方法将事件处理程序附加到元素，以及detachEvent()删除它的方法，解决方案</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x = document.getElementById("myBtn"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (x.addEventListener) { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 对于所有主流浏览器，IE 8及更早版本除外</span>
x.addEventListener("click"<span style="color: rgba(0, 0, 0, 1)">, myFunction);
} </span><span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (x.attachEvent) { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 适用于IE 8及更早版本</span>
x.attachEvent("onclick"<span style="color: rgba(0, 0, 0, 1)">, myFunction);
}</span></pre>
</div>
<p>HTML DOM事件对象参考</p>
</div>
</div>
</div>
</div>
<div> </div>
<div> </div>
</div><br><br>
来源：https://www.cnblogs.com/jc2182/p/11307165.html
頁:
[1]