jQuery事件之on()方法绑定多个选择器,多个事件

$(document).on('click', '#header .top, #main .btn', function () {
     // code...
 });

on()方法绑定多个事件

$(".box1").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "p");

$(".box1 p").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
});

用on()方法绑定多个选择器、多个事件

$('#header .top, #main .btn').on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}); 

附上测试小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div {
        width: 200px;
        height: 200px;
    }
    
    .box1 p {
        background-color: #009cff;
    }
    
    .box2 .p2 {
        background-color: #f40;
    }
    </style>
</head>

<body>
    <div class="box1">
        这是第一个
        <p class="p1">11111</p>
        <p>22222</p>
        <p>33333</p>
        <p>55555</p>
    </div>
    <div class="box2">
        <p class="p2">这是第二个</p>
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        // 绑定多个事件
        // $(".box1 p").on({
        //     mouseenter: function() {
        //         $(this).css('background-color','#ccc');
        //     },
        //     mouseleave: function() {
        //         $(this).css('background-color','#009cff');
        //     },
        //     click: function() {
        //         $(this).css('background-color','#f40');
        //     }
        // });
        // 绑定多个选择器、多个事件
        $('.box1 .p1,.box2 .p2').on({
            mouseenter: function() {
                $(this).css('background-color', '#ccc');
            },
            mouseleave: function() {
                $(this).css('background-color', '#009cff');
            },
            click: function() {
                $(this).css('background-color', '#f40')
            }
        });
    });
    </script>
</body>
</html>
posted @ 2016-04-27 16:40  害羞熊5  阅读(626)  评论(3编辑  收藏  举报