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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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
PHP 网页过期时间的控制代码
2009/06/29 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
vue.js表格分页示例
2016/10/18 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
JS判断微信扫码的方法
2017/08/07 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
python动态加载包的方法小结
2016/04/18 Python
使用python绘制常用的图表
2016/08/27 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Linux下python3.7.0安装教程
2018/07/30 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
我们的节日国庆活动方案
2014/08/19 职场文书
初中家长评语和期望
2014/12/26 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
python多线程方法详解
2022/01/18 Python