JavaScript事件的委托(代理)的用法示例详解


Posted in Javascript onFebruary 18, 2022

简介

说明

本文用示例介绍JavaScript中的事件(Event)的委托(代理)的用法。

事件委托简介

事件委托,也叫事件代理,是JavaScript中绑定事件的一种常用技巧。就是将原本需要绑定在子元素的响应事件委托给父元素或更外层元素,让外层元素担当事件监听的职务。

事件代理的原理是DOM元素的事件冒泡。

事件委托的优点

1.节省内存,减少事件的绑定

原本需要绑定在所有子元素的事件,使用事件委托之后,只需要一个事件绑定即可。

2.可以动态绑定事件,新增的子对象事件可以被已绑定的事件处理

因为新增的子对象产生的事件,最终也会冒泡到父元素,从而能够处理

示例:事件委托

需求:一个列表,点击列表元素时弹出其内容。

写法1:事件委托

只需在外层元素绑定事件即可。

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
 
<ul id="id-ul">
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
 
<script>
    let ul = document.getElementById('id-ul');
    ul.addEventListener("click", function (ev) {
        alert(ev.target.innerText);
    })
</script>
 
</body>
</html>

结果

JavaScript事件的委托(代理)的用法示例详解

写法2:每个子元素都绑定事件

每个子元素都绑定事件。

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
 
<ul id="id-ul">
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
 
<script>
    let li = document.querySelectorAll('#id-ul li');
    for (let liElement of li) {
        liElement.addEventListener("click", function (ev) {
            alert(ev.target.innerText);
        });
    }
</script>
 
</body>
</html>

结果

JavaScript事件的委托(代理)的用法示例详解

示例:新增元素

需求:每点击“生成按钮”,就生成一个子的列表元素。然后,每点击一次列表元素,会弹出其内容。

写法1:事件委托

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
 
<ul id="id-ul">
    <li>1</li>
    <li>2</li>
</ul>
<button id="btn">click</button>
<script>
    let num = 3;
    let eUl = document.querySelector("#id-ul");
    let eButton = document.querySelector("#btn");
 
    eButton.addEventListener("click", function () {
        let newLi = document.createElement("li");
        eUl.appendChild(newLi);
        newLi.innerText = num++;
    })
    eUl.addEventListener("click",function (event) {
        alert(event.target.innerText);
    })
</script>
 
</body>
</html>

结果

JavaScript事件的委托(代理)的用法示例详解

可以看到,原有的元素和新建的元素的事件都会被处理。 

写法2:每个子元素都绑定事件

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
 
<ul id="id-ul">
    <li>1</li>
    <li>2</li>
</ul>
<button id="btn">click</button>
<script>
    let num = 3;
    let eUl = document.querySelector("#id-ul");
    let eButton = document.querySelector("#btn");
    let eLi = document.querySelectorAll("#id-ul li");
 
    eButton.addEventListener("click", function () {
        let newLi = document.createElement("li");
        eUl.appendChild(newLi);
        newLi.innerText = num++;
    })
 
    for (let eLiElement of eLi) {
        eLiElement.addEventListener("click",function (event) {
            alert(event.target.innerText);
        })
    }
 
</script>
 
</body>
</html>

结果

JavaScript事件的委托(代理)的用法示例详解

可以看到:原有的元素的点击事件会被处理,但新加入的不会被处理。 

到此这篇关于JavaScript事件的委托(代理)的用法示例详解的文章就介绍到这了,更多相关JavaScript事件委托内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
如何利用React实现图片识别App
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 #Javascript
微信小程序中使用vant框架的具体步骤
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 #Vue.js
微信小程序中wxs文件的一些妙用分享
Feb 18 #Javascript
You might like
discuz安全提问算法
2007/06/06 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
python中遍历文件的3个方法
2014/09/02 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python同时替换多个字符串方法示例
2019/09/17 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
详解Python中namedtuple的使用
2020/04/27 Python
python 从list中随机取值的方法
2020/11/16 Python
自荐信的两点禁忌
2013/10/30 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
怒海潜将观后感
2015/06/11 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
mysql数据库入门第一步之创建表
2021/05/14 MySQL
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript