`
whmjxa
  • 浏览: 16126 次
  • 性别: 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事件委托的技术原理 – WEB骇客1

    JavaScript事件委托是一种优化网页性能和管理动态元素的事件处理策略。在传统的事件处理方式中,我们通常会在每个需要响应事件的元素上单独设置事件监听器。然而,这种方法在元素数量较多或者元素动态增删时,可能...

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

    JavaScript事件委托是一种高效处理大量动态DOM元素事件的技术,它基于事件冒泡机制,将事件监听器添加到父元素而非所有子元素上。这种技术的主要优点在于性能优化和动态添加DOM元素的适应性。 1. **什么是事件委托...

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

    JavaScript事件委托是一种优化事件处理的策略,它基于事件流(冒泡和捕获)的机制,使得可以在一个共同的祖先元素上处理多个子元素的事件,而不是为每个子元素单独绑定事件处理器。这种方式有助于减少内存消耗,提高...

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

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

    JavaScript事件委托实例分析

    JavaScript事件委托是一种优化网页性能的事件处理技术,它利用了事件冒泡的原理,将事件处理器绑定到一个共同的父元素上,而不是每个子元素都单独绑定。这种方法减少了内存消耗和DOM操作,尤其是在动态添加或删除...

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

    在Web前端开发中,JavaScript事件委托是一种高效处理DOM元素事件的技术。事件委托的核心思想是利用了事件冒泡机制,即子元素上触发的事件会向上冒泡到父级元素。通过在父级元素上设置事件监听器,可以捕捉到子元素的...

    JavaScript事件委托技术实例分析

    JavaScript事件委托技术是一种有效的事件处理机制,它主要用于提高程序性能,尤其是在处理大量具有相似事件响应的DOM元素时。这种技术基于事件冒泡原理,即在一个DOM元素上触发的事件会向上冒泡到更上层的DOM元素。...

    JavaScript事件委托用法分析

    JavaScript事件委托是一种利用事件冒泡原理来管理事件的技术,它允许开发者将事件监听器添加到一个父元素上,而不是给每一个子元素单独添加事件监听器。这种方式在处理大量子元素或动态生成的元素时非常有效,可以...

    【JavaScript源代码】JavaScript给事件委托批量添加事件监听详细流程.docx

    ### JavaScript事件委托详解 #### 一、事件委托概念 **事件委托**是一种常见的JavaScript编程技巧,主要用于优化事件处理。它的核心思想是利用事件冒泡机制,将原本应该绑定在子元素上的事件处理器绑定在其父元素...

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

    JavaScript事件委托是一种优化网页性能和简化事件处理的策略。它基于事件冒泡的特性,即事件从最深的节点开始,然后逐级向上层元素传播。通过在父元素上设置事件监听器,而不是在每个子元素上分别设置,可以极大地...

    Evt:Javascript 事件委托

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

    JavaScript之事件委托.pdf

    JavaScript中的事件委托是一种高效处理大量动态元素事件的技术,它的核心思想是将事件监听器绑定到父级元素上,而不是直接绑定到每一个子元素。这种方法基于事件冒泡的机制,能够减少对DOM的操作,提高页面性能。 ...

    Dega:纯 JavaScript 事件委托库

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

    JavaScript事件代理和委托详解

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

Global site tag (gtag.js) - Google Analytics