<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>
<body>
    <div style="width: 500px;height: 300px;border: 2px solid tomato;border-radius: 5px;margin: 100px auto;padding: 20px;">
        <ul id="oul" style="margin: 0;padding: 0;width: calc(100% - 20px);height: calc(100% - 20px);border: 2px solid gray;border-radius: 5px;padding: 10px;">
          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_1</li>
          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_2</li>
          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_3</li>
          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_4</li>
          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_5</li>
          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_6</li>
          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_7</li>
          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_8</li>
        </ul>
      </div>
      <script type="text/javascript">
            var oul = document.getElementById('oul');    //不使用事件委托方式
            var this_li = oul.getElementsByTagName('li');
            for (var i = 0; i<this_li.length; i++) {
                this_li[i].onclick = function (ev) {
                    console.log(this.innerHTML);
                }
            }
   ------------- 使用委托方法 -------------------
            var oul = document.getElementById('oul');     //使用事件委托方式
            oul.onclick = function (ev) {
                console.log(ev)
                var ev = ev    || window.event;
                console.log(ev.target)
                var target = ev.target || evsrcElement;　　// 获取节点
                console.log(target)
                if(target.nodeName.toLowerCase() == 'li'){   //nodeName的意思获得DOM元素的节点名称 //toLowerCase()的方法用以是，把获取到的节点名称转换为小写 也可以直接用localName
                    console.log(target.innerHTML)
                }
            }
        </script>
</body>
</html>

在vue中实现事件委托

　　在父元素上绑定点击事件

<div class="panel" @click="rowClick1($event)">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <a href="#"></a>
</div>

使用e.target可以获得点击时获取的所有属性与值,我们可以通过e.target.localName获取点击的标签名,来进行对比判断,相同则触发绑定事件

<script>
  rowClick1(e){
     console.log(e.target);        
     if(e.target.localName === 'li'){
        console.log("触发事件1");            
     }else if(e.target.localName === 'a'){
        console.log("触发事件2");   
     }
  },
</script>

js的委托事件----Vue

在vue中实现事件委托

猜你喜欢