事件委托

最新推荐文章于 2024-06-10 17:00:16 发布

cqj0008

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量264

点赞数

分类专栏： jquery案例文章标签：事件委托

本文链接：https://blog.csdn.net/cqj0008/article/details/78825117

版权

jquery案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

委托事件
1.事件委托: 获取父元素,on事件,click事件,子元素,回调函数里面写需要委托的代码

html部分:

    <ul>
        <p>12321321</p>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

css部分:

    <style type="text/css">
        ul {
            overflow: hidden;
        }
        li {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            float: left;
            margin: 20px;
        }
    </style>

js部分:

    <script type="text/javascript" src="jq1.7.2/jquery.js"></script>
    <script type="text/javascript">

    $(function () {
        $('ul').on('click','li',function () {
            alert(0)
        })
    })
    </script>