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 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
js有关元素内容操作小结
Dec 20 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 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
php 文件状态缓存带来的问题
2008/12/14 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
Python 将pdf转成图片的方法
2018/04/23 Python
详解Python传入参数的几种方法
2019/05/16 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
电气工程及其自动化专业求职信
2014/06/23 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
银行求职信范文
2019/05/13 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