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>
<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">
點擊觸發失去焦點(無反應)：
<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>
jQuery-3.事件篇---表單事件