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

jq鼠標(biāo)事件

focusout：當(dāng)一個(gè)元素，或者其內(nèi)部任何一個(gè)元素失去焦點(diǎn)的時(shí)候，比如input元素，用戶(hù)在點(diǎn)擊失去焦的時(shí)候，如果開(kāi)發(fā)者需要捕獲這個(gè)動(dòng)作，jQuery提供了一個(gè)focusout事件

方法與focusin一樣的

jq鼠標(biāo)事件

focusin：當(dāng)一個(gè)元素，或者其內(nèi)部任何一個(gè)元素獲得焦點(diǎn)的時(shí)候，例如：input元素，用戶(hù)在點(diǎn)擊聚焦的時(shí)候，如果開(kāi)發(fā)者需要捕獲這個(gè)動(dòng)作的時(shí)候，jQuery提供了一個(gè)focusin事件(簡(jiǎn)單的例子，就是如果有個(gè)登陸框，我們點(diǎn)擊登陸框輸入的時(shí)候，框框變顏色，這個(gè)是獲得焦點(diǎn)的動(dòng)作，點(diǎn)擊框外面的時(shí)候，框框恢復(fù)最初的顏色）

方法一：$ele.focusin()

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

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

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

})

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

????$("ele").fousin()

})

方法二：$ele.focusin( handler )

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

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

? ? //this指向div元素

})

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

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

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

? ? //this指向div元素

????//e.data=>1111

})

jq鼠標(biāo)事件

hover事件

例子：在元素上移進(jìn)移出切換，這里用mouseenter與mouseleave，避免冒泡問(wèn)題

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

????$(this).css("background","...")

})

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

????$(this).css("background","...")

}）

可以直接用hover傳遞兩個(gè)回掉函數(shù)，不需要顯示的綁定2個(gè)事件

$(selector).hover(handlerIn,handlerOut)

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

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

?$("p").hover(

? ? ? ? function() {

? ? ? ? ? ? $(this).css("background", 'red');

? ? ? ? },

? ? ? ? function() {

? ? ? ? ? ? $(this).css("background", '#bbffaa');

? ? ? ? }

? ? );

1. $ele.mousemove(function(){代碼});

   此方法有說(shuō)實(shí)際上我們很少用，因?yàn)樗皇怯|犯了鼠標(biāo)移動(dòng)事件，再執(zhí)行代碼行

2. $ele.mousemove(function(e){代碼});

????比較多用的方法，觸發(fā)鼠標(biāo)移動(dòng)事件的時(shí)候會(huì)發(fā)生參數(shù)e過(guò)去，就是當(dāng)前鼠標(biāo)這個(gè)對(duì)象，然后我們就可以使用e.pageX/e.pageY這些內(nèi)部定義過(guò)的鼠標(biāo)屬性了

jq鼠標(biāo)事件

mouseenter、mouseleave：需要知道用戶(hù)操作鼠標(biāo)是否有移到元素內(nèi)部或是元素外部

方法與mouseover和mouseout是一模一樣的

mouseenter和mouseover的區(qū)別：

關(guān)鍵地方就是：冒泡的方式處理問(wèn)題

例子

<div class="arron2">

????<p>鼠標(biāo)離開(kāi)此區(qū)域觸發(fā)mouseleave事件</p>

</div>

如果在p元素與div元素都綁定mouseover事件，鼠標(biāo)在離開(kāi)p元素，但是沒(méi)有離開(kāi)div元素的時(shí)候，觸發(fā)的結(jié)果:

1. p元素響應(yīng)事件

2. div元素響應(yīng)事件

，p元素觸發(fā)了mouseover，他會(huì)一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就會(huì)被觸發(fā)

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

jq鼠標(biāo)事件

mouseover、mouseout：移入移出事件

方法一：$ele.mouseover()

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

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

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

})

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

????$("ele").mouseover()

});

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

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

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

????//this指向div元素

})

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

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

$("#test").mouseover(1111，function(){

????//this指向div元素

????//e.data = >1111

})

triggerHandler與trigger的用法是一樣的，重點(diǎn)看不同之處：

• triggerHandler不會(huì)觸發(fā)瀏覽器的默認(rèn)行為，.triggerHandler( "submit" )將不會(huì)調(diào)用表單上的.submit()

• .trigger() 會(huì)影響所有與 jQuery 對(duì)象相匹配的元素，而 .triggerHandler() 僅影響第一個(gè)匹配到的元素

