第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

jq自定義事件

trigger：genuine綁定到匹配元素的給定的事件類型執(zhí)行所有的處理程序和行為

$("button:first").click(function(event,bottonName) {

? ? ? ? bottonName = bottonName || 'first';

? ? ? ? update($("span:first"),$("span:last"),bottonName);

? ? });

? ? //通過自定義事件調(diào)用，更新次數(shù)

? ? $("button:last").click(function() {

? ? ? ? $("button:first").trigger('click','last');

? ? });

jq事件對象的屬性和方法

event.type：獲取事件的類型

觸發(fā)元素的事件類型

$("a").click(function(event){

????alert(event.type);

});

event.pageX 和 event.pageY：獲取鼠標當前相對于頁面的坐標:通過這2個屬性，可以確定元素在當前頁面的坐標值，鼠標相對于文檔的左邊緣的位置（左邊）與 （頂邊）的距離，簡單來說是從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化

event.preventDefault() 方法：阻止默認行為

event.stopPropagation() 方法：阻止事件冒泡

event.which：獲取在鼠標單擊時，單擊的是鼠標的哪個鍵:。event.which也將正?；陌粹o按下(mousedown 和 mouseupevents)，左鍵報告1，中間鍵報告2，右鍵報告3

event.currentTarget : 在事件冒泡過程中的當前DOM元素:等同于this

this和event.target的區(qū)別：

js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；

jq事件對象的作用

event

event.target

target 屬性可以是注冊事件時的元素，或者它的子元素。通常用于比較 event.target 和 this 來確定事件是不是由于冒泡而觸發(fā)的。經(jīng)常用于事件冒泡時處理事件委托

event.target代表當前觸發(fā)事件的元素，可以通過當前元素對象的一系列屬性來判斷是不是我們想要的元素

卸載事件off()

off方法也可以通過相應的傳遞組合的事件名，名字空間，選擇器或處理函數(shù)來移除綁定在元素上指定的事件處理函數(shù)。當有多個過濾參數(shù)時，只有與這些參數(shù)完全匹配的事件處理函數(shù)才會被移除

例子

$("elem").on("mousedown mouseup",fn)

刪除一個事件

$("elem").off("mousedown")

刪除所有事件

$("elem").off("mousedown mouseup")

快捷方式刪除所有的

$("elem").off()

on()的高級用法

委托機制

<div class="left">

????<p class="arron">

????????<a>目標節(jié)點</a>

</div>

$("div").on("click","p",fn)

事件綁定在最上層div元素上，當用戶觸發(fā)在a元素上，事件將往上冒泡，一直會冒泡在div元素上。如果提供了第二參數(shù)，那么事件在往上冒泡的過程中遇到了選擇器匹配的元素，將會觸發(fā)事件回調(diào)函數(shù)

on()的多事件綁定

最常見的給元素綁定一個點擊事件，：

$("#elem").on('click',function(){})

多個事件綁定同一個函數(shù)

$("#elem").on('mouseover mouseout',function(){})

通過空格分離，傳遞不同的事件名，可以同時綁定多個事件

多個事件綁定不同函數(shù)

$("#elem").on({

????mouseover:function(){},

????mouseout:function(){}

});

jq 鍵盤事件

keypress()

在input元素上綁定keydown事件會發(fā)現(xiàn)一個問題：每次獲取的內(nèi)容都是之前輸入的，當前輸入的獲取不到

keydown事件觸發(fā)在文字還沒敲進文本框，這時如果在keydown事件中輸出文本框中的文本，得到的是觸發(fā)鍵盤事件前的文本，而keyup事件觸發(fā)時整個鍵盤事件的操作已經(jīng)完成，獲得的是觸發(fā)鍵盤事件后的文本

keypress事件與keydown和keyup的主要區(qū)別

• 只能捕獲單個字符，不能捕獲組合鍵

• 無法響應系統(tǒng)功能鍵（如delete，backspace）

• 不區(qū)分小鍵盤和主鍵盤的數(shù)字字符

KeyPress主要用來接收字母、數(shù)字等ANSI字符，而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識別的擊鍵。諸如：功能鍵（F1-F12）、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。

jq鍵盤事件

keydown() keyup()

keydown事件：

當用戶在一個元素上第一次按下鍵盤上字母鍵的時候，就會觸發(fā)它。

//直接綁定事件

$elem.keydown(handler(eventObject))

//傳遞參數(shù)

$elem.keydown([eventData],handler(eventObject))

//手動觸發(fā)已綁定的事件

$elem.keydown()

keyup事件：

當用戶在一個元素上第一次松手鍵盤上的鍵的時候，就會觸發(fā)它。使用方法與keydown是一致的只是觸發(fā)的條件是方法的

• keydown是在鍵盤按下就會觸發(fā)

• keyup是在鍵盤松手就會觸發(fā)

• 理論上它可以綁定到任何元素，但keydown/keyup事件只是發(fā)送到具有焦點的元素上，不同的瀏覽器中，可獲得焦點的元素略有不同，但是表單元素總是能獲取焦點，所以對于此事件類型表單元素是最合適的。

在元素上移進移出切換其換色，一般通過2個事件配合就可以達到，這里用mouseenter與mouseleave，這樣可以避免冒泡問題

$(ele).mouseenter(function(){
?????$(this).css("background",?'#bbffaa');
?})
$(ele).mouseleave(function(){
????$(this).css("background",?'red');
})

