jquery 事件 表單事件

2022-05-14 11:23:27 字數 2004 閱讀 6291

一、focus() 與 blur()

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

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

<

div

class

="box"

>

點選觸發焦點(無反應):

<

input

type

="text"

/>

div>

$(".box").focusin(function() )

但一般直接 繫結到input上 如: $("input").focus(),$('input').focusin()

二、 change() 事件

元素,和元素的值都是可以發生改變的,開發者可以通過change事件去監聽這些改變的動作

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

select元素:對於下拉選擇框,當使用者用滑鼠作出選擇時,該事件立即觸發(點選原已選中項,不會觸發)

textarea元素:多行文字輸入框,當有改變時,失去焦點後觸發change事件

<

input

type

="text"

/>

<

p>

p>

//監聽input值的改變

$('input').change(function(e) );

三、select() 事件

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

select事件只能用於元素與元素

<

input

type

="text"

value

="web前端"

/>

<

button

id="btn"

>點選呼叫選中

button

>

$("input").select(function(e))

$("#btn").click(function(e))

四、submit() 事件

提交表單是乙個最常見的業務需求,比如使用者註冊,一些資訊的輸入都是需要表單的提交。

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

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

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

這裡需要特別注意:

form元素是有預設提交表單的行為,如果通過submit處理的話,需要禁止瀏覽器的這個預設行為

傳統的方式是呼叫事件物件 e.preventdefault() 來處理, jquery中可以直接在函式中最後結尾return false即可

jquery處理如下:

$("#target").submit(function(data) );
<

form

id="target1"

action

="test.html"

>

回車鍵或者點選提交表單:

<

input

type

="text"

value

="輸入新的值"

/>

<

input

type

="submit"

value

="go"

/>

form

>

$('#target1').submit(function(e) );

jQuery事件 表單事件

focus 與 blur 事件 之前學過了表單處理事件focusin事件與focusout事件,同樣用於處理表單焦點的事件還有blur與focus事件 它們之間的本質區別 是否支援冒泡處理 focus 不會冒泡,在元素本身產生 focusin 會冒泡,在元素包含的元素中產生。blur與focusou...

事件(二) Jquery事件模型

與w3c標準事件api十分相似,除了名稱上的不同以外,唯一差別就是去掉了usecapture引數,並且去掉了事件名稱中的on字首。示例 如下 document bind ready function div bind mouseout function 與傳統的時間模型不同,jquery的事件名稱沒...

事件(二) Jquery事件模型

與w3c標準事件api十分相似,除了名稱上的不同以外,唯一差別就是去掉了usecapture引數,並且去掉了事件名稱中的on字首。示例 如下 document bind ready function div bind mouseout function 與傳統的時間模型不同,jquery的事件名稱沒...