• 使用 .triggerHandler() 觸發(fā)的事件，并不會(huì)在 DOM 樹(shù)中向上冒泡。 如果它們不是由目標(biāo)元素直接觸發(fā)的，那么它就不會(huì)進(jìn)行任何處理

• 與普通的方法返回 jQuery 對(duì)象(這樣就能夠使用鏈?zhǔn)接梅?相反，.triggerHandler() 返回最后一個(gè)處理的事件的返回值。如果沒(méi)有觸發(fā)任何事件，會(huì)返回 undefined

jQuery鼠標(biāo)事件之mousedown與mouseup事件

方法一：$ele.mousedown()

綁定$ele元素，不帶任何參數(shù)一般是用來(lái)指定觸發(fā)一個(gè)事件，可能一般用的比較少

<div?id="test">點(diǎn)擊觸發(fā)<div>
$("ele").mousedown(function(){
????alert('觸發(fā)指定事件')
})
$("#test").mousedown(function(){?????$("ele").mousedown()??//手動(dòng)指定觸發(fā)事件?});

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

綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會(huì)執(zhí)行回調(diào)?handler函數(shù)

這樣可以針對(duì)事件的反饋?zhàn)龊芏嗖僮髁?/p>

<div?id="test">點(diǎn)擊觸發(fā)<div>
$("#test").mousedown(function()?{
????//this指向?div元素
});

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

使用與方法二一致，不過(guò)可以接受一個(gè)數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問(wèn)題

<div?id="test">點(diǎn)擊觸發(fā)<div>
$("#test").mousedown(11111,function(e)?{
????//this指向?div元素
????//e.data??=>?11111?傳遞數(shù)據(jù)
});

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

js中事件是會(huì)冒泡的，所以this是可以變化的，但event.target不會(huì)變化，它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素；

.this和event.target都是dom對(duì)象

如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對(duì)象。比如this和$(this)的使用、event.target和$(event.target)的使用；

jq鼠標(biāo)事件

mousemove:基于移動(dòng)的機(jī)制可以做出拖動(dòng)、拖拽一系列的效果出來(lái)

方法與之前的類(lèi)似（三種）

mousemove事件觸發(fā)需要注意

• mousemove事件是當(dāng)鼠標(biāo)指針移動(dòng)時(shí)觸發(fā)的，即使是一個(gè)像素

• 如果處理器做任何重大的處理，或者如果該事件存在多個(gè)處理函數(shù)，這可能造成瀏覽器的嚴(yán)重的性能問(wèn)題

jq鼠標(biāo)點(diǎn)擊事件

mousedown、mouseup

方法一：$ele.mousedown()

<div id = "test">點(diǎn)擊觸發(fā)<div>

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

????????//設(shè)置要做的事情

})

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

<div id = "test">點(diǎn)擊觸發(fā)<div>

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

????????//this指向div標(biāo)簽

})

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

<div id = "test">點(diǎn)擊觸發(fā)<div>

$("#test").mousedown(1111，function(){

????????//this指向div標(biāo)簽

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

})

mousedown事件觸發(fā)需要注意：

• mousedown強(qiáng)調(diào)是按下觸發(fā)

• 如果在一個(gè)元素按住了鼠標(biāo)不放，并且拖動(dòng)鼠標(biāo)離開(kāi)這個(gè)元素，并釋放鼠標(biāo)鍵，這仍然是算作mousedown事件

• 任何鼠標(biāo)按鈕被按下時(shí)都能觸發(fā)mousedown事件

• 用event 對(duì)象的which區(qū)別按鍵，敲擊鼠標(biāo)左鍵which的值是1，敲擊鼠標(biāo)中鍵which的值是2，敲擊鼠標(biāo)右鍵which的值是3

mouseup事件觸發(fā)需要注意:

• mouseup強(qiáng)調(diào)是松手觸發(fā)，與mousedown是相反的

• mouseup與mousedown組合起來(lái)就是click事件

• 如果用戶(hù)在一個(gè)元素上按下鼠標(biāo)按鍵，并且拖動(dòng)鼠標(biāo)離開(kāi)這個(gè)元素，然后釋放鼠標(biāo)鍵，這仍然是算作mouseup事件

• 任何鼠標(biāo)按鈕松手時(shí)都能觸發(fā)mouseup事件

• 用event 對(duì)象的which區(qū)別按鍵，敲擊鼠標(biāo)左鍵which的值是1，敲擊鼠標(biāo)中鍵which的值是2，敲擊鼠標(biāo)右鍵which的值是3

click與mousedown的區(qū)別：

