jQuery-3.事件篇---表單事件

jQuery表單事件之blur與focus事件

在以前2.8與2.9節咱們學過了表單處理事件focusin事件與focusout事件，一樣用於處理表單焦點的事件還有blur與focus事件

它們之間的本質區別:

是否支持冒泡處理

舉個簡單的例子

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

其中input元素能夠觸發focus()事件

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

focus()在元素自己產生，focusin()在元素包含的元素中產生

blur與focusout也亦是如此

  <h4>.focusin與blur</h4>
    <div class="left">
        <div class="aaron">
            點擊觸發焦點(無反應)：
            <input type="text" />
        </div>
        <div class="aaron1">
            點擊觸發焦點並冒泡：
            <input type="text" />
        </div>
    </div>
    <script type="text/javascript">
    $(".aaron").focus(function() {
        $(this).css('border', '2px solid red')
    })
    $(".aaron1").focusin(function() {
        $(this).find('input').val('冒泡捕獲了focusin事件')
    })
    </script>


    <h4>.focusout與blur</h4>
    <div class="right">
        <div class="aaron3">
            點擊觸發失去焦點(無反應)：
            <input type="text" />
        </div>
        <div class="aaron4">
            點擊觸發失去焦點並冒泡：
            <input type="text" />
        </div>
    </div>
    <script type="text/javascript">
    $(".aaron3").blur(function() {
        $(this).css('border', '2px solid red')
    })
    $(".aaron4").focusout(function() {
        $(this).find('input').val('冒泡捕獲了focusout事件')
    })

    </script>

jQuery表單事件之change事件

<input>元素，<textarea>和<select>元素的值都是能夠發生改變的，開發者能夠經過change事件去監聽這些改變的動做

input元素

監聽value值的變化，當有改變時，失去焦點後觸發change事件。對於單選按鈕和複選框，當用戶用鼠標作出選擇時，該事件當即觸發。

 

select元素

對於下拉選擇框，當用戶用鼠標做出選擇時，該事件當即觸發

 

textarea元素

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

 

change事件很簡單，無非就是注意下觸發的前後行爲

 

<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>

 

jQuery表單事件之select事件

當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 select 事件。
這個函數會調用執行綁定到select事件的全部函數，包括瀏覽器的默認行爲。能夠經過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行爲。

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

使用上很是簡單：

方法一：.select()

觸發元素的select事件:

$("input").select();

 

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

綁定$ele元素，每次$ele元素觸發點擊操做會執行回調 handler函數

這樣能夠針對事件的反饋作不少操做了

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

 

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

使用與方法二一致，不過能夠接受一個數據參數，這樣的處理是爲了解決不一樣做用域下數據傳遞的問題

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

<h2>input與textarea</h2>
    <div class="left">
        <h4>測試一</h4>
        <div class="aaron">
            選中文字：input
            <input type="text" value="慕課網" />
        </div>
        <button id="bt1">觸發input元素的select事件</button>
        
        <h4>測試二</h4>
        <div class="aaron">
            textarea：
            <textarea rows="3" cols="20">用鼠標選中文字</textarea>
        </div>
    </div>
 
    <script type="text/javascript">

    //監聽input元素中value的選中
    //觸發元素的select事件
    $("input").select(function(e){
        alert(e.target.value)
    })
    $("#bt1").click(function(){
        $("input").select();
    })


    //監聽textarea元素中value的選中
    $('textarea').select(function(e) {
        alert(e.target.value);
    });

    </script>

jQuery表單事件之submit事件

提交表單是一個最多見的業務需求，好比用戶註冊，一些信息的輸入都是須要表單的提交。一樣的有時候開發者須要在表單提交的時候過濾一些的數據、作一些必要的操做（例如：驗證表單輸入的正確性，若是錯誤就阻止提交，重新輸入）此時能夠經過submit事件，監聽下提交表單的這個動做

使用上很是簡單，與基本事件參數處理保持一致

方法一：$ele.submit()

綁定$ele元素，不帶任何參數通常是用來指定觸發一個事件，用的比較少

<div id="test">點擊觸發<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（回車鍵）

上述這些操做下，均可以截獲submit事件。

這裏須要特別注意：

form元素是有默認提交表單的行爲，若是經過submit處理的話，須要禁止瀏覽器的這個默認行爲
傳統的方式是調用事件對象  e.preventDefault() 來處理， jQuery中能夠直接在函數中最後結尾return false便可

jQuery處理以下：

$("#target").submit(function(data) { 
   return false; //阻止默認行爲，提交表單
});  <h2>submit</h2>    <div class="left">        <div class="aaron">            <form id="target1" action="test.html">                回車鍵或者點擊提交表單：                 <input type="text" value="輸入新的值" />                <input type="submit" value="Go" />            </form>        </div>        <div class="aaron">            <form id="target2" action="destination.html">                回車鍵或者點擊提交表單,禁止瀏覽器默認跳轉：                 <input type="text" value="輸入新的值" />                <input type="submit" value="Go" />            </form>        </div>    </div>    <script type="text/javascript">    //回車鍵或者點擊提交表單    $('#target1').submit(function(e) {        alert('捕獲提交表達動做,不阻止頁面跳轉')    });    //回車鍵或者點擊提交表單,禁止瀏覽器默認跳轉：    $('#target2').submit(function() {        alert('捕獲提交表達動做,阻止頁面跳轉')        return false;    });    </script>