码迷,mamicode.com
首页 > 编程语言 > 详细

javascript举例介绍事件委托的典型使用场景

时间:2018-02-13 22:52:19      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:dem   技术   了解   情况下   attribute   osi   max   on()   operator   

在了解什么是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>
这段代码为一个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>
上面的代码中定义了如图所示的一个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‘)
})
这段代码实现了当点击的区域在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>
这段代码实现的效果如下:
技术分享图片当点击左下角的加号按钮时,会增加一个新的li,同时在点击li时,在控制台输出被点击的li的内容。这就是用事件委托实现动态监控。





javascript举例介绍事件委托的典型使用场景

标签:dem   技术   了解   情况下   attribute   osi   max   on()   operator   

原文地址:https://www.cnblogs.com/zjx2011/p/8447512.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!