在了解什么是DOM事件以及给DOM事件绑定监听器的几种方法后，我们来谈谈事件委托。
1. e.target 和 e.currentTarget
当我们给目标元素target 绑定一个事件监听器target.addEventListener(event,function(){}), 并指定回调函数function(e), 函数的参数e表示事件。此时e.target 与 e.currentTarget分别表示自己触发事件的元素与被监听的元素
<html>

<body>

<ul style='list-style:none;max-width:200px;border:1px solid;'>

  <li>点我试试</li>

<ul>

<script>

  (document.querySelector('ul')).addEventListener('click' ,function(e){

    console.log('e.target')

    console.log(e.target)

    console.log('e.currentTarget')

    console.log(e.currentTarget)

  })

  </script>

</body>

</html>


x
 
1
<html>
2
<body>
3
<ul style='list-style:none;max-width:200px;border:1px solid;'>
4
  <li>点我试试</li>
5
<ul>
6
<script>
7
  (document.querySelector('ul')).addEventListener('click' ,function(e){
8
    console.log('e.target')
9
    console.log(e.target)
10
    console.log('e.currentTarget')
11
    console.log(e.currentTarget)
12
  })
13
  </script>
14
</body>
15
</html>
16






























这段代码为一个ul元素绑定了一个监听器，当ul上发生点击事件时，分别输出e.target和e.currentTarget的值。


当点击ul中的li元素时，该段代码的在控制台输出的结果如下：


此时，e.target为直接点击的元素li，而e.currentTarget为被监听的元素ul。由此我们可以得到一个启发，触发事件的元素与被监听的元素不一定是一个元素。于是就来到了本文的重点内容——事件委托。


2. 如何进行事件委托


  什么情况下回用到事件委托呢?举两个例子


1） 当存在多个元素可以共用同一个监听器




<body>

<ul>

  <li>点<span>这里</span></li>

  <li>点这里</li>

</ul>

<style>

  ul, li{

  list-style:none;

  border:1px solid;

  padding:10px;

  background:#ddd

}

li{

  text-align:center;

  margin:10px;

  background:#fff

}

</style>

</body>

</html>


























x










 










1




<body>








2




<ul>








3




  <li>点<span>这里</span></li>








4




  <li>点这里</li>








5




</ul>








6




<style>








7




  ul, li{








8




  list-style:none;








9




  border:1px solid;








10




  padding:10px;








11




  background:#ddd








12




}








13




li{








14




  text-align:center;








15




  margin:10px;








16




  background:#fff








17




}








18




</style>








19




</body>








20




</html>












21


































上面的代码中定义了如图所示的一个ul，它包裹着两个li，第一个li中还有一个子元素span。如果我们希望点击两个li均执行同一条命令时，第一种方法是为每个li都绑定一个监听器，但当li很多时，这样处理就过于繁琐。


这时我们会想到可以直接监听ul，为ul绑定事件函数，那么只要li存在于ul的内部，点击任意的一个li都会执行这条命令。但同样存在一个问题，当点击li的外部，也就是图中的灰色区域时，命令同样会被执行。


那么如何仅仅在点击li的覆盖区域的时候才执行这段命令呢，可以用以下这段代码。




var ul=document.querySelector('ul')

ul.addEventListener('click',function(e){

  var el = e.target

//判断当前点击的元素是否为li，如果不是，执行以下的while循环

  while(el.tagName !== 'LI'){

//如果点击的元素为ul，直接跳出循环

    if(el === ul){

      el = null

      break;

    }

//否则，将当前元素父元素赋给el

      el=el.parentNode

  }

//如果最后el不为null，则打出'ok'

  if(el){

    console.log('ok')

  }

//否则，打出'你点击的不是li'

  else console.log('你点击的不是li')

})


























x










 










1




var ul=document.querySelector('ul')








2




ul.addEventListener('click',function(e){








3




  var el = e.target








4




//判断当前点击的元素是否为li，如果不是，执行以下的while循环








5




  while(el.tagName !== 'LI'){








6




//如果点击的元素为ul，直接跳出循环








7




    if(el === ul){








8




      el = null








9




      break;








10




    }








11




//否则，将当前元素父元素赋给el








12




      el=el.parentNode








13




  }








14




//如果最后el不为null，则打出'ok'








15




  if(el){








16




    console.log('ok')








17




  }








18




//否则，打出'你点击的不是li'








19




  else console.log('你点击的不是li')








20




})












21


































这段代码实现了当点击的区域在li范围内时，不管点击的是li元素本身，还是li的子元素span，都会执行console.log('ok')，但当点击区域超出li的范围，则执行' console.log('你点击的不是li')'。这就成功实现了一个事件委托。


（2） 用事件委托实现动态监控


