`
whmjxa
  • 浏览: 15898 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

javascript事件委托

阅读更多
<ul id="ul">
	<li id="li1">dododo</li>
	<li id="li2">dododo</li>
	<li id="li3">dododo</li>
</ul>

 如果想对多个li对象进行事件侦听,这时候用事件委托是不二的选择了。事件委托就是利用了事件冒泡,对document中某一个元素进行侦听,其实也就是侦听了其下的所有子元素。

javascript代码如下:

var EventUtil = {
	addEvent: function(node, type, listener) {
		if (node.addEventListener) {
			node.addEventListener(type, listener, false); //firefox
		} else {
			node.attachEvent("on"+type, listener); //ie
		}},
	getTarget: function(event){
		return event.target || event.srcElement;
		/**
		在ie下是用event.srcElement,firefox下用event.target
		*/
	}	
}

var node = document.getElementById("ul");
	
EventUtil.addEvent(node,"click",function(event){
	alert(EventUtil.getTarget(event).id);
});

 当鼠标单击li元素时,会弹出显示当前li id的警告框,以上代码在ie8, firefox5测试通过

分享到:
评论

相关推荐

    JavaScript事件委托原理与用法实例分析

    本文实例分析了JavaScript事件委托原理与用法。分享给大家供大家参考,具体如下: 在日常中,我们可能会听到事件委托这样的概念,有些同学可能对事件委托已经很了解了,也有些同学可能只是听过事件委托,只是会简单...

    javascript事件委托的方式绑定详解

    也许偶尔就会遇到“事件委托”,但是,大多数时说的是“事件绑定”,对于“事件委托”,或是不提,或是浅尝辄止。对于我这个比较好奇的人来说,实在很蛋疼。尤其是想更多的了解“事件委托”的时候。

    JavaScript事件委托的技术原理 – WEB骇客1

    1. 用JavaScript检测离线/在线状态 4. 使用 jQuery 复制文字到剪贴板的技巧 5. JavaScript DocumentFragment:

    JavaScript事件委托用法分析

    本文实例讲述了JavaScript事件委托用法。分享给大家供大家参考。具体分析如下: 一、点击页面任何部分触发事件 创建一个script1.js文件。 代码如下:(function() {  eventUtility.addEvent(document, “click”, ...

    JavaScript事件委托技术实例分析

    本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下: 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多...

    JavaScript事件委托实例分析

    主要介绍了JavaScript事件委托的用法,以实例形式分析了javascript事件委托的实现方法,需要的朋友可以参考下

    JavaScript事件委托实现原理及优点进行

    主要介绍了JavaScript事件委托实现原理及优点进行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    javascript事件委托的用法及其好处简析

    本文为大家简单介绍了javascript事件委托的用法及其好处,供大家参考,具体内容如下 事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果, 好处:提高性能,新添加的元素还会有之前的事件。 event对象:事件...

    Evt:Javascript 事件委托

    Javascript 事件委托。 应该比,因为它有命名空间 :smiling_face_with_sunglasses: . 缩小时约 2.3kb,gzip 时约 930 字节。 应用程序接口 // create a new instance var evt = new Evt ( '#mydiv' ) ; // Works ...

    JavaScript之事件委托.pdf

    JavaScript之事件委托

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

    javascript事件冒泡,事件捕获和事件委托详解  1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的...

    JavaScript事件委托的技术原理探讨示例

    如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子...

    Dega:纯 JavaScript 事件委托库

    纯 JavaScript 上的事件委托库。 简单,小,只有 1.2kb 压缩和大约 620 字节的 gzip。 在最新的 Chrome、Firefox、Safari、Opera、IE9+ 上测试。安装您可以使用 Dega 作为全局对象、AMD 或 CommonJS 模块。安装为 ...

    JavaScript事件代理和委托详解

    当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。 这主要得益于浏览器的事件冒泡机制,下面我们具体举个例子来解释如何使用这个特性。 这个例子主要取自...

Global site tag (gtag.js) - Google Analytics