事件代理和委托学习

简介: 参考资料:           又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流           JavaScript事件代理和委托 事件委托:   实际案例:我们平时在开发时,有这种情况,一个ul里有有好多个li子元素,这个li的数量可以是固定的,也可以是动态添加删除的,而且每个li...

参考资料:

          又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流

          JavaScript事件代理和委托

事件委托:

  实际案例:我们平时在开发时,有这种情况,一个ul里有有好多个li子元素,这个li的数量可以是固定的,也可以是动态添加删除的,而且每个li都必要有一个点击事件,

<ul class= 'list'>
    <li class='item1'>item1</li>
    <li class='item2'>item2</li>
    <li class='item3'>item3</li>
    <li class='item4'>item4</li>
</ul>

 

这时我们会有这些解决办法(事件有限,先以jquery为例)

  1.给每一个li添加一次点击事件,例如for循环里执行

$('li').on('click',function(){
  //do something...
})

  2.就是写一个函数,然后在li标签里添加onclick事件(这种方式不推荐)

//js里有一个函数;
function clickLI (){
   //do something...  
}

<!-- html代码如下;-->
...
  <li class='item1' onclick=clickLI() >item1</li>
...

 

    3.1 事件委托,即我把click事件绑定到父级 ul 上

$('.list').click(function(event) {
    var target = event.target;
    if (target&&target.nodeName.toUpperCase()== 'LI') {
        // dosomething
    }
})

 

  3.2 事件委托时,li里又有子元素的情况

...
<li class="item">
    <div class="name">xxx</div>
    <p class="age">xxxxxxs</p>
</li>
...

 

当我们试图使用事件委托希望给所有的li添加元素时,在利用选择器判断的过程中发现,目标event.target元素居然是li的子元素,这个时候就没办法准确的将事件绑定到li上了,这个时候我们就要用到阻止事件捕获的传递了。

js里理论上是有这个方法的,但是我没找到,但是我看到了一个css3里的属性pointer-events: none;(关于pointer-events在文章末有介绍)

  
li>  * {
  pointer-events: none;
}

 

      这块jquery做的比较好了已经

$('ul').on('click', 'li.item', function(event) {
        console.log(event.target.innerHTML);
})

 

这里第二个参数'li.item'就是被委托的对象了。

事件代理:

。。。。。。。。。。

它和委托有什么区别呢?

。。。。。。。。。。

知识点:

  .toUpercase() 将字符串全部转换为大写字母

  target事件属性:target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口

      CSS:pointer-events

    pointer-events直译为指针事件,当把值设置为none后,他有如下相关特性。

    1.   阻止用户的点击动作产生任何效果
    2.   阻止缺省鼠标指针的显示
    3.   阻止CSS里的hover和active状态的变化触发事件
    4.   阻止JavaScript点击动作触发的事件

 

目录
相关文章
|
3天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
13天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1292 5
|
12天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1319 87
|
2天前
|
弹性计算 安全 数据安全/隐私保护
2025年阿里云域名备案流程(新手图文详细流程)
本文图文详解阿里云账号注册、服务器租赁、域名购买及备案全流程,涵盖企业实名认证、信息模板创建、域名备案提交与管局审核等关键步骤,助您快速完成网站上线前的准备工作。
179 82
2025年阿里云域名备案流程(新手图文详细流程)
|
2天前
|
自然语言处理 前端开发
基于Electron38+Vite7.1+Vue3+Pinia3+ElementPlus电脑端admin后台管理模板
基于最新版跨平台框架Electron38整合Vite7+Vue3+ElementPlus搭建轻量级客户端中后台管理系统解决方案。
163 86