日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

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

作者：小苗吃不夠 ? 更新時(shí)間： 2023-01-11 編程語(yǔ)言

簡(jiǎn)單的html頁(yè)面：

<!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">
        // 等待頁(yè)面加載結(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演示頁(yè)面不關(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é)

原文鏈接：https://blog.csdn.net/cheng1a/article/details/126701078

欄目分類
最近更新