当前位置: 首页 > 面试题库 >

无法理解addEventListener中的useCapture参数

苏畅
2023-03-14
问题内容

无法理解useCapture属性。定义有:

如果为true,useCapture指示用户希望启动捕获。启动捕获后,所有指定类型的事件都将分派给已注册的侦听器,然后才分派给DOM树中其下的任何EventTarget。在树中冒泡的事件不会触发指定使用捕获的侦听器。

在此代码中,parent事件在child之前触发,因此我无法理解其行为。Document对象的usecapture为true,child
div的usecapture设置为false,并且遵循了useuseture的文档。因此为什么document属性优先于child。

function load() {

  document.addEventListener("click", function() {

    alert("parent event");

  }, true);



  document.getElementById("div1").addEventListener("click", function() {

    alert("child event");

  }, false);

}


<body onload="load()">

  <div id="div1">click me</div>

</body>

问题答案:

可以在两种情况下激活事件:在开始(“捕获”)和结束(“气泡”)。事件按照其定义的顺序执行。假设您定义了4个事件监听器:

window.addEventListener("click", function(){console.log(1)}, false);

window.addEventListener("click", function(){console.log(2)}, true);

window.addEventListener("click", function(){console.log(3)}, false);

window.addEventListener("click", function(){console.log(4)}, true);

日志消息将按以下顺序显示:

  • 2(首先使用定义capture=true
  • 4(使用定义秒capture=true
  • 1(带有的第一个定义的事件capture=false
  • 3(带有的第二个已定义事件capture=false


 类似资料:
  • 本文向大家介绍addEventListener的参数有哪些?相关面试题,主要包含被问及addEventListener的参数有哪些?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: addEventListener(event, function, useCapture) 其中,event指定事件名;function指定要事件触发时执行的函数;useCapture指定事件是否在捕获或冒泡阶段

  • 本文向大家介绍Js on及addEventListener原理用法区别解析,包括了Js on及addEventListener原理用法区别解析的使用技巧和注意事项,需要的朋友参考一下 一.首先介绍两者的用法: 1.on的用法:以onclick为例 第一种: 第二种: 第三种:当函数fn有参数的情况下使用匿名函数来传参: 不能够这样写:错误写法:obj.onclick= fn(param): 因为这

  • @可在Service1和service2中注入 tsconfig.json emitDecoratorMetadata设置为true 在NGModule的提供者部分注册了Service1和Service2 如果有关系的话:我正在构建一个Ionic2RC0应用程序。以下是重要的文件: app.module.ts

  • 问题内容: 我想在“ div”中显示txt文件的内容,所以我用按钮调用函数,但是即使我不按按钮,函数也会触发,这是我的HTML代码: 和我的js代码: 问题答案: 的第二个参数应该是一个函数。您没有传递函数,而是立即调用该函数并传递结果。改成:

  • 问题内容: 相当于Internet Explorer 9中的Element对象? 在Internet Explorer中如何运作? 如果有一个函数等于我不知道,请解释。 任何帮助,将不胜感激。随意提出解决问题的完全不同的方法。 问题答案: 是用于附加事件处理程序的正确DOM方法。 Internet Explorer(版本8之前)使用了另一种方法。 Internet Explorer 9支持正确的方

  • 问题内容: 我正在尝试遍历数组并将每个元素插入表中。据我所知,我的语法是正确的,我直接从Microsoft Azure的文档中获取 了此代码。 当我运行时,它到达然后失败。这是堆栈跟踪。 追溯(最近一次通话最近):在cursor.execute中,文件“ test.py”,第29行(“ INSERT INTO test(序列)值(%s)”,(“ test”))文件“ C:\ Users \ Ale