JS addEventListener 冒泡

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量186 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingge_nihao/article/details/106517226
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<style>

body,html,.container{

    height: 100%;

    padding:0;

    margin: 0;

}

 

div 

{

    background-color: coral;

    border: 1px solid;

    padding: 50px;

    margin-bottom: 20px;

    width: 300px;

}

 

</style>

<body>

    

    <p>该实例演示了在添加事件监听时冒泡与捕获阶段的不同。</p>

    <div id="myDiv">

        <p id="myP">点击该段落， 我是冒泡</p>

    </div>

    <div id="myDiv2">

        <p id="myP2">点击该段落， 我是捕获</p>

    </div>

 

</body>

 

<script >

var myP = document.getElementById('myP');

var myP = document.getElementById('myP');

var myDiv = document.getElementById('myDiv');

var myDiv2 = document.getElementById('myDiv2');

// true是在捕获阶段，false是在冒泡阶段，没写默认为冒泡 // 冒泡是先内后外，捕获是先外后内

myP.addEventListener('click',() => {

    console.log('冒泡 子元素');

});

 

myDiv.addEventListener('click',() => {

    console.log('冒泡 父元素');

});

 

// 子元素  父元素

myP2.addEventListener('click',() =>{

    console.log('捕获 子元素');

},true);

myDiv2.addEventListener('click',() =>{

    console.log('捕获 父元素');

},true);

// 父元素 子元素

 

 

//如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。

//以下实例演示了跨浏览器的解决方法：

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

</script>

 

</html>

