jquery 事件--表單事件

一、focus() 與 blur()

與focusin() , focusout() 的區別：是否支持冒泡處理

focusin(): 事件綁定在父元素div，當它內部 有input獲得焦點，會冒泡給父元素div。focusout() 也是

 

<div class="box"> 　點擊觸發焦點(無反應)： 　　<input type="text" />
</div> $(".box").focusin(function() { $(this).css('border', '2px solid red');// 點擊input，input獲得焦點，冒泡到父元素div ，父元素div加上了邊框，$(this)代表父元素.box而不是點擊的input元素 })

但一般直接 綁定到input上 如： $("input").focus(),$('input').focusin()

 

二、 change() 事件

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

input元素：監聽value值的變化，當有改變時，失去焦點后觸發change事件。對於單選按鈕和復選框，當用戶用鼠標做出選擇時，該事件立即觸發。

select元素：對於下拉選擇框，當用戶用鼠標作出選擇時，該事件立即觸發（點擊原已選中項，不會觸發）

textarea元素：多行文本輸入框，當有改變時，失去焦點后觸發change事件

<input type="text" />
<p></p> //監聽input值的改變 $('input').change(function(e) { $("p").html(e.target.value) });

 

三、select() 事件

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

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

<input type="text" value="web前端" />
<button id="btn">點擊調用選中</button> $("input").select(function(e){ alert(e.target.value) return false; //阻止默認行為 e.preventDefault(); //阻止默認行為 }) $("#btn").click(function(e){ $("input").select(); //點擊按鈕調用，在chrome瀏覽器下，會彈出3次，因此要阻止瀏覽器默認行為 }) 

 

四、submit() 事件

提交表單是一個最常見的業務需求，比如用戶注冊，一些信息的輸入都是需要表單的提交。

同樣的有時候開發者需要在表單提交的時候過濾一些的數據、做一些必要的操作

（例如：驗證表單輸入的正確性，如果錯誤就阻止提交，從新輸入）此時可以通過submit事件，監聽下提交表單的這個動作

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

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

這里需要特別注意：

form元素是有默認提交表單的行為，如果通過submit處理的話，需要禁止瀏覽器的這個默認行為
傳統的方式是調用事件對象  e.preventDefault() 來處理， jQuery中可以直接在函數中最后結尾return false即可

jQuery處理如下：

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

<form id="target1" action="test.html">
    回車鍵或者點擊提交表單： 
    <input type="text" value="輸入新的值" />
    <input type="submit" value="Go" />
</form>

$('#target1').submit(function(e) {
        alert('捕獲提交表達動作,不阻止頁面跳轉')
    });