addEventListener 的三个参数

addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click");第二个参数表示要接收事件处理的函数;第三个参数为 useCapture,本文就讲解它。

<div id="outDiv">
  <div id="middleDiv">
    <div id="inDiv">请在此点击鼠标。</div>
  </div>
</div>

<div id="info"></div>
 
var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");
 
outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);

上述是我们测试的代码,根据 info 的显示来确定触发的顺序,有三个 addEventListener,而 useCapture 可选值为 true 和 false,所以 2*2*2,可以得出 8 段不同的程序。

  • 全为 false 时,触发顺序为:inDiv、middleDiv、outDiv;
  • 全为 true 时,触发顺序为:outDiv、middleDiv、inDiv;
  • outDiv 为 true,其他为 false 时,触发顺序为:outDiv、inDiv、middleDiv;
  • middleDiv 为 true,其他为 false 时,触发顺序为:middleDiv、inDiv、outDiv;
  • ……

最终得出如下结论:

  • true 的触发顺序总是在 false 之前;
  • 如果多个均为 true,则外层的触发先于内层;
  • 如果多个均为 false,则内层的触发先于外层。
时间: 2024-10-24 11:36:29

addEventListener 的三个参数的相关文章

js中addEventListener第三个参数涉及到的事件捕获与冒泡

js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型,比如点击(click).触摸(touchstart), 第二个参数就是事件函数, 比如我给一个button添加alert函数. window.onload=function(){ document.getElementById("hello").addEventListener("

JavaScript addEventListener 第三个参数作用

DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数. 这两个方法都需要三个参数,分别为: 事件名称(String).要触发的事件处理函数(Function).指定事件处理函数的时期或阶段(boolean). <!--打开新的浏览器窗口--> <button id="New" onclick="">点击弹窗</button> <!--关闭新的浏览器窗口--

addListener添加事件监听器,第三个参数useCapture (Boolean) 的作用

addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文就讲解它. <div id="outDiv"> <div id="middleDiv"> <div id="inDiv">请在此点击鼠标.</div> </div> </div>

[转]addEventListener的第三个参数

如果要把HTML元素的事件与某个函数绑定起来,可以有下面三种方法,以最常见的“点击”事件为例. 方法一: 直接在对应的HTML元素标签上绑定函数 ? 1 <button id='submit' onclick='onClickFn()'>Click Me!</button> 方法二: 在JavaScript代码里面指定元素的“onclick”方法 ? 1 2 3 var btn = document.getElementById('submit'); btn.onclick = o

js-addEventListener()第三个参数useCapture

概述: 第3个参数叫做useCapture,是一個boolean值,就是true or false .如果送出true的話就是瀏覽器會使用Capture方式,false的話是Bubbling,只有在特定狀況下才會有影響,通常建議是false,而會有影響的情形是目標元素(target element)有祖先元素(ancestor element),而且也有同樣的事件對應函數 html片段 <div id="div1" style="background: blue;wid

三个案例带你看懂LayoutInflater中inflate方法两个参数和三个参数的区别

版权声明:本文为sang原创文章,转载请注明出处. 目录(?)[+] 关于inflate参数问题,我想很多人多多少少都了解一点,网上也有很多关于这方面介绍的文章,但是枯燥的理论或者翻译让很多小伙伴看完之后还是一脸懵逼,so,我今天想通过三个案例来让小伙伴彻底的搞清楚这个东东.本篇博客我们不讲源码,只看使用.源码的解读会在下一篇博文中带来. inflate方法从大范围来看,分两种,三个参数的构造方法和两个参数的构造方法.在这两类中又有细分,OK,那我们就把各种情况都来演示一遍. 1.三个参数的in

public View getView(int position, View convertView, final ViewGroup parent)三个参数的意思

最近看到有人在问这三个参数的含义,其实帮助已经很详细的介绍了这三个参数,看来还是要好好学学英语了,不然连解释都看不懂. /**     * Get a View that displays the data at the specified position in the data set. You can either     * create a View manually or inflate it from an XML layout file. When the View is inf

Html.RenderPartial使用三个参数

Html.RenderPartial("usercontrolurl", model, ViewDataDictionary) 当使用三个参数时可以这样使用: var data = new ViewDataDictionary(); data.Add("key", "value"); Html.RenderPartial("usercontrolurl", model, data); 然后在用户控件处使用:ViewData[&

异步任务类AnsycTask的三个参数

异步任务类AnsycTask为抽象类,其三个泛型参数为:Params,Progress 和 Result,这三个参数类型由用户设定,可以为任何类型,分别对应如下三个方法: 1.doInBackground(Params...):该方法运行在子线程中,处理一些耗时的任务,如网络和数据库的操作.一般,Params 类型可以设为 Void: 2.onProgressUpdate(Progress...):子线程中的publishProgress()方法被调用后,UI 线程将调用onProgressUp