JS的事件冒泡以及事件代理
来源:互联网 发布:部落冲突狗升级数据 编辑:程序博客网 时间:2024/05/16 17:00
JavaScript事件代理是建立在事件冒泡的原理上来的,
事件冒泡及捕获:
介绍一下浏览器处理DOM事件的过程。对于事件的捕获和处理,不同的浏览器厂商有不同的处理机制,这里我们主要介绍W3C对DOM2.0定义的标准事件。
DOM2.0模型将事件处理流程分为三个阶段:一、事件捕获阶段,二、事件目标阶段,三、事件起泡阶段。如图:
事件捕获:当某个元素触发某个事件(如onclick),顶层对象document就会发出一个事件流,随着DOM树的节点向目标元素节点流去,直到到达事件真正发生的目标元素。在这个过程中,事件相应的监听函数是不会被触发的。
事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。
事件起泡:从目标元素开始,往顶层元素传播。途中如果有节点绑定了相应的事件处理函数,这些函数都会被一次触发。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)来组织事件的冒泡传播。
事件委托或者事件代理:
通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
也就是:利用冒泡的原理,把事件加到父级上,触发执行效果
<ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb</li> <li>cccccccc</li></ul>
window.onload = function(){ var oUl = document.getElementById("ul"); var aLi = oUl.getElementsByTagName("li"); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover = function(){ this.style.background = "red"; } aLi[i].onmouseout = function(){ this.style.background = ""; } }}
这样我们就可以做到li上面添加鼠标事件。
但是如果说我们可能有很多个li用for循环的话就比较影响性能。
下面我们可以用事件委托的方式来实现这样的效果。html不变
window.onload = function(){ var oUl = document.getElementById("ul"); var aLi = oUl.getElementsByTagName("li");/*这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。ie:window.event.srcElement标准下:event.targetnodeName:找到元素的标签名*/ oUl.onmouseover = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; //alert(target.innerHTML); if(target.nodeName.toLowerCase() == "li"){ target.style.background = "red"; } } oUl.onmouseout = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; //alert(target.innerHTML); if(target.nodeName.toLowerCase() == "li"){ target.style.background = ""; } }}
我们把事件放到父亲节点上,这样的话就不用for循环了,
优点:
省内存;
如果以后有新添加的节点不用改变原来的JS代码,相当容易;
PS:其实就是利用了事件冒泡原理,形成了事件代理机制,
本博客转载自:http://blog.csdn.net/majian_1987/article/details/8591385
0 0
- JS的事件冒泡以及事件代理
- js的事件代理和事件冒泡
- JS冒泡事件以及阻止
- JS的冒泡事件
- JS-事件冒泡、事件捕获 和 事件代理
- JS,Jquery中事件冒泡以及阻止事件冒泡方法
- js阻止浏览器的默认行为以及停止事件冒泡
- JS的事件对象和事件冒泡
- js的事件冒泡和事件捕获
- JS的事件对象和事件冒泡
- js的事件冒泡和事件捕获
- JS的事件冒泡和事件捕获
- js--事件--事件代理
- js--事件--事件代理
- JS中的事件冒泡(Bubble)和事件捕获(capture)以及如何阻止事件的冒泡
- js中的冒泡,捕获以及事件委托
- 理解js的事件冒泡
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- Spring注解@Component、@Repository、@Service、@Controller区别
- 雨停了
- keil的软件逻辑分析仪( logic analyzer)使用教程
- Android中重要的包名
- 3dsmax 学习笔记(一)
- JS的事件冒泡以及事件代理
- 浮点数的表示
- iOS高效开发必备的10款Objective-C类库
- 基于Spring 4.0和Servlet 3.0编写无XML配置的REST服务
- git/github初级运用
- 移动互联产品窥探
- time函数使用
- str和repr区别
- Node.js , module.id