昵称已被占用了了了了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js如何取消事件冒泡
10-26
在JavaScript中，事件冒泡（Event Bubbling）是一种事件处理机制，它描述的是事件从最深的DOM节点开始，然后逐级向上层节点传播事件的过程。例如，如果你点击一个按钮，该点击事件首先会在按钮元素上触发，然后依次...
JavaScript阻止事件冒泡示例分享
10-24
JavaScript中的事件冒泡是事件处理的一个重要概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。这种机制允许事件在一个元素及其所有...
JS基础-18-addEventListener和冒泡
HZ~的博客
08-03 1205
绑定事件的两种方式/DOM事件的级别 方式一：onclick element.onclick = function () { } 举例： <body> <button>点我</button> <script> var btn = document.getElementsByTagName("button")[0]; //这种事件绑定的方法容易被层叠。 btn.onclick = function () {
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 1501
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
addEventListener与事件捕获、事件冒泡
TTYLXWT的博客
06-16 2510
addEventListener与事件捕获、事件冒泡： addEventListener的基本用法 项目开发中，javascript和html的解耦变得至关重要，我们被推荐使用事件动 态绑定的方式来处理按钮的事件。W3C为我们提供了addEventListener()函数用来为指定的 dom元素动态绑定事件。这个函数有三个参数： type:用来设置事件类型，例如click。 listener:用来设置监听事件的函数，及type类型的事件发生后执行的函数。 大部分情况下，确切的说是我们绑定事...
JS addEventListener()方法
weixin_72271537的博客
10-24 352
2. 可以添加不同的事件类型 --例如：click(点击),mouseover（鼠标移入）,mouseout（鼠标移出）,resize（窗口重置）第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；语法：addEventListener(event,function,useCapture);第一个参数event：指事件的类型（如’click’,‘mousedown’），this 的值会变成 window 对象的引用而不是触发事件的元素。3. 使用匿名函数传递参数。
addEventListener 的事件冒泡
weixin_34144848的博客
04-09 189
语法 target.addEventListener(type, listener, useCapture); target 文档节点、document、window 或 XMLHttpRequest。 type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。 listener 实现了 EventListener 接口或...
【javaScript】addEventListener第三个参数的使用和事件冒泡和捕获机制
Umbrella_Um的博客
07-25 1042
前言 续上一章将的addEventListener和attachEvent比较的第四个不同点续讲… 事件冒泡 概念： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。） 这就话怎么理解 >>> 看代码 var ...
js addeventlistener
Charles1938229的博客
02-17 2581
JavaScript是一种广泛应用于网页开发的脚本语言，具有灵活的语法和强大的功能。在网页中，我们经常需要处理用户的交互操作，例如点击按钮、输入文本等，而addEventListener方法就是用来处理这些事件的。
addEventListener 默认是冒泡
AAAXiaoApple的博客
10-14 480
addEventListener 默认是冒泡 addEventListener第三个参数默认为 false 代表执行事件冒泡行为。 当为 true 时执行事件捕获行为。 为 元素添加点击事件。 当用户点击按钮时，在 id=“demo” 的 元素上输出 “Hello World” : document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").inner
js addEventListener事件捕获与冒泡,第三个参数详解,阻止事件传播
一袋米要扛几楼_
01-22 9340
结论 element.addEventListener(event, function[, useCapture]) event:事件名称,如click function:指定要事件触发时执行的函数,可以传入事件参数 useCapture:可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 默认false:在冒泡阶段执行指定事件 true:在捕获阶段执行事件 event.stopPropagat...
JS_js阻止事件冒泡的方法
小歪博客
04-26 1542
阻止方法有三种： 1、event.stopPropagation(); document.querySelector("#login").addEventListener("click",(event)=>{ event.stopPropagation(); }) 2、return false; document.querySelector("#login").addEventListener("click",(event)=>{ return false; }) 3、event.pre
Js on及addEventListener原理用法区别解析
10-15
JavaScript中的事件处理方式有两种主要的形式：`on`属性和`addEventListener`方法。这两种方式在处理事件时有着不同的特性和用法，理解它们的区别和应用场景对于编写高效、可维护的JavaScript代码至关重要。 首先，...
JavaScript事件冒泡与事件捕获实例分析
10-18
依次输出：div、p4、事件处理程序的执行顺序在JavaScript中，事件处理程序的执行顺序取决于事件的传播方式（冒泡或捕获）以及它们是如何被添加到元素上的。如果同时使用了事件捕获和冒泡，那么捕获阶段的事件处理...
document.addEventListener使用介绍
09-04
`document.addEventListener` 是JavaScript中的一个核心方法，用于向指定元素添加事件监听器。这个方法是DOM（Document Object Model）事件处理的一部分，它允许我们在网页的文档对象上绑定各种类型的事件，如点击、...
JS 返回上一页及返回上一页并刷新
热门推荐
jingge_nihao的博客
11-07 1万+
window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是：window.history.back(); //刷新当前页 window.location.reload(); window.location.go(-1); //刷新上一页 在当前界面修改数据，返回上一页后需要刷新数据 wind...
js判断字符串是否包含http
jingge_nihao的博客
03-05 5933
1 正则 var str=new RegExp("http"); str.test("httpadfsd");//test方法返回值为(true或者false) 2 indexOf(); var newStr=str.indexOf("http"); if(newStr==0){ 　　　　console.log("字符串是以http开头的！") 　　} 　　if(new...
js 时间戳转换成时间
jingge_nihao的博客
05-02 1123
function formatDate(now) {  var year=now.getFullYear();  var month=now.getMonth()+1;  var date=now.getDate();  var hour=now.getHours();  var minute=now.getMinutes();  var second=now.getSeconds();  ret...
addEventListener阻止事件冒泡
06-07
addEventListener方法是JavaScript中用于为DOM元素添加事件监听器的方法，它可以帮助你控制事件的传播过程。当事件冒泡（也称事件流）发生时，从最具体的元素开始，逐级向上直至文档对象（Window）触发。如果你想在某个特定层级阻止事件继续向上冒泡，可以在事件监听器中使用`event.stopPropagation()`。 `event.stopPropagation()`方法的作用是停止事件在其当前捕获阶段的传播，这意味着后续的父元素将不会接收到这个事件，即使它们也绑定了相同的事件处理程序。这样，你就可以在子元素上执行操作，而不会影响到整个父级的逻辑。 例如： ```javascript element.addEventListener('click', function(event) { // 如果不想让点击事件继续冒泡到父元素 event.stopPropagation(); // 在这里执行自己的处理代码 }, false); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值