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

 更新时间:2022-01-27 14:11:52   作者:佚名   我要评论(0)

目录简介示例:事件委托写法1:事件委托写法2:每个子元素都绑定事件示例:新增元素写法1:事件委托写法2:每个子元素都绑定事件简介
说明

简介

说明

本文用示例介绍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>

结果

写法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>

结果

示例:新增元素

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

写法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>

结果

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

写法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事件委托原理
  • js事件委托详解
  • JavaScript事件委托原理与用法实例分析
  • js事件委托和事件代理案例分享
  • 详解js的事件代理(委托)
  • JS 事件绑定、事件监听、事件委托详细介绍

您可能感兴趣的文章:

相关文章

  • javascript的var与let,const之间的区别详解

    javascript的var与let,const之间的区别详解

    目录作为全局变量时变量提升暂时性死区块级作用域重复声明修改声明的变量(常量与变量声明)总结说到JavaScript中声明变量的几种方法也就是v
    2022-01-27
  • 交互式可视化js库gojs使用介绍及技巧

    交互式可视化js库gojs使用介绍及技巧

    目录1. gojs 简介2. gojs 应用场景3. 为什么选用 gojs:4. gojs 上手指南5. 小技巧(非常实用哦)6. 实践:实现节点分组关系可视化交互图最后
    2022-01-27
  • JavaScript事件的委托(代理)的用法示例详解

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

    目录简介示例:事件委托写法1:事件委托写法2:每个子元素都绑定事件示例:新增元素写法1:事件委托写法2:每个子元素都绑定事件简介 说明 本
    2022-01-27
  • gojs实现蚂蚁线动画效果

    gojs实现蚂蚁线动画效果

    目录一、gojs 实现1. 绘图2. 虚线实现3. 让虚线动起来二、虚线及虚线动画背后的原理三、虚线的一些概念四、css 绘制边框虚线在绘制 dag 图时
    2022-01-27
  • Vue?elementUI实现树形结构表格与懒加载

    Vue?elementUI实现树形结构表格与懒加载

    目录1、实现效果2、后端实现2.1 实体类2.2 数据库中的数据结构2.3 后端接口2.4 swagger测试后端结构功能是否正常3、前端实现3.1 页面中引入e
    2022-01-27
  • vue3+TypeScript+vue-router的使用方法

    vue3+TypeScript+vue-router的使用方法

    目录简单使用创建项目vue-cli创建vite创建安装vue-router创建/修改组件修改入口ts启动vue在浏览器中访问文件结构图片综合使用动态参数使用wa
    2022-01-27
  • JSscript标签有哪些属性

    JSscript标签有哪些属性

    JS script标签有哪些属性: charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值因此这个属性很少有人用。def
    2022-01-27
  • 使用vue-video-player实现直播的方式

    使用vue-video-player实现直播的方式

    目录一、安装vue-video-player二、使用 vue-video-player课前准备:直播流协议https://www.cnblogs.com/yangchin9/p/14930874.html 摘要:在
    2022-01-27
  • vue3获取当前路由地址

    vue3获取当前路由地址

    正解 使用useRouter: // router的 path: "/user/:uid" <template> <div>user</div> <p>uid: {{ uid }}</p> </template> <script lang=
    2022-01-27
  • vue?请求拦截器的配置方法详解

    vue?请求拦截器的配置方法详解

    按如下步骤进行 1.request.js内容:http request请求拦截器和http response服务器响应拦截器配置 2.http.js内容:请求数据方式封装 3.utils.
    2022-01-27

最新评论