事件委托的实现
博客专区 > ddyIT 的博客 > 博客详情
事件委托的实现
ddyIT 发表于1年前
事件委托的实现
  • 发表于 1年前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0
摘要: 一个简单的事件委托,有助于更好的理解时间委托的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box{
    width: 500px;
    height: 500px;
    background-color: pink;    
    }
    #one{
        width: 50px;
    height: 100px;
    background-color: red;    
    margin:20px;

    }
    #two{
        width: 50px;
    height: 100px;
    background-color: red;    
    margin:20px;

    }
    #three{
        width: 50px;
    height: 100px;
    background-color: red;    
    margin:20px;

    }
    </style>
</head>
<body>
<div id='box'>
    <div id='one'></div>
    <div id='two'></div>
    <div id='three'></div>

</div>
    <script>
        var box=document.getElementById('box');

       box.onclick=function(e){
           console.log(e.target.id)
           switch(e.target.id){
               case 'one':
                   alert("one");
                   break;
           case 'two':
           alert("two");
           break;
           case 'three':
           alert('three');
           break;

           }
     
       }

    </script>
</body>
</html>

共有 人打赏支持
粉丝 0
博文 2
码字总数 5341
×
ddyIT
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: