手写事件委托

最新推荐文章于 2022-03-18 22:03:33 发布

原创最新推荐文章于 2022-03-18 22:03:33 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

本文介绍了JavaScript中的事件委托技术，通过一个示例展示了如何使用事件委托来监听ul元素内的li元素点击。事件委托的主要好处在于节省内存，只需设置一个监听器就能处理多个子元素的事件，同时还能实现实时动态监听新添加的元素。这种技术对于处理大量交互元素或动态添加元素的场景非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手写事件委托

ul.addEventListener('click',function(e){
    if(e.target.tagName.toLowerCase() === 'li')
        {
            fn()
        }
})

事件委托的好处

1.节省监听器，当我们要同时监听一个父元素里面的多个子元素时，只需要监听这个父元素就可以

2.实现动态监听，js中是不能给新添加的元素添加监听器，所以我们只需要监听它的父元素就可以触发事件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

卡门726

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

程序化的事件侦听器$once，销毁定时器

小冯的博客

04-28

784

通过 $on(eventName, eventHandler) 侦听一个事件通过 $once(eventName, eventHandler) 一次性侦听一个事件通过 $off(eventName, eventHandler) 停止侦听一个事件一般我们用不到，但是用定时器进行销毁的时候用： const timer = setInterval(() =>{ ...

iOS纯手写UI小例子

09-16

8. **事件传递与委托模式**：许多控件支持委托协议，如UITableViewDataSource和UITableViewDelegate，通过遵循这些协议，我们可以定制视图的行为，如填充表格数据、响应用户选择等。 9. **动画效果**：通过Core ...

参与评论您还未登录，请先登录后发表或查看评论

前端面试题之手写事件模型及事件代理/委托

weixin_30783913的博客

12-22

333

原文地址：http://www.w3cmark.com/2016/439.html 在前端面试，js是重头戏，也是体现面试者的重要方面。jq库类在前端影响深远，以至于很多入门者直接用jq代替原生js来开发项目，效率是提升了，但是往往面试官为了考察面试者的基础，几乎不可能问你jq里面的某个功能怎么用，而是问你怎么用原生js去实现某个方法或者考察你是否读个jq的源码，是否懂得里面真正...

前端面试js-手写事件委托（一点小改进）

weixin_33738982的博客

09-29

476

最近刚好在学js的事件机制，写这个是看到这篇文章提到了一个腾讯的面试题。我先把文章的代码稍作改动贴在这里。 <body> <div id="outer" style="width:100%; height:200px; background-color: cornflowerblue;"> ...

1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理，并要求兼容浏览器

qi1271199790的博客

12-04

8827

Q：事件的委托（代理 Delegated Events）的原理以及优缺点 A：委托（代理）事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的，优点是：（1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒（2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合

简单完整手写动画js

09-08

9. **性能优化**：考虑使用事件委托、避免阻塞主线程、合理使用缓存等技巧来提高动画的性能和响应速度。 10. **代码结构和模块化**：良好的代码组织和模块化设计可以使动画脚本更易读、易维护。通过学习这个"简单...

C#手写识别程序源码(201903)

03-14

【标签】"c#"进一步强调了该资源与C#编程语言的紧密关系，意味着开发者需要具备C#编程基础，理解类、对象、事件、委托等概念，以及如何在C#中调用系统API或第三方库。【压缩包子文件的文件名称列表】中的文件是...

ViewBinding与Kotlin委托结合使用，去除setContentView，原理伪代码

09-07

ViewBinding与Kotlin委托结合使用，去除setContentView。 ViewBindingPropertyDelegate和hi-dhl/Binding库的伪代码，用来了解其内部实现原理。相当于是手写了一个简单的ViewBindingDelegate和Binding库可看我的...

法律授权委托书范本-委托书.pdf

12-05

在处理代理人签约的情况时，无论是手写委托书还是公证委托书，经纪人都应采取一系列风险防控措施： 1. 对于手写委托书： - 验证委托书的真实性，尽可能亲眼见证委托书的撰写或被代理人的签字。 - 要求代理人出示...

一分钟教你手写一个通用的事件绑定函数（支持普通函数和事件代理函数）

01-08

一分钟教你手写一个通用的事件绑定函数（支持普通函数和事件代理函数）一、写在开头最近一直在搞小程序，有点腻了，顺便复习了一下js，刚好可以写一个比较通用的绑定事件，见笑了各位。二、发现问题封装了一个绑定事件的函数，兼顾了普通函数和事件代理（多了一些对被代理元素的判断）三、解决问题因为该事件比较简单，我就把具体的解释直接写在代码的注释中，如下：通用事件绑定函数 function bindEvent(elem,type,selector,fn){ if(fn==null){//先判断是普通的函数还是代理的函数 fn=selector, selector=null

面试手写代码之-委托事件

weixin_33981932的博客

04-27

217

这应该是面试时手写常考题了，但是从来没具体写过，被问道时也是让我说下大概思路就行，现在特意手写练习一下。代码形式就是模仿jquery的形式，不多说直接上一个html文件代码有什么问题欢迎指正交流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n...

事件委托的例子

.NET寺庙

02-29

674

using System;using System.Collections.Generic;using System.Text;namespace EventHanlderTest{ public class Program { // 事件的声明 //1.声明一个委托 //public delegate void EventHan

事件委托例子1

wingzzf的博客

01-06

467

//第一个例子 //public delegate void EatEventHandler(object sender, EatEventArgs e); //这个的定义也可以不要这样.可以直接就定义一个参数 //public delegate void EatEventHandler(string e); //但然用的时候的参数要相对应好哦using System; namespace

关于js(九)------------事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？...

weixin_30535565的博客

08-15

197

function stopBubble(e) { if(e && e.stopPropagation){ e.stopPropagation(); } else { window.event.cancelBubble = true; }}; 阻止事件的默认行为　　e.preventDefault()可以阻止事件的默认行为发生，默认行为是指：点击a标签就转...

事件委托小例子

壊壊娚孩的专栏

02-10

435

定义一个猫类 public class Cat { private string name; public Cat(String name) { this.name=name; } //定义一个委托 public delegate void CatShou

【简单事件委托例子】

buaichiluobo的博客

03-18

369

简单事件委托的例子

手写实现字符串函数之倒序、判断是否是回文、截取字符串以及事件委托

浮生离梦的博客

08-22

314

一、字符串倒序字符串倒序，生成一个倒序的字符串。字符串倒序的实现，代码如下所示： export function reverseString (str) { // 将字符串转为数组 // let arr = str.split(''); let arr = [...str]; // 翻转数组 arr.reverse(); // 将数组拼接成字符串 let s = arr.join(''); return s; } 手写函数字符串倒序的应用，代码如下所示： //

Flash手写识别技术实现及数据库建立

在Flash中，委托模式可以用来实现事件处理。 - **Hand.fla**：这个文件是Flash源文件，其中包含了程序的图形界面设计部分。通过Flash编辑器可以看到程序界面的布局以及相关元素。 ### 手写识别的挑战与优化 #### ...