javascript事件冒泡,事件捕获和事件委托详解

 更新时间:2021年11月10日 08:40:04   作者:Patty_2000  
这篇文章主要介绍了javaScript 事件冒泡,事件捕获和事件委托的相关资料,需要的朋友可以参考下,希望能够给你带来帮助

1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,focus事件, load事件

2、事件委托:事件捕获恰好与事件冒泡相反,它从顶层祖先元素开始,直到事件触发元素。

js事件捕获一般通过DOM2事件模型addEventListener来实现的:

target.addEventListener(type, listener, useCapture)

第三个参数默认设置为false,表示在冒泡阶段出发事件,设置为true时表示在捕获阶段触发,一般我们工作中似乎很少使用事件捕获。但还是要理解一下

<div id="box">
    <div id="middle">
        <div id="inner"></div>
    </div>
</div>
<script>
//事件捕获
window.onload=function(){
    let box=document.getElementById("box");
    let middle=document.getElementById("middle");
    let inner=document.getElementById("inner");
    box.addEventListener("click",function(){console.log("box")},true);
    middle.addEventListener("click",function(){console.log("middle")},true);
    inner.addEventListener("click",function(){console.log("inner")},true);
}
</script>
点击inner,控制台依次输出:box,middle,inner

阻止事件冒泡

平时会用到大量的事件冒泡事件,但是可能我们在某个子级标签不需要传递事件给父级,这时候就需要阻止它事件的冒泡。

一般,使用stopPropagation来阻止事件的冒泡,IE中使用cancleBuble=true,stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。

//阻止事件冒泡
let btna = document.getElementById('btn');
btna.onclick=function(e){
    window.event? window.event.cancelBubble = true : e.stopPropagation();
 };

3、事件委托:事件委托又可以叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

益处:减少dom操作可以提高网页性能,当一个页面的父级元素和很多子级元素都需要操作同一件事件的时候,我们不可能每个元素都去给它绑定一个事件

<ul id="getNum">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
let ptclick = document.getElementById('getNum');
let lilist = ptclick.querySelectorAll('li');
for(let i=0;i<lilist.length;i++){
    lilist[i].index = i;
};
ptclick.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(e.target.index);
};
</script>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • js获取dom的高度和宽度(可见区域及部分等等)

    js获取dom的高度和宽度(可见区域及部分等等)

    网页可见区域宽或高、网页正文全文宽或高以及网页正文部分左或右,详细请看下文,希望对大家有所帮助
    2013-06-06
  • 微信小程序实现文章关注功能详细流程

    微信小程序实现文章关注功能详细流程

    在社交小程序里有个常见的场景是关注功能,我们本篇以关注已经发布的文章为例,讲解一下关注功能如何实现
    2022-08-08
  • JS简单实现表格排序功能示例

    JS简单实现表格排序功能示例

    这篇文章主要介绍了JS简单实现表格排序功能,涉及javascript针对页面元素的遍历、判断与排序相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • JavaScript验证API的使用

    JavaScript验证API的使用

    本文主要介绍了JavaScript验证API的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 基于Next.js实现在线Excel的详细代码

    基于Next.js实现在线Excel的详细代码

    Next.js是一款React 开发框架,它可以帮助我们构建 React 应用程序。作为一个轻量级React服务端渲染应用框架,这篇文章主要介绍了基于 Next.js实现在线Excel,需要的朋友可以参考下
    2022-08-08
  • JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集

    JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集

    这篇文章主要介绍了JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集,以实例形式较为详细的分析了JavaScript实现动态添加下拉菜单及响应鼠标事件生成菜单等实现技巧,需要的朋友可以参考下
    2015-09-09
  • 微信小程序日历组件使用方法详解

    微信小程序日历组件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序日历组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 微信小程序实现轮播图指示器

    微信小程序实现轮播图指示器

    这篇文章主要为大家详细介绍了微信小程序实现轮播图指示器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • JavaScript控制Session操作方法

    JavaScript控制Session操作方法

    JavaScript代表客户端,而Session代表的是服务器(不知道这样说大家是否能够理解)接下来介绍JavaScript如何控制Session,感兴趣的朋友可以了解下啊
    2013-01-01
  • JavaScript进阶(一)变量声明提升实例分析

    JavaScript进阶(一)变量声明提升实例分析

    这篇文章主要介绍了JavaScript变量声明提升,结合实例形式分析了JavaScript变量声明提升相关原理、用法与操作注意事项,需要的朋友可以参考下
    2020-05-05

最新评论