jquery on、bind、delegate方法简单总结

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30851409

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量47

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zou1234/p/8309992.html

本文介绍了jQuery中事件处理的方法，包括on、bind和delegate等函数的使用方式与特点。重点讲解了事件委托的实现机制及其在实际开发中的应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery/jquery-1.11.3.min.js"></script>
</head>
    <div class="pop">
        <li class="Li">1</li>
        <li class="Li">2</li>
        <li class="Li">3</li>
        <li class="Li">4</li>
    </div>
<body>
<script>
    /****************************************关于 on *************************************************/
    //自 jQuery 版本 1.7 起，on()方法是bind()live()和delegate() 方法的新的替代品。该方法给 API 带来很多便利
    //该方法可用于事件委托
    $('div').on('click','li',function () {
        alert($(this).text())
    });
    $('.pop').on('click','.Li',function () {  //这种写法是为了区别选择器的时候经常忘记Li的那个点但其实没影响
        alert($(this).text())
    });

    //注册多个事件情况写法
    $('div').on({
        click:function () {
            console.log($(this).text())
        },
        mouseover:function () {
            console.log($(this).text())
        }
    },'li');
    /*****************************************关于 bind ***************************************************/
    //不支持事件委托
    $('div').bind('click mouseover',function () { //绑定多个事件
        alert($(this).text())
    })


    /*****************************************关于 delegate ************************************************/
    //支持事件委托
    $('div').delegate('li','click',function () {   //写法位置有点区别
        alert($(this).text())
    })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/zou1234/p/8309992.html