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

在了解什么是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>

<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>

<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 = nullbreak;}
//否则，将当前元素父元素赋给elel=el.parentNode}
//如果最后el不为null，则打出'ok'if(el){console.log('ok')}
//否则，打出'你点击的不是li'else console.log('你点击的不是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>

<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的内容。这就是用事件委托实现动态监控。

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/zjx2011/p/8447512.html

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

详解事件代理（事件委托）以及应用场景
事件代理(也称事件委托)事件代理,俗地来讲,就是把⼀个元素响应事件 ( click . keydown ......)的函数委托到另⼀个元素前⾯讲到,事件流的都会经过三个阶段: 捕获阶段 -> ...
Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
JavaScript：事件冒泡和事件委托
2019独角兽企业重金招聘Python工程师标准>>> JavaScript事件代理和委托(Delegation) JavaScript事件冒泡和事件委托 JavaScript:通过 ...
js中的事件委托或是事件代理详解(转载)
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
js事件委托或事件代理
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
JS中的事件委托/事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
JS中的事件委托 / 代理详解
[前言] 事件委托/代理是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的 [主体] 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用 ...
JS 事件代理和事件委托
目录事件委托的概念理解为什么要用事件委托事件委托的原理: 事件代理(委托)实现总结: 事件委托的概念理解为什么叫事件委托?它还有一个名字叫事件代理. JavaScript高级程序设计上讲:事 ...

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

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

最新文章

热门文章