事件代理机制

1、HTML

<!DOCTYPE html>
<html>
<head>
    <title>event</title>
</head>
<body>
    <div id="obj1">
        welcome
        <h5 id="obj2">hello</h5>
        <h5 id="obj3">world</h5>
    </div>
    <script type="text/javascript">
        var obj1=document.getElementById('obj1');
        var obj2=document.getElementById('obj2');
        obj1.addEventListener('click',function(){
            alert('hello');
        },false);
        obj2.addEventListener('click',function(){
            alert('world');
        })
    </script>
</body>
</html>

    简单地文档结构：document > html > body > div > h5 

     我们再上边代码的基础上，尝试点击h5标签时，弹出对应的innerHTML。常规的做法是遍历每个h5，然后在每个h5上绑定一个点击事件，这种做法在h5标签少的时候可以使用，但若有很多的h5，那就会导致性能降低。所以有如下代码：

  

2、JavaScript

obj1.addEventListener('click',function(e){
            var e=e||window.event;
            if(e.target.nodeName.toLowerCase()=='h5'){
                alert(e.target.innerHTML);
            }
 
},false);

    由于事件冒泡机制，点击了h5后会冒泡到div,此时就会触发绑定在div上的点击事件，再利用target找到事件实际发生的元素，就可以达到预期的效果。

 

posted on 2021-03-26 17:00  zhishiyv  阅读(65)  评论(0)  编辑  收藏  举报

导航