还有一种情况，也会用到事件委托，那就是需要动态监控的时候。


看以下代码：




<html>

<body>

<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

</ul>

  <button id=addButton>+</button>

</body>

</html>

<style>

li{

  border: 1px solid;

}

</style>

<script>

addButton.onclick = function(){

  var li = document.createElement('li')

  li.textContent = 'new'

  document.querySelector('ul').appendChild(li)

}

document.querySelector('ul').onclick = function(e){

  console.log(e.target)

}

</script>

</body>

</html>


























x










 










1




<html>








2




<body>








3




<ul>








4




  <li>1</li>








5




  <li>2</li>








6




  <li>3</li>








7




  <li>4</li>








8




</ul>








9




  <button id=addButton>+</button>








10




</body>








11




</html>








12




<style>








13




li{








14




  border: 1px solid;








15




}








16




</style>








17




<script>








18




addButton.onclick = function(){








19




  var li = document.createElement('li')








20




  li.textContent = 'new' 








21




  document.querySelector('ul').appendChild(li)








22




}








23




document.querySelector('ul').onclick = function(e){








24




  console.log(e.target)








25




}








26




</script>








27




</body>








28




</html>












29





































这段代码实现的效果如下：
当点击左下角的加号按钮时，会增加一个新的li，同时在点击li时，在控制台输出被点击的li的内容。这就是用事件委托实现动态监控。




































												


											
javascript举例介绍事件委托的典型使用场景的更多相关文章
	

    
								
  1. js实例分析JavaScript中的事件委托和事件绑定
		
    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
    
		
    2. 
						
  2. JavaScript中的事件委托（转至大佬）
		
    转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...
    
		
    3. 
						
  3. JavaScript中的事件委托机制跟深浅拷贝
		
    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
    
		
    4. 
						
  4. 简单说 JavaScript中的事件委托(下)
		
    说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...
    
		
    5. 
						
  5. javascript中的事件委托
		
    这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...
    
		
    6. 
						
  6. Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制
		
    一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
    
		
    7. 
						
  7. JS 事件绑定、事件监听、事件委托详细介绍
		
    原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
    
		
    8. 
						
  8. JavaScript事件代理和事件委托
		
    一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的 ...
    
		
    9. 
						
  9. javascript事件委托和jquery事件委托
		
    元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 23-吝啬的国度（vector+深搜）
			
    吝啬的国度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市, ...
    
			
    2. 
						
  2. Golang之继承，多重继承（struct）
			
    热乎的代码来了 package main import "fmt" /* 继承 一个结构体嵌到另一个结构体,称作组合 匿名和组合的区别 如果一个struct嵌套了另一个匿名结构体, ...
    
			
    3. 
						
  3. C语言源字符集与执行字符集
			
    参考: http://blog.csdn.net/yucan1001/article/details/7188267   http://blog.csdn.net/dbzhang800/article ...
    
			
    4. 
						
  4. 服务器上如何将D盘修改为E盘
			
    1.计算机管理→磁盘管理 2.右键点击需要调整的磁盘→更改驱动器号和路径 3.在弹出的设置框中→更改 4.点击右边的下拉箭头▼→选择一个盘符→确定 注意:如果盘符混乱,需要理顺,因为有些盘符占有了,不 ...
    
			
    5. 
						
  5. mutex 实现 只允许一个进程
			
    static class Program { [STAThread] static void Main() { bool createdNew=false; Mutex mutex = new Mut ...
    
			
    6. 
						
  6. UVa 1599 Ideal Path （两次BFS）
			
    题意:给出n个点,m条边的无向图,每条边有一种颜色,求从结点1到结点n颜色字典序最小的最短路径. 析:首先这是一个最短路径问题,应该是BFS,因为要保证是路径最短,还要考虑字典序,感觉挺麻烦的,并不好 ...
    
			
    7. 
						
  7. 加载 bean.xml 的几种方式 (java or web project)
			
    1. java project ApplicationContext ctx = new ClassPathXmlApplicationContext("classpath:bean1.xm ...
    
			
    8. 
						
  8. RocketMQ 自定义文件路径
			
    一 .1. 修改store路径2. 修改logs路径3. 修改rmq_bk_gc.log路径4. 修改rmq_srv_gc.log路径二 .1. 获取正确的rocketmq 源码2. 地址:https ...
    
			
    9. 
						
  9. 10-12Linux流编程的一些知识点
			
    第五章  Linux 的流编程 Linux流操作基础      流和文件的关系:流相当于一个缓冲区,可以将文件描述符和流关联,获得相应的缓冲区,以此来提高系统对磁盘的存取速度.     流的结构和操作 ...
    
			
    10. 
						
  10. 微信小程序开发中的二三事之网易云信IMSDK DEMO
			
    本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
    
			
    11.