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

jQuery鼠標(biāo)事件之focusin事件

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

使用上非常簡單：

方法一：$ele.focusin()

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

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

?

方法二：$ele.focusin( handler )

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

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

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

?

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

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

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

jQuery鼠標(biāo)事件之hover事件

學(xué)了mouseover、mouseout、mouseenter、mouseleave事件，也理解了四個(gè)事件的相同點(diǎn)與不同點(diǎn)，現(xiàn)在可以用來給元素做一個(gè)簡單的切換效果

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

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

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

只需要在hover方法中傳遞2個(gè)回調(diào)函數(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)指針離開元素時(shí)觸發(fā)執(zhí)行的事件函數(shù)

jQuery鼠標(biāo)事件之mouseenter與mouseleave事件

用交互操作中，經(jīng)常需要知道用戶操作鼠標(biāo)是否有移到元素內(nèi)部或是元素外部，因此jQuery提供了一個(gè)mouseenter和mouseleave的快捷方法可以監(jiān)聽用戶移動到內(nèi)部的操作

使用上非常簡單，三種參數(shù)傳遞方式與mouseover和mouseout是一模一樣的，所以這里不再重復(fù)，主要講講區(qū)別，下面以mouseenter為例：

mouseenter JavaScript事件是Internet Explorer專有的。由于該事件在平時(shí)很有用，jQuery的模擬這一事件，以便它可用于所有瀏覽器。該事件在鼠標(biāo)移入到元素上時(shí)被觸發(fā)。任何HTML元素都可以接受此事件。

mouseenter事件和mouseover的區(qū)別

關(guān)鍵點(diǎn)就是：冒泡的方式處理問題

簡單的例子：

mouseover為例：

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

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

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

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

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

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

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

這就是最本質(zhì)的區(qū)別，具體的對應(yīng)可以參考右邊的案例：

PS：同學(xué)可以根據(jù)右側(cè)代碼，自己寫出mouseout與mouseleave的區(qū)別哦~

jQuery鼠標(biāo)事件之mouseover與mouseout事件

在學(xué)JS的時(shí)候，大家還記得有兩個(gè)方法叫移入移出事件嗎？onmouseover()與onmouseout()事件~

jQuery當(dāng)中同樣提供了這樣的事件來監(jiān)聽用戶的移入移出操作，mouseover()與mouseout()事件，兩者用法類似，下面一mouseover為例：

方法一：$ele.mouseover()

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

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

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

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

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

<div?id="test">滑動觸發(fā)<div>?$("#test").mouseover(function()?{?????//this指向?div元素??});

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

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

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

jQuery鼠標(biāo)事件之mousemove事件

用交互操作中，經(jīng)常需要知道用戶是否有移動的操作?；谝苿拥臋C(jī)制可以做出拖動、拖拽一系列的效果出來。針對移動事件，jQuery提供了一個(gè)mousemove的快捷方法可以監(jiān)聽用戶移動的的操作

使用上非常簡單：

方法一：$ele.mousemove()

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

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

?

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

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

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

<div?id="test">滑動觸發(fā)<div>?$("#test").mousemove(function()?{?????//this指向?div元素??});

?

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

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

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

?

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

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

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

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

用戶交互操作中，最簡單直接的操作就是點(diǎn)擊操作，因此jQuery提供了一個(gè)mousedown的快捷方法可以監(jiān)聽用戶鼠標(biāo)按下的操作，與其對應(yīng)的還有一個(gè)方法mouseup快捷方法可以監(jiān)聽用戶鼠標(biāo)彈起的操作。兩種方法用法類似，下面以mousedown()為例

使用上非常簡單：

方法一：$ele.mousedown()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• mouseup與mousedown組合起來就是click事件

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

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

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

另外需要注意的是：

click與mousedown的區(qū)別：

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

jQuery鼠標(biāo)事件之click與dbclick事件

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

使用上非常簡單：

方法一：$ele.click()

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

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

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

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

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

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

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

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

dbclick()的用法和click()的用法是類似的，可以參考以上click()的用法。

dbclick與click事件不同的是：

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

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

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

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

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

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

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

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

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

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

由于瀏覽器有事件冒泡的這個(gè)特性，我們可以在觸發(fā)li的時(shí)候把這個(gè)事件往上冒泡到ul上，因?yàn)閡l上綁定事件響應(yīng)所以就能夠觸發(fā)這個(gè)動作了

• 通過.on()綁定的事件處理程序

• 通過off() 方法移除該綁定

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

這里需要特別注意：

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

jQuery處理如下：

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

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

event.type：獲取事件的類型

event.pageX 和 event.pageY：獲取鼠標(biāo)當(dāng)前相對于頁面的坐標(biāo)

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

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

event.which：獲取在鼠標(biāo)單擊時(shí)，單擊的是鼠標(biāo)的哪個(gè)鍵

event.currentTarget : 在事件冒泡過程中的當(dāng)前DOM元素

區(qū)別就在于focus和blur只能在input之類的表格元素本身上起效，當(dāng)在他的父級元素上綁focus和blur事件時(shí)，因?yàn)樗鼈z不冒泡，所以在外部的綁定其實(shí)是沒有效果的。
而focusin和focusout可以冒泡，所以就算是在父級綁定的這兩個(gè)事件，只要是內(nèi)部元素觸發(fā)了獲得和失去焦點(diǎn)的事件，一樣可以冒泡出來，讓父級元素綁定的事件捕獲到，從而執(zhí)行命令。

textContent文本內(nèi)容