Javascript委托事件浅析

明白了原生态的事件冒泡和事件捕获的问题。事件捕获就是从dom的根节点也就是document到事件触发的点，形式是至上到下，从根部到事件点。而事件冒泡则是从子元素到事件的触发点，至下而上。懂得了这点就好半多了，今天浏览了好多关于事件冒泡的文章，但是都没有做过相关的比较，对于一个新手来说是有点疑惑的，其实理论和实践同样重要。

下面来总结下今天的成果
这两天一直在琢磨这个图片浏览，也就是超链接的地址时一张图片，点击的时候对应的显示出来。下面上我的code，新手还望大家多多关照。

<body>
		<div id="all">
			<div id="content">
				<ul>
					<li>
						<a href="img/1.jpg" title="我是小龙女A">A点击我查看详情</a>
					</li>
					<li>
						<a href="img/2.jpg" title="我是小龙女B">B点击我查看详情</a>
					</li>
					<li>
						<a href="img/3.jpg" title="我是小龙女C">C点击我查看详情</a>
					</li>
					<li>
						<a href="img/4.jpg" title="我是小龙女D">D点击我查看详情</a>
					</li>
					<li>
						<a href="img/5.jpg" title="我是小龙女E">E点击我查看详情</a>
					</li>
				</ul>
			</div>
		</div>
		<img src="img/1.jpg" id="showpic" title="小龙女">
</body>

最开始我采用遍历添加事件的方法，但是总感觉有哪里对不上号，操作起来太麻烦，后来和一位大神聊了会儿，给出了两个字---委托。在javascript中委托的真实名词其实是代理
把最开始遍历的方法贴上：

//对方法进行封装,其实我这样写没用用到面向对象的思想,而是应该传递一个对象参数
		function showpics(){
		//获取对象 这里我写的不够严谨,没有给上class类名而是直接上的标签名
		var objsa= document.getElementsByTagName("a");
		var source,title,placeholder;
		for(var i=0;i<objsa.length;i++){
			//遍历每个对象,并给其绑定一个click事件
			objsa[i].onclick=function(){
				//这里注解一下this的用法,this指当前对象,看别人的帖子上写事件委托中的不能传递this但是通过 event传递数据
				//如果有那位大神看到我这里的说明,还望告诉我一下 alter("谢谢");
				source=this.getAttribute("href");
				title=this.getAttribute("title");
				placeholder=document.getElementById("showpic");
				//期间我们在没有刷新浏览器的时候数据已经变了,这就是setattribute的能力之处
				//这里我们解释下:准确来讲,这里是由于Dom的工作模式:先加载文档的静态内容,在动态刷新,动态刷新不影响不影响文档的静态内容
				placeholder.setAttribute("src",source);
				placeholder.setAttribute("title",title);
				return false;
			}
		  }
		}

是不是有很多人第一时间都会这样写，而且是潜意识的这样写，但是后来我百度的时候发现事件委托可以很好的帮我们完成这样的事情。首先我大致贴一下事件的语法

element.addEventListener(event, function, useCapture)

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件，可以查看我们完整的
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行，那么会从根节点document开始冒泡到触发事件点儿 false- false- 默认。事件句柄在冒泡阶段执行（默认情况下都是false）

现在贴上用事件处理方式的code：

			//显示图片
			function showpic(whichpic){
				var href=whichpic.getAttribute("href");
				var title=whichpic.getAttribute("title");
				var objshow=document.getElementById("showpic");
				objshow.setAttribute("title",title);
				objshow.setAttribute("src",href);
			}
			//创建委托事件
			function addlistenEvent(){
				var oul=document.getElementById("all");
				oul.addEventListener("click",evenhandlers);
			}
			
			//委托事件处理方式
			function evenhandlers(event){
				var target=event.target||ev.target;
				//这里值得注意下的target.tagName返回过来的是大写,我们根据习惯将其转换为小写
				if(target.tagName.toLocaleLowerCase()=="a")
				{
					showpic(target);
				}
				//默认情况下超链接会跳转,这里我们阻止默认行为
				event.preventDefault();
				//阻止事件继续向父元素继续冒泡
				event.stopPropagation();
			}
			addonloadEvent(addlistenEvent);

Javascript委托事件浅析

猜你喜欢