快捷導(dǎo)航

jQuery綁定點(diǎn)擊事件與改變事件的方式總結(jié)及多個(gè)元素綁定多個(gè)事件

更新時(shí)間：2022年12月13日 10:59:28 作者：小苗吃不夠

我們一說到j(luò)Query中對(duì)于元素的修改,就是元素的內(nèi)容、屬性、樣式的修改,下面這篇文章主要給大家介紹了關(guān)于jQuery綁定點(diǎn)擊事件與改變事件的方式總結(jié)及多個(gè)元素綁定多個(gè)事件的相關(guān)資料,需要的朋友可以參考下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery綁定點(diǎn)擊事件</title>
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        // 等待頁面加載結(jié)束
        $(document).ready(function(){
           //此處寫jquery
        });
    </script>
</head>
<body>
    <form>
        姓名：<input type="text" id="name_input" value="" /><br/>
        年齡：<select id="age_sel">
            <option>18</option>
            <option>19</option>
            <option>20</option>
            <option>21</option>
        </select>
        <br/>
        <input type="submit" id="sub_click" value="點(diǎn)擊提交" />
    </form>
</body>
</html>

1. 綁定click點(diǎn)擊事件的幾種方式：

click事件綁定：

$("#sub_click").click(function(){
	var name = $("#name_input").val();
	alert(name);
});

使用bind()函數(shù)綁定click：

 $("#sub_click").bind("click",function(){
     var name = $("#name_input").val();
     alert(name);
 });

使用on()函數(shù)綁定click：

 $("#sub_click").on("click",function(){
     var name = $("#name_input").val();
     alert(name);
 });

2. 綁定監(jiān)聽改變事件的幾種方式：

change事件綁定：

$("#age_sel").change(function(){
    var age = $("#age_sel").val();
    alert(age);
});

使用bind()函數(shù)綁定click：

$("#age_sel").bind("change",function(){
    var age = $("#age_sel").val();
    alert(age);
});

使用on()函數(shù)綁定click：

$("#age_sel").on("change",function(){
    var age = $("#age_sel").val();
    alert(age);
});

3. 多個(gè)事件綁定多個(gè)元素（與上方html演示頁面不關(guān)聯(lián)）：

多個(gè)元素綁定多個(gè)事件：

//這里的元素與事件是一一對(duì)應(yīng)的，元素a與click事件對(duì)應(yīng)，元素b與change事件對(duì)應(yīng)
//元素a不能觸發(fā)change事件，同理元素b不能觸發(fā)click事件
$("#a,#b").on("click,change",function(){
    //事件操作
});

注：bind()的用法：

$("a").bind("click",[data],function(){})

其事件的綁定者是固定的，就是a，第一個(gè)參數(shù)是事件，第二個(gè)參數(shù)可選，是要傳遞給回調(diào)函數(shù)的event.data參數(shù)，第三個(gè)參數(shù)是回調(diào)函數(shù)。

on()的用法：

$("body").on("click",'a',[data],function(){})

相比于bind()，除了事件的綁定者（on事件的是body），在on的參數(shù)中還增加了一個(gè)選擇器a，而事件將作用于這個(gè)a上面。

區(qū)別：

正是由于on()函數(shù)的參數(shù)中多出了一個(gè)選擇a，因此我們可以為動(dòng)態(tài)生成的元素也綁定事件，這是bind()函數(shù)做不到的。

總結(jié)

到此這篇關(guān)于jQuery綁定點(diǎn)擊事件與改變事件的方式總結(jié)及多個(gè)元素綁定多個(gè)事件的文章就介紹到這了,更多相關(guān)jQuery綁定點(diǎn)擊事件與改變事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: