原生事件委派

最新推荐文章于 2024-06-26 09:15:00 发布

哇偶哇偶Z

最新推荐文章于 2024-06-26 09:15:00 发布

阅读量343

点赞数

分类专栏： JS基础

本文链接：https://blog.csdn.net/ddwddw4/article/details/82965120

版权

JS基础专栏收录该内容

103 篇文章 1 订阅

订阅专栏

因为习惯了jq中去用on()去实现事件委派，原生的反而有点遗忘，所以写个小例子回顾下，当然jq的写法比原生的用起来实在方便太多了。

原生js的事件委派：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生事件委派</title>
</head>
<body>
<ul id = "oUl">
  <li class = "item">1</li>
  <li class = "item">2</li>
  <li class = "item">3</li>
  <li class = "item">4</li>
  <li class = "item">5</li>
</ul>
<button id="btn">add</button>
</body>
<script>
  var items=document.querySelectorAll('.item');
  var oUl=document.getElementById('oUl');
  var btn=document.querySelector('#btn');
  var num=6;
  oUl.addEventListener('click',function (ev) {
    ev=ev||window.event;
    var target=ev.target;
    console.log(target)
    // 获取目标元素
    if (target.nodeName == 'LI') {
      alert(target.innerHTML);
    }
  });
  btn.onclick=function () {
    var ite=document.createElement('li');
    ite.setAttribute('class','item');
    ite.innerHTML=num;
    // var ite="<li class ='item'>"+num+"</li>";
    oUl.appendChild(ite);
    num++;
  }
</script>
</html>

哇偶哇偶Z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生事件委派

因为习惯了jq中去用on()去实现事件委派，原生的反而有点遗忘，所以写个小例子回顾下，当然jq的写法比原生的用起来实在方便太多了。原生js的事件委派：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;原生事件
复制链接

扫一扫

专栏目录