【笔记】事件委托（即事件代理）知识点

forrest23 发布于2019-08-20 17:28 / 727人阅读

摘要：事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素。

事件委托原理

事件委托就是利用事件冒泡原理实现的！

事件冒泡：就是事件从最深节点开始，然后逐步向上传播事件；

例：页面上有一个节点树，div > ul > li > a 比如给最里面的a 加一个click事件，那么事件就会一层一层的往外执行，执行顺序 a > li > ul > div, 有这样一个机制，当我们给最外层的div添加点击事件，那么里面的ul ， li ， a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托他们父集代为执行事件；

//需求：鼠标放到li上对应的li背景变灰


    111
    222
    333
    444
    555



//用父集做事件处理，当li被点击时，由于冒泡原理事件就会冒泡到ul上，因此ul上有点击事件，所以事件就会被触发;
//Event对象提供了一个属性叫做target，可以返回事件的目标节点，我们称之为事件源，
//也就是说，target就可以表示当前事件操作的dom，但可能不是真正操作的dom，
//js中存在兼容性问题：标准浏览器：event.target，IE浏览器：event.srcElement

存在问题：点击ul本身的时候也是会触发的；
如果我们只想让li触发而不想让ul触发，怎么办？？？
此时只是获取了当前节点的位置，但并不知道节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回值是一个大写的，判断时需要转换为小写；

$("ul").on("click",function(e){
        if (e.target.nodeName.toLowerCase() == "li") {
             $(e.target).css("background-color","red").siblings().css("background-color","white");
        } else{
             return;
        };
                 
})

补充
this是指向当前事件所绑定的元素，而e.target指向事件执行时鼠标所点击区域的那个元素
要看事件绑定的元素内部有没有子元素
如果有子元素的话e.target指向这个子元素，如果没有，e.target和this都指向事件所绑定的元素。
e.target事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。

云服务器 GPU云服务器委托事件事件委托事件委托c javascript事件委托

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83606.html

javascript事件基础知识

摘要：可选，布尔值，指定事件是否在捕获或冒泡阶段执行，默认冒泡。适用范围参数介绍必须，字符串，事件名称。必须，指定事件触发时执行的函数。事件冒泡事件冒泡与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。什么是事件 javascript与HTML之间交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件在浏览器中是以对象的形式存在的，即event，...

ad6623 2019-08-26 13:36 评论0 收藏0
读书笔记(05) - 事件 - JavaScript高级程序设计

摘要：而事件分为个级别级事件处理程序，级事件处理程序和级事件处理程序。级中没有规范事件的相关内容，所以没有级事件处理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript来实现用户与WEB网页之间的动态交互，接收用户操作并做出相应的反馈，而事件在此间则充当桥梁的重要角色。日常开发中，经常会...

tinylcy 2019-08-23 13:58 评论0 收藏0
js 事件委托事件代理

摘要：事件委托事件代理高级程序设计上解释事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。事件委托原理事件委托是利用事件的冒泡原理来实现的，事件冒泡就是事件从最深的节点开始，然后逐级向上传播事件。 js 事件委托事件代理 JavaScript高级程序设计上解释：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。通过例子类比：有...

widuu 2019-08-23 14:44 评论0 收藏0
jQuery入门笔记之（三）事件详解

摘要：可以传递三个参数表示一个或多个事件类型，比如。表示绑定到指定元素的处理函数。我们称它为简写事件。必须在中，并且使用作为事件触发元素，不然无效。和表示鼠标移入和移出的时候触发。按下返回按下返回和分别表示光标激活和丢失，事件触发时机是当前元素。转自个人博客在JavaScript 有一个非常重要的功能，就是事件驱动。如果你的网页需要与用户进行交互的话，就不可能不用到事件。它在页面完全加...

GitCafe 2019-08-19 17:17 评论0 收藏0
Backbone.js学习笔记（一）

摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...

FrancisSoung 2019-08-21 10:21 评论0 收藏0