js中的事件委托

标签: js 事件 委托 | 发表时间:2014-03-20 10:49 | 作者:xiaomiya
出处:http://www.iteye.com

1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

好处呢:1,提高性能。

我们可以看一个例子:需要触发每个li来改变他们的背景颜色。

<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.target
nodeName:找到元素的标签名
*/
	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 = "";
		}
	}
}

 

好处2,新添加的元素还会有之前的事件。

我们还拿这个例子看,但是我们要做动态的添加li。点击button动态添加li

如:

<input type="button" id="btn" />
<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");
	var oBtn = document.getElementById("btn");
	var iNow = 4;
	for(var i=0; i<aLi.length; i++){
		aLi[i].onmouseover = function(){
			this.style.background = "red";
		}
		aLi[i].onmouseout = function(){
			this.style.background = "";
		}
	}

	oBtn.onclick = function(){
		iNow ++;
		var oLi = document.createElement("li");
		oLi.innerHTML = 1111 *iNow;
		oUl.appendChild(oLi);
	}

	
}

 这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。

因为点击添加的时候for循环已经执行完毕。

 

那么我们用事件委托的方式来做。就是html不变

window.onload = function(){
	var oUl = document.getElementById("ul");
	var aLi = oUl.getElementsByTagName("li");
	var oBtn = document.getElementById("btn");
	var iNow = 4;

	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 = "";
		}
	}
	oBtn.onclick = function(){
		iNow ++;
		var oLi = document.createElement("li");
		oLi.innerHTML = 1111 *iNow;
		oUl.appendChild(oLi);
	}
}

 

ok:

如同在我们用微博中,新发微博照样有之前的鼠标事件。

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [js 事件 委托] 推荐:

js中的事件委托

- - JavaScript - Web前端 - ITeye博客
1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 我们可以看一个例子:需要触发每个li来改变他们的背景颜色.

JS动态添加事件

- - CSDN博客推荐文章
方法一、setAttribute. obj.setAttribute("onclick", "javascript:alert('测试');");. 但是IE不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、 事件属性,也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的.

键盘事件处理的JS库 Kibo

- Le - 开源中国社区最新软件
Kibo是一个简单的用于处理键盘事件的Javascript工具库. 这个Javascript类库的特点是,它不但能监听普通的按键事件,它还能监听组合键和功能键,例如Ctrl+C,Shift+w. 还有一个特点是,它把各种键都给符合化了,例如,如果你想监听[ctrl alt x]按键事件,你可以直接写成 k.down(‘ctrl alt x’, handler).

Js冒泡事件详解及阻止

- - JavaScript - Web前端 - ITeye博客
Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数.     evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡.

JavaScript事件委托的技术原理

- - WebHek
如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了. 使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上. 事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件. 基本概念非常简单,但仍有很多人不理解事件委托的工作原理.

js onkeypress与onkeydown 事件区别详细说明

- - JavaScript - Web前端 - ITeye博客
本文将详细介绍js onkeypress与onkeydown 事件区别:一个放开一个没有放开,onkeydown先于onkeypress 发生,需要的朋友可以参考下:. onkeypress 和 onkeydown 是有区别,下面将讲解 onkeypress 与 onkeydown 事件的区别. onkeypress 事件在用户按下并放开任何字母数字键时发生.

从事件驱动到observable的异步编程——PubSub+Promise+Rx的JS事件库

- Kejun - YY in Limbo 混沌海狂想
你上当叻,虽然从外面看标题很有气势,传达出一种宏大叙事的赶脚,其实我只是刚刚把一个阿尔法城的JS模块提交到github,想顺便介绍一下,但我连API文档都懒得写,就别指望能深入浅出的讲一遍来龙去脉了⋯⋯. 所以就直接帖几个前置阅读的链接罢. 这些潮流的外部起源:(技术也有外源论/exogenesis⋯⋯).

10个用来处理键盘事件的JQuery插件和JS类库

- - JavaScript - Web前端 - ITeye博客
通常在web应用或者网站中,我们使用鼠标来控制元素或者执行导航,相对于桌面应用来说,使用web应用的快捷键次数可能会相对比较少,但是对于熟 练的专业人员来说,使用键盘可能更加容易并且更加快速,在今天这篇文章中,我们收集了10个jQuery的插件,帮助你创建各种基于键盘事件的web应 用,相信大家会喜欢的.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.