這樣目的是達到了，代碼稍微有點多，對于這樣的簡單邏輯jQuery直接提供了一個hover方法，可以便捷處理

只需要在hover方法中傳遞2個回調(diào)函數(shù)就可以了，不需要顯示的綁定2個事件

$(selector).hover(handlerIn,?handlerOut)

• handlerIn(eventObject)：當鼠標指針進入元素時觸發(fā)執(zhí)行的事件函數(shù)

• handlerOut(eventObject)：當鼠標指針離開元素時觸發(fā)執(zhí)行的事件函數(shù)

jq表單事件

submit：開發(fā)者需要在表單提交的時候過濾一些的數(shù)據(jù)、做一些必要的操作（例如：驗證表單輸入的正確性，如果錯誤就阻止提交，從新輸入）此時可以通過submit事件，監(jiān)聽下提交表單的這個動作

方法一：$ele.submit()

<div id="test">點擊觸發(fā)</div>

$("ele").submit(function(){

????alert('觸發(fā)指定事件')

})

$("#test").click(function(){

????$("ele").submit()

});

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

<form id="target" action="destination.html">

????<input type="submit" value="Go"/>

</form>

$("#target").submit(function(){

????//this指向form元素

})

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

<form id="target" action="destination.html">

????<input type="submit" value="Go"/>

</form>

$("#target").submit(1111,function(data){

????//data=>1111

});

通過在<form>元素上綁定submit事件，開發(fā)者可以監(jiān)聽到用戶的提交表單的的行為

• <input type="submit">

• <input type="image">

• <button type="submit">

• 當某些表單元素獲取焦點時，敲擊Enter（回車鍵）

form元素是由默認提交表單的能力，如果通過submit處理，e.preventDefalut()來處理，jq中直接在函數(shù)中最后結尾return false即可

mouseover為例：

<div?class="aaron2">
????<p>鼠標離開此區(qū)域觸發(fā)mouseleave事件</p>
</div>

如果在p元素與div元素都綁定mouseover事件，鼠標在離開p元素，但是沒有離開div元素的時候，觸發(fā)的結果:

1. p元素響應事件

2. div元素響應事件

這里的問題是div為什么會被觸發(fā)？ 原因就是事件冒泡的問題，p元素觸發(fā)了mouseover，他會一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就會被觸發(fā)

所以在這種情況下面，jQuery推薦我們使用 mouseenter事件

mouseenter事件只會在綁定它的元素上被調(diào)用，而不會在后代節(jié)點上被觸發(fā)

jq表單事件

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

方法一：.select()

$("input").select()

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

<input id="test" value="文字選中”></input>

$("#test").select(function(){

????//this指向input元素

}）

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

$("#test").select(1111,function(e){

????//this指向input元素

????//e,data=>1111

}）

jq表單事件

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

input元素

監(jiān)聽value值的變化，當有變化時，失去焦點后觸發(fā)change事件，對于單選按鈕和復選框，當用戶用鼠標做出選擇時，該事件立即觸發(fā).

select元素

對于下拉選擇框，當用戶用鼠標作出選擇時，該事件立即觸發(fā)

textarea元素

多行文本輸入框，當有改變時，失去焦點后觸發(fā)change事件

jq表單事件

blur、focus

focusin與focus的區(qū)別

<div>

????<input type="text">

</div>

div是input的父元素，當它包含的元素input觸發(fā)了focus事件時，它就產(chǎn)生了focusin（）事件

blur與focusout也亦是如此

? ?

? ? <h4>測試二</h4>

? ? <div class="left">

? ? ? ? <div class="aaron1">

? ? ? ? ? ? <p>鼠標移進此區(qū)域觸發(fā)mouseover事件</p>

? ? ? ? ? ? <a>進入元素內(nèi)部,mouseover事件觸發(fā)次數(shù)：</a>

? ? ? ? </div>

? ? </div>

? ? <script type="text/javascript">

? ? ? ? var n = 0;

? ? ? ? //綁定一個mouseover事件

? ? ? ? $(".aaron1 p:first").mouseover(function(e) {

? ? ? ? ? ? $(".aaron1 a").html('進入元素內(nèi)部,mouseover事件觸發(fā)次數(shù)：' + (++n))

? ? ? ? })

? ? </script>

? ??

? ??

? ? <h4>測試三</h4>

? ? <div class="right">

? ? ? ? <div class="aaron2">

? ? ? ? ? ? <p>鼠標移動：不同函數(shù)傳遞數(shù)據(jù)</p>

? ? ? ? ? ? <a>進入元素內(nèi)部,mouseover事件觸發(fā)次數(shù)：</a>

? ? ? ? </div>

? ? </div>

? ? <br/>

? ? <script type="text/javascript">

? ? ? ? var n = 0;

? ? ? ? //不同函數(shù)傳遞數(shù)據(jù)

? ? ? ? function data(e) {

? ? ? ? ? ? $(".right a").html('mouseover事件觸發(fā)次數(shù)：' + (++n) + '<br/> 傳入數(shù)據(jù)為 ：'+ e.data)

? ? ? ? }

? ? ? ? function a() {

? ? ? ? ? ? $(".right p:first").mouseover('data = 慕課網(wǎng)', data)

? ? ? ? }

? ? ? ? a();