jQuery绑定事件有几种方法？

在jQuery中，实现事件绑定有两种方式，一种是通过事件方法进行绑定，另一种是通过on()方法进行绑定，下面我们分别进行详细讲解。

1. 通过事件方法绑定事件

在前面的学习中，我们已经用过了单个事件的绑定，是通过调用某个事件方法，传入事件处理函数来实现的，如click()、change()等。jQuery的事件和DOM中的事件相比，省略了开头的“on”，如jQuery中的click()对应DOM中的onclick。并且，jQuery的事件方法允许为一个事件绑定多个事件处理函数，只需多次调用事件方法，传入不同的函数即可。

接下来我们通过下面列举jQuery中的一些常用的事件方法。

下面我们通过代码演示事件方法的使用。

<div>绑定事件</div>
<script>
    $("div").click(function(){
        $(this).css("background", "purple");
    });
    $("div").mouseenter(function(){
        $(this).css("background", "skyblue");
    });
</script>

上述代码中，第1行代码定义了div元素。第3～5行代码为div元素绑定单击事件，通过第4行代码修改当前元素背景色为紫色。第6～8行代码为div元素绑定鼠标指针移入事件，实现当鼠标指针移入div元素时，将背景色修改为天蓝色。

2.通过on()方法绑定事件

on()方法在匹配元素上绑定一个或多个事件处理函数，语法如下所示。

element.on(events, [selector], fn)

上述代码中，events表示一个或多个用空格分隔的事件类型，如click;selector表示子元素选择器;fn表示回调函数，即绑定在元素身上的侦听函数。

下面我们通过代码演示on()方法的使用。

//一次绑定一个事件
$("div").on("click", function(){
    $(this).css("background","yellow")
});

//一次绑定多个事件
$("div").on({
    mouseenter: function(){
            $(this).css("background", "skyblue");
    },
    click: function(){
        $(this).css("background", "purple");
    },
    mouseleave: function(){
        $(this).css("background", "blue");
    }
});

// 为不同事件绑定相同的事件处理函数
$("div").on("mouseenter mouseleave", function(){
    $(this).toggleClass("current");
});

上述代码演示了on()方法的3种用法。第1种用法非常简单，和事件方法的方式类似；第2种用法是为on()方法传入了一个对象，对象的属性名表示事件类型，属性值表示对应的事件处理函数;第3种用法是同时为mouseenter、mouseleave事件绑定相同的事件处理函数，实现div元素的current类的切换效果。

猜你喜欢

jQuery和vue的区别是什么?

jQuery中attr()和prop()有什么不同？

jQuery元素内容操作的方法有多少种？

黑马程序员web前端培训课程