Javascript中事件委托(delegate)是如何运行的
来源:互联网 发布:淘宝上卖高仿鞋的店 编辑:程序博客网 时间:2024/06/10 08:11
1.什么是事件委托(Event Delegation)
通俗的理解就是,当给节点注册事件时,为了优化代码可以不用为每个子节点(例如<li>节点)添加相同的事件,借助事件冒泡机制,可以将这些事件统统委托给他们的父节点(ul)进行捕获处理,这样就达到了简化代码,也消除了循环引用导致的内存泄漏的问题了。
示例代码:
<ul id="listt"> <li id="part1">Item 1</li> <li id="part2">Item 2</li> <li id="part3">Item 3</li> <li id="part4">Item 4</li> <li id="part5">Item 5</li> <li id="part6">Item 6</li></ul>
// 为父节点ul注册一个事件document.getElementById("list").addEventListener("click",function(e) { // e.target是被点击的元素 && 检查被点击元素的节点类型 if(e.target && e.target.nodeName.toLowerCase == "li") { // 设置被点击元素的背景 e.target.style.backgroundColor = red; }});
Event 对象
定义和用法
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
2.事件绑定
事件绑定进行的三个阶段
分别是指:事件捕获、事件目标、事件冒泡三个阶段(IE低版本不支持事件冒泡)
IE的事件绑定:
element.attach('onclick',function(){});
W3C事件绑定:
element.addEventListener('click',function(e){});
两者的联系:
1.两者在一个dom节点上都能同时绑定多个事件,(传统的一个元素进行多个事件绑定,会覆盖之前的事件)
2.W3C中,this指向的是绑定当前元素对象
两者区别:
1.IE中,this表示的是window,event也绑定在window对象上,即window.event,W3C中,this是指当前对象
2.IE中仅仅会捕获事件的冒泡阶段,W3C中会处理事件的捕获阶段和冒泡阶段
3.IE中注册事件以" on + 事件名称 ",W3C中注册事件直接用事件名称。
阻止事件传播的两种方式:
event.stopPropagation()
event.cancelBubble = true;
上述方法将停止事件的传播,阻止它被分派到其他 Document 节点。
0 0
- Javascript中事件委托(delegate)是如何运行的
- JS的事件委托/代理(delegate)
- 关于javascript的事件委托delegate的原理分析
- Javascript - 事件委托是怎么工作的?
- 聊一聊JQ中delegate事件委托的好处
- iOS中delegate(委托)的使用
- 在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信
- C#中Delegate委托事件详细介绍
- C#的委托(Delegate)和事件(Events)
- C#:委托(delegate)和事件 (event)
- 委托(Delegate) 和 事件(Event)
- 事件和委托Delegate
- unity delegate事件委托
- Unity3D研究之在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信引入中间层
- Unity3D技巧在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信
- delegate(委托)的用法
- 委托(Delegate)的详解
- 委托实例(delegate实例+事件委托通知)
- hdu 5892 List wants to travel 2016ACM/ICPC沈阳赛区网络赛1001
- 采用THree.js为三角网格的每一个面填充颜色
- BZOJ 2006 && NOI 2010 优先队列
- Android Service完全解析,关于服务你所需知道的一切(下)
- 数据结构实验之栈六:下一较大值(二)
- Javascript中事件委托(delegate)是如何运行的
- 第4周 项目3 -- 单链表应用(3)
- How to solve “Plugin execution not covered by lifecycle configuration” for Spring Data Maven Builds
- poj3070 Fibonacci 数论专题
- MVC
- 单链表应用问题--课本素材
- red-black tree
- auto,register,extern,static使用及区别
- CocoPods基本使用