首页手记事件代理的使用（欢迎指出不足）

事件代理的使用（欢迎指出不足）

标签：

Html/CSS JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>事件代理</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .box{
                padding: 20px;
                background-color: #CCCCCC;
                width: 200px;
                margin: 100px auto;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul id='list'>
                <li>1111111111</li>
                <li>2222222222</li>
                <li>3333333333</li>
                <li>4444444444</li>
                <li>5555555555</li>
            </ul>
        </div>
        <script type="text/javascript">
        //需求：给每一个li元素添加click事件监听器
        //方案：使用事件代理，给父容器添加事件监听，然后使用e.target判断是什么子元素触发的事件
            window.onload=function(){
                var list=document.getElementById('list');
                list.addEventListener('click',function(event){
                    var e=event||window.event;
                    if (e.target&&e.target.nodeName==='LI') {
                        var item=e.target;
                        console.log(item.innerText);
                    } else{
                        console.log('不是li元素触发的');
                    }
                },false)
            }

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

点击查看更多内容