js-事件委托

事件委托一般用于动态生成的元素中使用,如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .item{
        width:100px;
        height:100px;
        background:#1ABC9C;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <ul>
            <li class="item">
                <div class="title">
                    今天天气不错
                </div>
                <p class="desc">xxxxxxs</p>
            </li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
                
        </ul>
    </div>
<script type="text/javascript">
    $(function(){
　　
        var lio = "<li class='item'>5</li>";
        $("ul").append(lio);

        $("li.item").click(function(){
        　　/*动态生成的li5 是不会执行点击事件*/
        })
    })

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

解决这个问题我们就要利用事件捕捉的原理

$(function(){
        $("div > ul").on("click",function(event){
            var e = event.target;
            /*事件委托*/
            if( e.className == "item"){
                alert("li.item");
            }
        });
        var lio = "<li class='item'>5</li>";
        $("ul").append(lio);


    })

在上面解决的方案中,并不是直接给li绑定事件,而是给所有的li父级元素绑定事件.根据事件扑捉的原理,事件会自上而下传递给li,

我们只需要通过一些简单的条件判断来确定我们的目标元素即可;