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
$('#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('你移入了按鈕！');
    }
});