亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

當一個元素，或者其內部任何一個元素獲得焦點的時候，例如：input元素，用戶在點擊聚焦的時候，如果開發者需要捕獲這個動作的時候，jQuery提供了一個focusin事件

使用上非常簡單：

方法一：$ele.focusin()

綁定$ele元素，不帶任何參數一般是用來指定觸發一個事件，一般用的比較少

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

?方法二：$ele.focusin( handler )

綁定$ele元素，每次$ele元素觸發點擊操作會執行回調?handler函數

這樣可以針對事件的反饋做很多操作了

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

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

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

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

mouseover、mouseout、mouseenter、mouseleave事件,四個事件的相同點與不同點，現在可以用來給元素做一個簡單的切換效果

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

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

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

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

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

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

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

用交互操作中，經常需要知道用戶操作鼠標是否有移到元素內部或是元素外部，因此jQuery提供了一個mouseenter和mouseleave的快捷方法可以監聽用戶移動到內部的操作

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

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

mouseenter事件和mouseover的區別

關鍵點就是：冒泡的方式處理問題

簡單的例子：

mouseover為例：

<div?class="aaron2">
????<p>鼠標離開此區域觸發mouseleave事件</p>
</div>

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

1. p元素響應事件

2. div元素響應事件

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

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

mouseenter事件只會在綁定它的元素上被調用，而不會
在后代節點上被觸發

這就是最本質的區別

移入移出事件,onmouseover()與onmouseout()事件~

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

方法一：$ele.mouseover()

綁定$ele元素，不帶任何參數一般是用來指定觸發一個事件，用的比較少

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

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

綁定$ele元素，每次$ele元素觸發點擊操作會執行回調?handler函數

這樣可以針對事件的反饋做很多操作了

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

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

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

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

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

使用上非常簡單：

方法一：$ele.mousemove()

綁定$ele元素，不帶任何參數一般是用來指定觸發一個事件，用的比較少

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

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

綁定$ele元素，每次$ele元素觸發點擊操作會執行回調?handler函數

這樣可以針對事件的反饋做很多操作了

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

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

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

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

?mousemove事件觸發需要以下幾點：

• mousemove事件是當鼠標指針移動時觸發的，即使是一個像素

• 如果處理器做任何重大的處理，或者如果該事件存在多個處理函數，這可能造成瀏覽器的嚴重的性能問題

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

使用上非常簡單：

方法一：$ele.mousedown()

綁定$ele元素，不帶任何參數一般是用來指定觸發一個事件，可能一般用的比較少

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

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

綁定$ele元素，每次$ele元素觸發點擊操作會執行回調?handler函數

這樣可以針對事件的反饋做很多操作了

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

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

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

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

mousedown事件觸發需要以下幾點：

• mousedown強調是按下觸發

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

• 任何鼠標按鈕被按下時都能觸發mousedown事件

• 用event 對象的which區別按鍵，敲擊鼠標左鍵which的值是1，敲擊鼠標中鍵which的值是2，敲擊鼠標右鍵which的值是3

mouseup事件觸發需要以下幾點：

• mouseup強調是松手觸發，與mousedown是相反的

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

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

• 任何鼠標按鈕松手時都能觸發mouseup事件

• 用event 對象的which區別按鍵，敲擊鼠標左鍵which的值是1，敲擊鼠標中鍵which的值是2，敲擊鼠標右鍵which的值是3

另外需要注意的是：

click與mousedown的區別：

• click事件其實是由mousedown于mouseup 2個動作構成，所以點擊的動作只有在松手后才觸發

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

使用上非常簡單：

方法一：$ele.click()

綁定$ele元素，不帶任何參數一般是用來指定觸發一個事件，用的比較少

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

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

綁定$ele元素，每次$ele元素觸發點擊操作會執行回調?handler函數，這樣可以針對事件的反饋做很多操作了，方法中的this是指向了綁定事件的元素

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

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

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

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

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

dbclick與click事件不同的是：

click事件觸發需要以下幾點：

• click事件其實是由mousedown與mouseup 2個動作構成，所以點擊的動作只有在松手后才觸發

PS:mousedown和mouseup下一節會講到

dbclick事件觸發需要以下幾點：

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

• 鼠標指針在元素里面時點擊。

• 鼠標指針在元素里面時釋放。

• 鼠標指針在元素里面時再次點擊，點擊間隔時間，是系統而定。

• 鼠標指針在元素里面時再次釋放。

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

target是當前事件執行的第一個具體DOM對象，這個DOM對象不變

this是事件冒泡到DOM樹的哪個對象，this就指向哪個對象，改變的

e.value是undefine，

e和e.target是兩個不同的對象。

事件對象event沒有value這個屬性。

e.target的值是觸發事件的dom元素對象，這個元素對象有value屬性。

如何添加參數

function fn(e) {

? ? ? ? ? ? ?$(this).val(e.data)

? ? ? ? }

? ? ? ? function a() {

? ? ? ? ? ? $("input:last").focusin('慕課網', fn)

? ? ? ? }

? ? ? ? a();

mouseup事件觸發需要以下幾點：

• mouseup強調是松手觸發，與mousedown是相反的

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

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

• 任何鼠標按鈕松手時都能觸發mouseup事件

• 用event 對象的which區別按鍵，敲擊鼠標左鍵which的值是1，敲擊鼠標中鍵which的值是2，敲擊鼠標右鍵which的值是3

.textContent() 是原生 js 的方法，而非 jQuery 方法，無法使用 jQuery 對象進行調用

jQuery 獲得對象文本的方法有：

1. .val()

2. .text()

3. .html()

unction?greet(?event?)?{
??alert(?"Hello?"?+?event.data.name?);?//Hello?慕課網
}
$(?"button"?).on(?"click",?{
??name:?"慕課網"
},?greet?);

這里

$(?"button"?).on(?"click",?{
??name:?"慕課網"
},?greet?)

表示button執行onclick點擊事件時，觸發greet事件，而{name:"慕課網"}則作為參數被傳入到greet事件中，{name:"慕課網"}表示一個對象，要想得到“慕課網”，就要通過name屬性來查找，所以用event.data.name

這里也可以傳入一個{name:"慕課網"，url:"www.xianlaiwan.cn/qadetail/262220"}這樣一個多變量參數，如果要查找地址信息，則用event.data.url

大概就是這樣。

keydown 是在按之前判斷（當時text還沒有內容），觸發一次空，當下一次按鍵時，就觸發上一次輸入的內容，所以就少一個。

? ? ? ? ? ? ? ?清風流光 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ?

focus blur 和 mouseenter mouseleave相似 ?你點擊的時候相當于只點擊了文本框 文本框沒事件 不觸發

focusin focusout 和 mouseover mouseout相似 你在文本框內獲得焦點和失去焦點的同時相當于從子到父都觸發了事件；

2017-05-18

keypress事件與keydown和keyup的主要區別

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

• 無法響應系統功能鍵（如delete，backspace）

• 不區分小鍵盤和主鍵盤的數字字符

總而言之，

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