jQuery_事件_live

最新推荐文章于 2019-10-02 10:29:56 发布

田江

最新推荐文章于 2019-10-02 10:29:56 发布

阅读量267

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript从入门到精通事件 jQuery

本文链接：https://blog.youkuaiyun.com/jiang7701037/article/details/79143911

JavaScript从入门到精通同时被 3 个专栏收录

147 篇文章

订阅专栏

jQuery

24 篇文章

订阅专栏

事件

5 篇文章

订阅专栏

本文介绍jQuery中的live方法，探讨其事件委托原理，并通过实例代码展示了如何利用live为动态添加的元素绑定点击事件。同时，文章指出live方法在jQuery 1.9及更高版本中已被移除的原因。

解释一下：

live使用了事件委托，即把本该绑定在某个元素上的事件绑定在了HTML根元素上，由于这种做法比起delegate的效率低，所以，在jQuery1.9+中删除了live。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        #box{
            position:relative;
            width:400px;
            height:300px;
            background-color: red;
        }

    </style>
</head>
<body style="height:1000px;">
    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
    </ul>

    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li class="t">第3个li</li>
    </ul>
    <div id="box">
        我是box
    </div>
    <input id="btn" type="button" value="添加一个li">
</body>
</html>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    let ord = 3;

$(function () {
/*
    $("ul").click(function (event) {
        let evt = event || window.event;
        console.log("ul,currentTarget:"+evt.currentTarget);
        console.log("ul,target:"+evt.target);
    });

    $("body").click(function (event) {
        let evt = event || window.event;
        console.log("body,currentTarget:"+evt.currentTarget);
        console.log("body,target:"+evt.target);
        console.log("您点击的是:"+evt.target.innerHTML);
    });
*/

    //live使用的是事件委托（把本该绑定在指定元素上的事件类型和事件处理函数委托给DOM根元素）
    $("li").live("click",function () {
        alert(this.innerHTML);
    });


    $("#btn").click(function () {
        ord++;
        $("ul").append("<li>第"+ord+"个li</li>");
    });


    /*
    $("li").live("click",function () {
        if(evt.target 在 $("li")){
            alert(this.innerHTML);
        }
    });

    $(".t").live("click",function () {
        if(evt.target 在 $(".t")){
            alert(this.innerHTML);
        }
    });

    $("#box ul").live("click",function () {
        if(evt.target 在 $("#box ul")){
            alert(this.innerHTML);
        }
    });

    $("#box").live("click",function () {
        alert(this.innerHTML);
    });
*/


});

</script>