数据库 SLAM macos winforms rest selenium view hyperlink bootstrap后台模板 鼠标进入和离开事件 linux超级用户 bootstrap日历控件 mysql修改字段值 quartz配置 git登录命令 plsql连接mysql数据库 oracle给表增加字段 mysql卸载工具 Navicat kubernetes实战 python输出 python自学教程 java注释 java开发环境安装 java时间格式 java生成文件 java时间转时间戳 java异常处理 java查看变量类型 java小程序 刷声望 苹果x银色 ps制作表格 爱奇艺无法投屏 js动态添加元素 alert换行 qq悄悄话怎么知道对方是谁 ps祛痘 笔底春风 python贪吃蛇
当前位置: 首页 > 学习教程  > 

JavaScript原生系列-事件代理(事件委托)、事件捕获、事件冒泡

2020/10/16 18:04:06 文章标签: js原生点击事件

转载请注明预见才能遇见的博客:http://my.csdn.net/ 原文地址:https://blog.csdn.net/pcaxb/article/details/100665670 JavaScript原生系列-事件代理(事件委托)、事件捕获、事件冒泡 目录 1.事件委托作用 2.以往注册事件 3.用addEventListener(ty…

转载请注明预见才能遇见的博客:http://my.csdn.net/

原文地址:https://blog.csdn.net/pcaxb/article/details/100665670

JavaScript原生系列-事件代理(事件委托)、事件捕获、事件冒泡

目录

1.事件委托作用

2.以往注册事件

3.用addEventListener(type,listener,useCapture)实现

4.事件捕获

5.事件冒泡

6.事件委托

7.事件委托和新增节点绑定事件


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

事件捕获:当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件

事件冒泡:当事件到达目标节点后,会沿着捕获阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件

1.事件委托作用

(1)支持为同一个DOM元素注册多个同类型事件

(2)可将事件分成事件捕获和事件冒泡机制

2.以往注册事件

用以往注册事件的方法,如果存在多个事件,后注册的事件会覆盖先注册的事件

let div01 = document.getElementById("div01");
div01.onclick = ()=>console.log(111);
div01.onclick = ()=>console.log(222);

只会打印222,后面的事件会覆盖前面的事件

3.用addEventListener(type,listener,useCapture)实现

  • type: 必须,String类型,事件类型
  • listener: 必须,函数体或者JS方法
  • useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段。
let div01 = document.getElementById("div01");
div01.addEventListener("click",()=>console.log(111));
div01.addEventListener("click",()=>console.log(222));

都会打印,后面的事件不会覆盖前面的事件

4.事件捕获

当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件

window.addEventListener("click",()=>console.log("window"),true);
document.addEventListener("click",()=>console.log("document"),true);
document.body.addEventListener("click",()=>console.log("body"),true);
document.getElementById("div01").addEventListener("click",()=>console.log("div01"),true);

打印顺序:window--document--body--div01

5.事件冒泡

当事件到达目标节点后,会沿着捕获阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件

window.addEventListener("click",()=>console.log("window"));
document.addEventListener("click",()=>console.log("document"));
document.body.addEventListener("click",()=>console.log("body"));
document.getElementById("div01").addEventListener("click",()=>console.log("div01"));

打印顺序:div01--body--document--window

6.事件委托

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

事件委托的优点:

(1)(比如我们有100个li,每个li都有相同的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添加事件。) 提高性能:每一个函数都会占用内存空间。每一个事件都会与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多;如果使用事件委托,只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。

(2)动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

window.addEventListener("click",()=>console.log("window1"),true);
document.addEventListener("click",()=>console.log("document1"),true);
document.body.addEventListener("click",()=>console.log("body1"),true);
document.getElementById("div01").addEventListener("click",()=>console.log("div01-1"),true);

window.addEventListener("click",()=>console.log("window2"));
document.addEventListener("click",()=>console.log("document2"));
document.body.addEventListener("click",()=>console.log("body2"));
document.getElementById("div01").addEventListener("click",()=>console.log("div01-2"));

点击div01过程:

div01-1和div01-2谁在前面谁先执行

 

7.事件委托和新增节点绑定事件

点击1和点击2没有添加点击事件,但是都会打印当前节点,子节点冒泡到父节点,后期增加子节点,不需要绑定事件就会打印当前节点

<div id="divParent">
    <div id="div01">点击1</div>
    <div id="div02">点击2</div>
</div>

document.getElementById("divParent").addEventListener("click",(e)=>{
    console.log(e.target);
});

 

JavaScript原生系列-事件代理(事件委托)、事件捕获、事件冒泡

博客地址:https://blog.csdn.net/pcaxb/article/details/100665670


本文链接: http://www.dtmao.cc/news_show_300376.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?