jQuery 事件(二) 表單事件

布still發表於2017-08-15
jQuery事件

blur與focus事件

focusin、focusout事件 與blur、focus事件均用於表單處理事件，它們之間的本質區別：是否支援冒泡處理

例項：

<div>
  <input type="text" />
</div>

其中input元素可以觸發focus()事件

div是input的父元素，當它包含的元素input觸發了focus事件時，它就產生了focusin()事件

focus()在元素本身產生，focusin()在元素包含的元素中產生

blur與focusout也亦是如此

change事件

<input>元素，<textarea>和<select>元素的值都是可以發生改變的，開發者可以通過change事件去監聽這些改變的動作

input元素

監聽value值的變化，當有改變時，失去焦點後觸發change事件。對於單選按鈕和核取方塊，當使用者用滑鼠做出選擇時，該事件立即觸發

select元素

對於下拉選擇框，當使用者用滑鼠作出選擇時，該事件立即觸發

textarea元素

多行文字輸入框，當有改變時，失去焦點後觸發change事件

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 100%;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>input、textarea與select</h2>
    <div class="left">
        <div class="aaron">input：
            <input class="target1" type="text" value="監聽input的改變" />
        </div>
        <div class="aaron1">select：
            <select class="target2">
                <option value="option1" selected="selected">Option 1</option>
                <option value="option2">Option 2</option>
            </select>
        </div>
        <div class="aaron3">textarea：
            <textarea class="target2" rows="3" cols="20">多行的文字輸入控制元件</textarea>
        </div>
    </div>
    輸出結果：
    <div id="result"></div>
    <script type="text/javascript">
    
    //監聽input值的改變
    $(`.target1`).change(function(e) {
        $("#result").html(e.target.value)
    });

    //監聽select：
    $(".target2").change(function(e) {
        $("#result").html(e.target.value)
    })

     //監聽textarea：
    $(".target3").change(function(e) {
        $("#result").html(e.target.value)
    })
    </script>
</body>

</html>

select事件

當 textarea 或文字型別的 input 元素中的文字被選擇時，會發生 select 事件

這個函式會呼叫執行繫結到select事件的所有函式，包括瀏覽器的預設行為。可以通過在某個繫結的函式中返回false來防止觸發瀏覽器的預設行為

select事件只能用於<input>元素與<textarea>元素

方法一：.select()

觸發元素的select事件:

$("input").select();

方法二：$ele.select( handler(eventObject) )

繫結$ele元素，每次$ele元素觸發點選操作會執行回撥 handler函式，這樣可以針對事件的反饋做很多操作

<input id="text" value="文字選中"></input>
$("#text").select(function() { //響應文字選中回撥
    //this指向 input元素 
});

方法三：$ele.select( [eventData ], handler(eventObject) )

使用與方法二一致，不過可以接受一個資料引數，這樣的處理是為了解決不同作用域下資料傳遞的問題

<input id="text" value="文字選中"></input>
$("#text").select(11111,function(e) {//響應文字選中回撥
    //this指向 div元素 
   //e.data  => 11111 傳遞資料
});

submit事件

提交表單是一個最常見的業務需求，比如使用者註冊，一些資訊的輸入都是需要表單的提交。同樣的有時候開發者需要在表單提交的時候過濾一些的資料、做一些必要的操作（例如：驗證表單輸入的正確性，如果錯誤就阻止提交，從新輸入）此時可以通過submit事件，監聽下提交表單的這個動作

方法一：$ele.submit()

繫結$ele元素，不帶任何引數一般是用來指定觸發一個事件，用的比較少

<div id="text">點選觸發<div>
$("ele").submit(function(){
    alert(`觸發指定事件`)
})
$("#text").click(function(){
     $("ele").submit()  //指定觸發事件 
});

方法二：$ele.submit( handler(eventObject) )

繫結$ele元素，每次$ele元素觸發點選操作會執行回撥 handler函式，這樣可以針對事件的反饋做很多操作了

<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(function() { //繫結提交表單觸發
    //this指向 from元素 
});

方法三：$ele.submit( [eventData ], handler(eventObject) )

使用與方法二一致，不過可以接受一個資料引數，這樣的處理是為了解決不同作用域下資料傳遞的問題

<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(11111,function(data) { //繫結提交表單觸發
    //data => 1111 //傳遞的data資料
});

通過在<form>元素上繫結submit事件，開發者可以監聽到使用者的提交表單的的行為

具體能觸發submit事件的行為：

  • <input type=”submit”>
  • <input type=”image”>
  • <button type=”submit”>
  • 當某些表單元素獲取焦點時，敲擊Enter（Enter鍵）

上述這些操作下，都可以截獲submit事件

特別注意：

  • form元素是有預設提交表單的行為，如果通過submit處理的話，需要禁止瀏覽器的這個預設行為
  • 傳統的方式是呼叫事件物件 e.preventDefault() 來處理， jQuery中可以直接在函式中最後結尾return false即可

jQuery處理

$("#target").submit(function(data) { 
   return false; //阻止預設行為，提交表單
});

相關文章