*addEventListener(" ", ,true(or false))中第三个元素选择true和false的区别

最新推荐文章于 2024-04-26 15:38:04 发布
最新推荐文章于 2024-04-26 15:38:04 发布
阅读量964 收藏
点赞数
分类专栏： 自学感悟
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TimyChen/article/details/50506553
版权 
<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>


<p>该实例演示了在添加事件监听时选择true和false的不同。</p>
<div id="div">
  <p id="p">选择false，程序由里到外进行</p>
</div>
<br>
<div id="div2">
  <p id="p2">选择true，程序由外到里进行</p>
</div>
<script>
document.getElementById("p").addEventListener("click", function() {div
    alert("你点击了 p 元素!");
}, false);


document.getElementById("div").addEventListener("click", function() {
    alert("你点击了 div 元素!");
}, false);


document.getElementById("p2").addEventListener("click", function() {
    alert("你点击了 p元素!");
}, true);


document.getElementById("mydiv2").addEventListener("click", function() {
    alert("你点击了 div元素!");
}, true);
</script>


</body>
</html>

TimyChen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
addEventListener（type, fn , true/false）绑定事件第三个参数作用以及利用事件的冒泡，实现事件委托
Slice-dd
05-02 1万+
addEventListener( type , fn , true/false )
js addEventListener(eventype,function,false/true); false true的区别
weixin_30488313的博客
10-30 247
第三个参数false true的区别 true在捕获节点的时候就触发事件 ，由外到内 false在冒泡的时候才触发事件，由内到外 html: <divid="out"> <p>最外面</p> <divid="middle"> 　　　　在中间 <d...
addEventListener()方法中的参数，以及作用
最新发布
zhang20040217的博客
04-26 985
方法还可以接收第三个参数，即一个布尔值，表示是否在捕获阶段处理事件。然而，大多数情况下，这个参数被设置为。方法是 JavaScript 中用于向指定元素添加事件监听器的方法。然而，这在实际开发中并不常见，因为大多数情况下，我们更关心冒泡阶段的事件处理。这个函数在按钮被点击时会被调用，并弹出一个警告框。在这个例子中，我们首先获取了一个按钮元素，然后定义了一个处理函数。如果你想在捕获阶段处理事件，你可以将第三个参数设置为。函数添加到按钮的 'click' 事件上。，表示在冒泡阶段处理事件。
js响应事件的阶段，捕获阶段，冒泡阶段
五月西瓜的专栏
05-18 3610
当鼠标点击所看到的的按钮时，其实发生了一系列的事件传递，可以想象一下，button实际上是被body“包裹”起来的，body是被html“包裹”起来的，html是被document“包裹”起来的，document是被window“包裹”起来的。所以，在你的鼠标点下去的时候，最先获得这个点击的是最外面的window，然后经过一系列传递才会传到最后的目标button，当传到button的时候，这个事件
addEventListener之第三个参数 true 和 false 实例展示
SunDaDa9的博客
12-25 2444
addEventListener 第三个参数默认是 false false为冒泡事件 true为捕获事件，下面看实例 代码这样实现的话是不是应该先打印子元素child 在打印parent呢，下面看代码实现效果。 首先打印了parent父级元素 ，然后在打印了 child 子元素 ，但是代码的子元素事件为false是冒泡事件，冒泡事件是从最里面的慢慢冒泡到最顶部 ，打印结果不应该是先打印...
js中监听注册事件addEventListener的使用
爬楼梯的前端小白的博客
01-25 964
js中监听注册事件addEventListener的使用
addEventListener()第三个参数useCapture (Boolean)详细解析
09-04
3. **useCapture**：第三个参数是一个可选的布尔值，默认为 `false`。如果设置为 `true`，事件处理程序将在捕获阶段执行；如果为 `false`，则在冒泡阶段执行。捕获阶段从最外层的祖先元素开始，向下到目标元素；冒泡...
浅谈addEventListener和attachEvent的区别
09-02
在JavaScript中，处理DOM事件监听有两个主要的方法：`addEventListener` 和 `attachEvent`。这两个方法在功能上相似，但存在一些关键的区别，特别是在浏览器兼容性和事件处理方式上。 `addEventListener` 是W3C标准...
全面了解addEventListener和on的区别
09-02
第三个参数是一个布尔值，如果为 `true`，则事件处理程序会在捕获阶段执行；如果为 `false`（默认），则在冒泡阶段执行。例如： ```javascript // 捕获阶段执行 box.addEventListener("click", function() { ...
addEventListener和attachEvent二者绑定的执行函数中的this不相同
09-05
在JavaScript中，`addEventListener`和`attachEvent`都是用于向元素添加事件监听器的方法，但它们之间存在一些关键差异，特别是在处理`this`关键字时。`addEventListener`是W3C标准的一部分，被大多数现代浏览器支持...
扫盲-----addEventlistener()方法，事件监听(一)
热门推荐
yangchunshang的博客
06-04 5万+
一、扫盲事件起因    时间：2018年6月1日周五下午，原本我以为我已经把当前的bug改好，应该没啥问题了，坐等下班公司聚餐（开心）突然，隔壁同组大哥，哎。。。。cp,你看看，你这个首页报了很多错哎。我的第一反应就是，不可能，怎么会有错误呢，我明明都自己测过好几次了。我一看，我去，果然。。。。首页报的错误都是在我写的组件里面出现的同一个错误。我的天。。。。。当页面缩放时，渲染页面提示,某方法不存...
js中dom事件中 addEventListenr()函数的第三个参数 true和false的区别
业余前端的职业经历
01-04 1320
初学者 我们用的很多都是 dom0级别事件 常见的如下 dom.onclick=function(){ //dom指的是 常用的一种dom元素 如： div p Button，a等等 } 但是这个在工作中是很忌讳使用的 因为dom0级事件 在后面如果在定义一个的话 就会把之前的覆盖掉 就像是一个全局变量在多人开发的时候限制很大的 所以工作中常用的是 dom2级别事...
true or false
爱码喵的博客
08-24 802
h
使用原生js,addEventListener,给每个li绑定一个click事件,输出他们的顺序
z2h
02-17 4202
点击事件在 循环后产生，此时i为4， 产生闭包 解决方案使用立即执行函数、 html部分 &lt;ul&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;a&lt;/li&gt; &lt;/ul&
javaScript中addEventListener()用法
weixin_47464657的博客
09-12 993
addEventListener() 方法用于向指定元素添加事件 测试 ``` document.querySelector('#test').addEventListener('click',()=>{ console.log('test click') },false) ``` document.addEventListener(event, function, useCapture) 第一个参数参数event 必须。字符串，指定事件名。 注意:  不要使用 “on” 前缀。 例如，使用 “
测试绑定多个addEventListener
客栈
07-17 1407
test 123 321 321 var a=document.getElementById('bar'); a.addEventListener('click',function () { console.log("1") },true); a.addEventListener('click',function () { console.log("2") },fa
事件监听Event listener
chonger_feifei的博客
03-08 1644
事件监听Event listener
JS中addEventListener的用法
Allenyhy的博客
09-30 2万+
事件模型 这是一个完整的事件流： 事件捕获----处于目标----事件冒泡 注意：事件捕获由于浏览器兼容问题用的比较少   事件处理程序（addEventListener） 格式为：element.addEventListener(type, handle, false); type: 事件触发类型，如click,keypress等等，下面我们详细的讲讲事件类型！！ handle...
js addEventListener的true和fales什么意思
11-01
在JavaScript中，addEventListener()方法用于向指定元素添加事件句柄。...在引用中的代码中，第三个参数为false，表示事件在冒泡阶段进行处理。而在引用中的代码中，第三个参数为true，表示事件在捕获阶段进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值