• click事件其實(shí)是由mousedown于mouseup 2個(gè)動(dòng)作構(gòu)成，所以點(diǎn)擊的動(dòng)作只有在松手后才觸發(fā)

JQ鼠標(biāo)事件 click、dcclick

click:用于監(jiān)聽(tīng)用戶(hù)單擊操作

dbclick:用于監(jiān)聽(tīng)用戶(hù)雙擊操作

方法一：$ele.click()

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

????//設(shè)置點(diǎn)擊事件

}）

方法二 $ele.click( handler(eventObject) )

綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會(huì)執(zhí)行回調(diào)?handler函數(shù)，這樣可以針對(duì)事件的反饋?zhàn)龊芏嗖僮髁?，方法中的this是指向了綁定事件的元素

例：

<div id="test">點(diǎn)擊觸發(fā)<div>

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

????//this指向div元素

}）；

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

<div id="test">點(diǎn)擊觸發(fā)<div>

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

????//this指向div元素

????//e.data =>1111 傳遞數(shù)據(jù)

}）；

用交互操作中，最簡(jiǎn)單直接的操作就是點(diǎn)擊操作。jQuery提供了兩個(gè)方法一個(gè)是click方法用于監(jiān)聽(tīng)用戶(hù)單擊操作，另一個(gè)方法是dbclick方法用于監(jiān)聽(tīng)用戶(hù)雙擊操作。這兩個(gè)方法的用法是類(lèi)似的，下面以click()事件為例

使用上非常簡(jiǎn)單：

方法一：$ele.click()

綁定$ele元素，不帶任何參數(shù)一般是用來(lái)指定觸發(fā)一個(gè)事件，用的比較少

<div?id="test">點(diǎn)擊觸發(fā)<div>
$("ele").click(function(){
????alert('觸發(fā)指定事件')
})
$("#test").click(function(){?????$("ele").click()??//手動(dòng)指定觸發(fā)事件?
});

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

綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會(huì)執(zhí)行回調(diào)?handler函數(shù)，這樣可以針對(duì)事件的反饋?zhàn)龊芏嗖僮髁耍椒ㄖ械膖his是指向了綁定事件的元素

<div?id="test">點(diǎn)擊觸發(fā)<div>
$("#test").click(function()?{
????//this指向?div元素
});

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

使用與方法二一致，不過(guò)可以接受一個(gè)數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問(wèn)題

<div?id="test">點(diǎn)擊觸發(fā)<div>
$("#test").click(11111,function(e)?{
????//this指向?div元素
????//e.data??=>?11111?傳遞數(shù)據(jù)
});

dblclick()的用法和click()的用法是類(lèi)似的，可以參考以上click()的用法。

dbclick與click事件不同的是：

click事件觸發(fā)需要以下幾點(diǎn)：

• click事件其實(shí)是由mousedown與mouseup 2個(gè)動(dòng)作構(gòu)成，所以點(diǎn)擊的動(dòng)作只有在松手后才觸發(fā)

PS:mousedown和mouseup下一節(jié)會(huì)講到

dblclick事件觸發(fā)需要以下幾點(diǎn)：

dblclick又是由2個(gè)click疊加而來(lái)的，所以dblclick事件只有在滿(mǎn)足以下條件的情況下才能被觸發(fā)

• 鼠標(biāo)指針在元素里面時(shí)點(diǎn)擊。

• 鼠標(biāo)指針在元素里面時(shí)釋放。

• 鼠標(biāo)指針在元素里面時(shí)再次點(diǎn)擊，點(diǎn)擊間隔時(shí)間，是系統(tǒng)而定。

• 鼠標(biāo)指針在元素里面時(shí)再次釋放。

注意：在同一元素上同時(shí)綁定 click 和 dblclick 事件是不可取的。各個(gè)瀏覽器事件觸發(fā)的順序是不同的，一些瀏覽器在dblclick之前接受兩個(gè) click 事件 ，而一些瀏覽器只接受一個(gè) click 事件。用戶(hù)往往可通過(guò)不同的操作系統(tǒng)和瀏覽器配置雙擊靈敏度

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

• 只能捕獲單個(gè)字符，不能捕獲組合鍵

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

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

如果在p元素與div元素都綁定mouseover事件，鼠標(biāo)在離開(kāi)p元素，但是沒(méi)有離開(kāi)div元素的時(shí)候，觸發(fā)的結(jié)果:

1. p元素響應(yīng)事件

2. div元素響應(yīng)事件

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

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