事件委托 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
        ul{background: #ccc}
        li{padding: 10px 0;margin: 10px 0;background: red}
    
    </style>
</head>
<body>
    <ul>
        <li>link1</li>
        <li abc="l">link2</li>
        <li abc="l">link3</li>
        <li abc="l">link4</li>
        <li>link5</li>
    </ul>
</body>
<script>
    // var ali = document.querySelectorAll("ul li");
    // for(var i=0;i<ali.length;i++){
    //     ali[i].onclick = function(){
    //         console.log(this.innerHTML)
    //     }
    // }

    var oul = document.querySelector("ul")
    oul.onclick = function(eve){
        var e = eve || window.event;
        var t = e.target || e.srcElement;//target 属性规定哪个 DOM 元素触发了该事件。//target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 //鼠标真实点到的那个元素

        if(t.getAttribute("abc") == "l"){
            console.log(e.target.innerHTML)
        }
        
    }

    // 事件委托：
    //     将多个相同元素的相同事件，添加给页面上现存的共同的父元素，利用事件冒泡，配合事件源，找到真正点击的元素。

    // 优势：
    //     1.节省性能
    //     2.可以给页面上暂时不存在的元素绑定事件

    // 缺点：
    //     this不好用了

</script>
</html>

 

posted @ 2019-08-28 17:56  菜鸟小何  阅读(196)  评论(0)  编辑  收藏  举报