jQuery中的事件绑定

之前讲了这么多的原生JS，这次换换口味吧，讲讲曾经风靡一时的JS库——JQuery。

一、jQuery事件绑定的方法

1. 直接使用事件方法

【jQuery对象】.【事件名】(【方法】)

比如给一个按钮添加点击事件：

<!--HTML-->
<input type="button" id="btn" value="按钮" />

//JS
$('#btn').click(function(){
    console.log('你点击了按钮！');
});

2. bind()

【jQuery对象】.bind("【事件名】",【方法】)

上面例子中的JS代码可以写成下面这样：

//JS
$('#btn').bind("click",function(){
    console.log('你点击了按钮！');
});

相应的取消绑定可使用unbind()方法。

3. on()

【jQuery对象】.on("【事件名】",【方法】)

上面例子中的JS代码可以写成下面这样：

//JS
$('#btn').on("click",function(){
    console.log('你点击了按钮！');
});

相应的取消绑定可使用off()方法。

需要注意的是，on()和off()是从jQuery1.7+版本才开始有的。

二、jQuery事件绑定的种类

1. 多个选择器绑定同一个事件

$("【选择器1】,【选择器2】").on("【事件名】",【方法】)

<!--HTML-->
<input type="button" id="btn1" value="按钮一" />
<input type="button" id="btn2" value="按钮二" />

//JS
$('#btn1,#btn2').on('click',function(){
    console.log('你点击了按钮！');
});

2. 多个事件绑定同一个方法

【jQuery对象】.on("【事件名1】 【事件名2】",【方法】)

<!--HTML-->
<input type="button" id="btn" value="按钮" />

//JS
$('#btn').on('click mouseover',function(){     // 这时候鼠标移入按钮或点击按钮都会执行后面的方法
    console.log('你点击了按钮！');
});

3. 多个事件绑定不同方法

【jQuery对象】.on({ "【事件名1】" :【方法1】, "【事件名2】" :【方法2】})

<!--HTML-->
<input type="button" id="btn" value="按钮" />

//JS
$('#btn').on({
    'click': function(){
        console.log('你点击了按钮！');
    },
    'mouseover': function(){
        console.log('你移入了按钮！');
    }
});