JavaScript基础概念之----事件冒泡/捕获/委托

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量120 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/adhehe/p/9794168.html
版权

事件流

如果单击了页面中的某个按钮，同时也单击了按钮的容器元素，甚至单击了整个页面。

IE提出的是冒泡流，网景提出的是捕获流。

<div id="content">content
        <div id="btn">button</div>
    </div>

    <script type="text/javascript">
        var content = document.getElementById("content");
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            alert("btn");
        };
        content.onclick = function(){
            alert("content");
        };
        document.onclick = function(){
            alert("document");
        }
    </script>

//点击容器 #btn ，则弹出的顺序是：btn > content > document
//点击容器 #content,则弹出的顺序是：content > document
//点击容器 document,则弹出的是 document

JS事件流原理图 ：

1、一个完整的事件流是从 window 开始，最后回到 window 的一个过程

2、事件流被分为三个阶段：（1-5）捕获过程、（5-6）目标过程、（6-10）冒泡过程

<div id="wrapDiv">wrapDiv
        <p id="innerP">innerP
            <span id="textSpan">textSpan</span>
        </p>
    </div>
    <script>
    var wrapDiv = document.getElementById("wrapDiv");
    var innerP = document.getElementById("innerP");
    var textSpan = document.getElementById("textSpan");

    // 捕获阶段绑定事件
    window.addEventListener("click", function(e){
        console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.addEventListener("click", function(e){
        console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.body.addEventListener("click", function(e){
        console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    innerP.addEventListener("click", function(e){
        console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    // 冒泡阶段绑定的事件
    window.addEventListener("click", function(e){
        console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.addEventListener("click", function(e){
        console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.body.addEventListener("click", function(e){
        console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    innerP.addEventListener("click", function(e){
        console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
</script>

如果点击textSpan元素，控制台打印如下图：

如上图所示，事件传播的过程是先捕获，再冒泡。

 那么，如果不使用addEventListener方法绑定的事件（如onclick），会发生在哪个阶段？

<div id="wrapDiv">wrapDiv
        <p id="innerP">innerP
            <span id="textSpan">textSpan</span>
        </p>
    </div>
    <script>
    var wrapDiv = document.getElementById("wrapDiv");
    var innerP = document.getElementById("innerP");
    var textSpan = document.getElementById("textSpan");

// 测试直接绑定的事件到底发生在哪个阶段
    wrapDiv.onclick = function(){
        console.log("wrapDiv onclick 测试直接绑定的事件到底发生在哪个阶段")
    };

    // 捕获阶段绑定事件
    window.addEventListener("click", function(e){
        console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.addEventListener("click", function(e){
        console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    document.body.addEventListener("click", function(e){
        console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    innerP.addEventListener("click", function(e){
        console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
    }, true);

    // 冒泡阶段绑定的事件
    window.addEventListener("click", function(e){
        console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.addEventListener("click", function(e){
        console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.documentElement.addEventListener("click", function(e){
        console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    document.body.addEventListener("click", function(e){
        console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    wrapDiv.addEventListener("click", function(e){
        console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    innerP.addEventListener("click", function(e){
        console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);

    textSpan.addEventListener("click", function(e){
        console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
    }, false);
</script>

点击textSpan元素，如下图控制台输出：

1、所有在目标元素上绑定的事件，都会发生在目标阶段

2、在绑定捕获代码之前写了绑定的冒泡阶段的代码，所以在目标元素上就不会遵守先捕获后冒泡这一规则，而是先绑定的事件先发生。

3、由于wrapDiv不是目标元素，所以它上面绑定的事件会遵守先捕获后冒泡的规则。所以用onclick直接绑定的事件发生在了冒泡阶段。

 事件委托

 对“事件处理程序过多”问题的解决方案就是事件委托

 事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

 例如，click事件会一直冒泡到document层次。我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。

//点击li元素，输出li当中的颜色
<ul id="box">
    <li>red</li>
    <li>yellow</li>
    <li>blue</li>
    <li>green</li>
    <li>black</li>
    <li>white</li>
</ul>

//一般会这样写
<script>
    var colorBox = document.getElementById('box')
    var colors = colorBox.getElementsByTagName('li')
    for(var i=0;i<colors.length;i++){
        colors[i].addEventListener('click',function(e){
            var li = e.target;
            console.log(li.innerHTML)
        },false)
    }
</script>


//使用事件委托去写
<script>
    var colorBox = document.getElementById('box')
    colorBox.addEventListener('click',function(e){
        var li = e.target;
        if(li.nodeName.toLowerCase() === 'li'){
            console.log(li.innerHTML)
        }
    },false)
</script>

事件委托还有一个好处就是添加进来的元素也能绑定事件

 

//点击li元素，输出li当中的颜色
<ul id="box">
    <li>red</li>
    <li>yellow</li>
    <li>blue</li>
    <li>green</li>
    <li>black</li>
    <li>white</li>
</ul>
<button οnclick="add()">add</button>

<script>
    var colorBox = document.getElementById('box')
    colorBox.addEventListener('click',function(e){
        var li = e.target || e.srcElement; //兼容处理
        if(li.nodeName.toLowerCase() === 'li'){
            console.log(li.innerHTML)
        }
    },false)

    function add(){
        var liNode = document.createElement('li')
        var textNode = document.createTextNode('this is add text.')
        liNode.appendChild(textNode);
        document.getElementById('box').appendChild(liNode)
    }
</script>

 

转载于:https://www.cnblogs.com/adhehe/p/9794168.html

ap1005233
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javaScript事件的三个阶段：捕获阶段 目标阶段 冒泡阶段
weixin_46721670的博客
06-17 1051
javaScript事件的三个阶段：捕获阶段 目标阶段 冒泡阶段 捕获阶段 概念： 事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。 目标阶段 概念: 事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发 冒泡阶段 概念: 事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点 addEventListener attachEvent (IE 特有) 的第三个参数的作用，通过查文档可以知，addEventListener的第三个参数是一个布尔类型 1
JavaScript事件的捕获阶段（Capture phase）
12-12 660
最近项目中遇到一个实际问题，自己搞了半天没解决，最后在StackOverflow上求助，不到3分钟就得到了解决方案，而且答案意外的很简单——加一个参数。 场景是这样的：有一个表格（事实上这样的表格在这个系统很多），每一行（row）是顾客的信息（名字，订单号，付款金额...），要求点击表格行（tr元素）打开订单详情，点击顾客名字（包裹在一个a元素里，a在td里）时打开顾客信息页面，不打开...
js中的事件机制
08-09 1308
1.事件绑定的集中方式： 1.1通过在html标签中加入onclick,onblur等。 <div id="outestA" onclick="var id = this.id;alert(id);return false;"></div> 但是这种不做不值得提倡。 1.2在onclick中指定函数名：<script> function buttonH
js事件捕获 目标阶段 事件冒泡
ckxkobe的博客
12-03 1058
js事件捕获 目标阶段 事件冒泡 参考文章 https://segmentfault.com/a/1190000012729080 事件流包含三个阶段 事件捕获 目标阶段 事件冒泡 处于相应阶段内的元素，响应事件就是按照事件的注册顺序来进行相应阶段的触发，比如都是捕获阶段的多个处理函数，就会依照注册顺序执行 stopImmediatePropagation会阻止事件的传播，也会阻止在其执行之后...
JavaScript中事件绑定和DOM事件流(冒泡和捕获)-案例详解
JackieDYH的博客
07-19 618
方法1：把函数绑定在HTML标签上 也叫HTML元素行间事件 <button onclick="btnClick()">我是oBtn，点击我</button> function btnClick() { console.log(this, 'oBtn被点击了') // this指向 window对象 } 方法二：把函数赋值给DOM元素的事件处理程序属性 也叫DOM 0级事件处理程序 一个DOM元素对象拥有很多事件处理程序属性(onclick是这些属性之一，其他还有很多
事件冒泡/事件捕获/事件委托
hertha_js的博客
02-02 478
JavaScript - WebAPI - 事件冒泡 与 事件捕获
Henry_ID的博客
08-19 392
01-事件冒泡 1.1-事件冒泡介绍 本小节知识点：介绍什么是事件冒泡 事件冒泡：如果一个元素的事件被触发，那么他的所有父级元素的同名事件也会被依次触发 元素->父元素->body->html->document->window 事件冒泡一直存在，只不过以前我们没有给父级元素加同名事件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8
JavaScript 事件冒泡与捕获机制 --- 带动态图理解
好的文章我尽力写，大家的学习我尽力帮
12-13 1020
JS的冒泡与捕获机制的理解 ，事件委托方法的实现
前端学习--JS入门(6) 事件冒泡/事件委托/获取元素位置
Michelle209的博客
04-07 1104
当一个元素的事件被触发时，同样的事件会在该元素的所有祖先元素中依次被触发（从里到外）元素距离自己定位父级元素的左、上距离（如果没有定位，就一直往上找到有定位的父元素）给父元素注册事件，当触发子元素时，会冒泡到父元素上，触发父元素的事件。默认有冒泡模式存在，事件容易影响到父级元素。同时给多个元素注册事件--利用事件冒泡。事件流是事件完整执行过程中的流动路径。从DOM的根元素执行事件（从外到里）滚动条再滚动的时候持续触发的事件。外部资源加载完毕时触发的事件。应用：固定导航栏/返回顶部。只会触发所有父元素的。
Javascript事件流（事件捕获、事件冒泡）,事件委托（代理）
01-08
Javascript事件流（事件捕获、事件冒泡）–>事件委托（代理） Javascript与HTML之间的交互是通过“事件”实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间，当我们与浏览器中的web页面进行特定的交互时...
js之事件冒泡，事件捕获，事件委托
01-08
事件冒泡、事件捕获和事件委托是JavaScript事件模型中的三个重要概念。 首先，事件捕获是一种事件处理机制，它从DOM树的根节点（window对象）开始，向下遍历到目标元素。这种机制使得事件首先在最不具体的节点（即...
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
10-21
理解这些基本概念后，可以有效地利用JavaScript事件机制实现交互式网页，例如阻止事件冒泡以防止不必要的事件处理，或者使用事件委托来减少内存消耗和提高性能。此外，掌握`addEventListener`的第三个参数（是否阻止...
JavaScript之事件流、事件冒泡、事件捕获、事件委托：
weixin_70443954的博客
11-24 788
事件、事件流、事件冒泡、事件捕获、阻止事件冒泡、事件委托
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 1040
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
JavaScript代码片段
weixin_66128399的博客
08-26 1812
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
【项目】云备份系统笔记
m0_73713491的博客
08-27 960
就包含一个类，config，是读取配置文件的类，因为配置文件只有一份，所以可以采用单例模式，把config类的构造函数私有化，只能通过一个公共成员函数getinstance（）来创建对象（new config（）），在类的内部可以调用私有化构造函数，构造函数里面再调用读取配置文件的函数，用自己实现的工具类读取配置文件，将读到的内容放到一个字符串中，然后再将字符串用Json进行序列化，然后给类中的成员变量进行赋值，类中的成员变量就包含了cloud.conf里面包含的信息，一一对应。
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 7711
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
jQuery基础——DOM
m0_54066656的博客
08-27 1564
JQ基础——DOM操作
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 547
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
JavaScript事件冒泡、捕获与事件委托深度解析
本文档详细介绍了JavaScript中的事件冒泡、事件捕获以及事件委托的概念，通过实例演示如何理解和运用这些机制。 在JavaScript中，事件处理是网页交互的基础，而事件冒泡、事件捕获和事件委托是理解JavaScript事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值