jQuery_事件绑定如何用on实现事件委托

最新推荐文章于 2023-07-07 16:55:54 发布

田江

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量3.7k

点赞数

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

本文链接：https://blog.csdn.net/jiang7701037/article/details/79143936

版权

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

147 篇文章 79 订阅

订阅专栏

jQuery

24 篇文章 2 订阅

订阅专栏

事件

5 篇文章 1 订阅

订阅专栏

<!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;">
    <div id="box">
        我是box
    </div>
    <input id="btn" type="button" value="删除事件"><br/>

    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
    </ul>
    <input id="btnAdd" type="button" value="添加一个li">
</body>
</html>

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

$(function () {
    //用on完成普通的绑定功能（根bind一样）
    $("#box").on("click mouseover",function () {
        alert(this.innerHTML);
    });

    $("#btn").click(function () {
        //$("#box").off();
        $("#box").off("click",);
    });

    //使用on来完成事件委托（跟delegate一样）
    $("ul").on("click","li",function () {
        alert(this.innerHTML);
    });

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

});

</script>

田江

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
jQuery_事件绑定如何用on实现事件委托

*{ margin:0; padding:0; list-style: none; } #box{ position:relative; width:400px; height:300px; back
复制链接

扫一扫