js事件冒泡

最新推荐文章于 2024-02-01 09:31:05 发布
最新推荐文章于 2024-02-01 09:31:05 发布
阅读量230 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SINGLEP/article/details/79955365
版权 
事件冒泡：事件发生时，事件发生的元素的祖先元素也可以被触发该事件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>li的内容 <span>span内容</span></li>
    </ul>
    <script>
        var ul = document.getElementsByTagName('ul')[0];
        var li = document.getElementsByTagName('li')[0];
        var span = document.getElementsByTagName('span')[0];
        span.onclick = function () {
            console.log('触发span的点击事件！');
            /*触发span的点击事件！
            触发li的点击事件！
            触发ul的点击事件！*/
        };
        li.onclick = function () {
            console.log('触发li的点击事件！');
            /*触发li的点击事件！
             触发ul的点击事件！*/
        };
        ul.onclick = function () {
            console.log('触发ul的点击事件！');
//            触发ul的点击事件！
        }
    </script>
</body>
</html>
恩洛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈JS事件冒泡
aiwu9318的博客
06-16 674
今天要跟大家谈的是事件冒泡，这个事件呢，也是两面性的，有时候给我们带来bug,有时候优点也很明显。我们就一起来看看它的真面目。 首先看看事件冒泡是什么？ 事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 ...
JavaScript 事件冒泡应用实例分析
10-29
在一些传统的小型WEB应用开发过程中，JavaScript通常只是拿来做表单验证而以，所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况，又或者事件冒泡对最终实现效果影响不大，可忽略。
什么是事件冒泡
v_jinfuwu的博客
03-14 8731
什么是事件冒泡 事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件 事件冒泡的三个阶段 1、捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”，捕获阶段不会响应任何事件； 2、目标阶段：在目标节点上触发称为“目标阶段”； 3、冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”； 事件冒泡的原理 事件委托原理就是利用事件冒泡机制把里层所需要响应的事件绑定到外层 ...
事件冒泡（快速理解）
热门推荐
bxz0729的博客
11-23 2万+
先看个例子： 点击box2结果如下： 点击box2结果如下： 方法二：判断event.target 和 event.currentTarget是否相等 event.target：指真正触发事件的元素 event.currentTarget：指绑定了事件监听的元素（触发事件元素的父级元素） 这时判断两者相等，则执行相应的处理函数；当事件冒泡到上一级时，event.currentTarget变成 了上一级元素，这时候判断二者不相等，则就不作响应处理逻辑。 修改第一个例子： ...
JS事件冒泡捕获事件代理
最新发布
qq_44741577的博客
02-01 772
事件机制是指当特定的操作(如点击按钮、移动鼠标等)在DOM元素上发生时，会触发相应的事件。JavaScript通过监听事件并绑定对应的处理函数来响应用户的操作，对用户的交互做出响应。
js基础（二）：事件（事件冒泡、事件捕获、事件对象、事件委托）
ThisEqualThis的博客
11-11 2508
事件 javascript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。 事件流 事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。 事件冒泡 IE的事件流叫做事件冒泡（event bubbling）,即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，...
解释事件冒泡和事件捕获的原理，并说明它们之间的区别与使用场景
weixin_53291256的博客
07-13 3747
事件冒泡和事件捕获是什么？能做什么？看完这篇你就明白了
JavaScript 事件冒泡简介及应用
12-10
一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个...
详解javascript事件冒泡
10-23
主要向大家介绍了javascript事件冒泡，以及javascript阻止事件冒泡的实现代码，感兴趣的朋友可以参考一下
JS 事件冒泡 示例代码
10-29
JS 事件冒泡 示例代码，大家可以参考下。
javascript事件冒泡简单示例
10-22
主要介绍了javascript事件冒泡原因、显示效果及阻止冒泡的方法,需要的朋友可以参考下
彻底弄懂JS的事件冒泡和事件捕获
jeanFlower的博客
01-17 942
在学校，听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样，只依稀记得IE使用的是事件冒泡，其他浏览器则是事件捕获。当时的我，把它当成IE浏览器兼容问题，所以没有深究（IE8以下版本的浏览器已基本退出市场）。工作至今，虽然多次遇到该类问题，但均未深究，始终一知半解，遇到了全TM靠猜（选A不行就选B呗）。今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了。 先上结论：他们是描述事件触发
js事件冒泡详解和使用场景
Youyzq的博客
11-14 2244
事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件。
深入理解JavaScript的事件冒泡与事件捕获
金鳞踏雨
03-09 4451
JavaScript中提供了很多操作DOM的API。事件冒泡和事件捕获是指浏览器中处理DOM元素上事件的两种不同方式。事件冒泡和事件捕获都是JavaScript事件模型中的一部分，可以用来处理事件。对于这个问题，在实际开发中，并不是非常重要，因为在工作中我们基本上不会直接操作DOM，为了高效一般都是通过Vue、React这些框架，所以关于事件处理程序的一些坑直接就被避免了！！！但是，多了解一点是没有坏处的，毕竟面试会考~
JavaScript中的事件冒泡和事件捕获机制
tyxjolin的专栏
05-06 2368
如果我们在inner元素上绑定一个点击事件，那么当inner元素被点击时，事件会从inner元素开始冒泡，依次传递到middle元素和outer元素，最终传递到整个文档的根节点。比如我们在一个嵌套的HTML结构中，点击最里层的子元素，事件会从子元素开始，依次向上层父元素传递，直到传递到整个文档的根节点。例如，我们可以在点击某个元素时，使用事件捕获机制来停止事件的传播，从而避免其他元素对事件的处理干扰。与事件冒泡不同的是，在事件捕获过程中，每个节点都有机会处理这个事件，直到事件传递到最内层的元素。
Javascript的事件冒泡
Night_nigh的博客
03-27 1万+
今天呢，来讲一个知识点，叫做Javascript的事件冒泡（Bubble），什么叫事件冒泡，就是指某件事件的向上传导，当后代元素被触发，其祖先元素也会被同样触发，这就是事件冒泡，光说不行，还得先演示一下。 首先，我们先创建一个“HTML”文档，在头部部分写上一个内联样式“style”，给“body”一个背景颜色，在“body”部分写上两个“div”给他们写上一个“ID”名（取名随意） 再创建两个不同大小的方块也给他们一个背景颜色（这里大小 颜色随意），就像这样： 然后就开始“...
js 冒泡
weixin_42581003的博客
01-06 1068
JavaScript 中的冒泡指的是事件冒泡，也就是事件从里到外地传播。 比如，当你点击一个按钮时，这个事件会从按钮开始，然后逐层向上传播到它所在的容器，再到容器的容器，依次类推，直到传播到整个页面。 在 JavaScript 中，可以通过在事件处理函数中调用 event.stopPropagation() 来阻止事件的冒泡。 例如： document.querySelector('#some-b...
JS——事件冒泡与阻止事件冒泡
Bonsoir777的博客
08-25 3033
本文主要介绍JS中有关事件流的相关知识点
js事件冒泡，阻止事件冒泡
05-11
JavaScript事件冒泡是指事件从最具体的元素开始，逐级向上传播到最不具体的元素。如果不阻止事件冒泡，事件会在元素层次结构中所有祖先元素中都被触发。可以使用`event.stopPropagation()`方法来阻止事件冒泡。 示例代码如下： ```javascript document.getElementById("child").addEventListener("click", function(event){ alert("child clicked"); event.stopPropagation(); }); document.getElementById("parent").addEventListener("click", function(){ alert("parent clicked"); }); ``` 在上面的代码中，当单击“child”元素时，只会触发“child clicked”弹出框，而不会触发“parent clicked”弹出框。这是因为`event.stopPropagation()`方法阻止了事件冒泡。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值