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 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
安装vue-cli的简易过程
May 22 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 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
VOLVO车载收音机
2021/03/02 无线电
PHP4之COOKIE支持详解
2006/10/09 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
入党申请人的自我鉴定
2013/12/01 职场文书
护士个人自我鉴定
2014/03/24 职场文书
商务助理求职信范文
2014/04/20 职场文书
会计学毕业生求职信
2014/06/25 职场文书
旷课检讨书500字
2014/10/14 职场文书
2015年推普周活动总结
2015/03/27 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
班级班风口号大全
2015/12/25 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
nginx.conf配置文件结构小结
2022/04/08 Servers