欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery綁定點擊事件與改變事件的方式總結及多個元素綁定多個事件

 更新時間：2022年12月13日 10:59:28   作者：小苗吃不夠  
我們一說到jQuery中對于元素的修改,就是元素的內容、屬性、樣式的修改,下面這篇文章主要給大家介紹了關于jQuery綁定點擊事件與改變事件的方式總結及多個元素綁定多個事件的相關資料,需要的朋友可以參考下

簡單的html頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery綁定點擊事件</title>
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        // 等待頁面加載結束
        $(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="點擊提交" />
    </form>
</body>
</html>

1. 綁定click點擊事件的幾種方式：

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. 多個事件綁定多個元素（與上方html演示頁面不關聯(lián)）：

多個元素綁定多個事件：

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

注：bind()的用法：

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

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

on()的用法：

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

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

區(qū)別：

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

總結

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

相關文章

最新評論