-
當一個元素,或者其內(nèi)部任何一個元素獲得焦點的時候,例如:input元素,用戶在點擊聚焦的時候,如果開發(fā)者需要捕獲這個動作的時候,jQuery提供了一個focusin事件
使用上非常簡單:
方法一:$ele.focusin()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,一般用的比較少
<div?id="test">點擊觸發(fā)<div> $("ele").focusin(function(){ ????alert('觸發(fā)指定事件') }) $("#test").mouseup(function(){? ?????});
?方法二:$ele.focusin( handler )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào)?handler函數(shù)
這樣可以針對事件的反饋做很多操作了
<div?id="test">點擊觸發(fā)<div> $("#test").focusin(function()?{ ????//this指向?div元素 });
?方法三:$ele.focusin( [eventData ], handler )
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
<div?id="test">點擊觸發(fā)<div> $("#test").focusin(11111,function(e)?{ ????//this指向?div元素 ????//e.data??=>?11111?傳遞數(shù)據(jù) });
查看全部 -
mouseover、mouseout、mouseenter、mouseleave事件,四個事件的相同點與不同點,現(xiàn)在可以用來給元素做一個簡單的切換效果
在元素上移進移出切換其換色,一般通過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ù)
查看全部 -
用交互操作中,經(jīng)常需要知道用戶操作鼠標是否有移到元素內(nèi)部或是元素外部,因此jQuery提供了一個mouseenter和mouseleave的快捷方法可以監(jiān)聽用戶移動到內(nèi)部的操作
使用上非常簡單,三種參數(shù)傳遞方式與mouseover和mouseout是一模一樣的,所以這里不再重復(fù),主要講講區(qū)別,下面以mouseenter為例:
mouseenter JavaScript事件是Internet Explorer專有的。由于該事件在平時很有用,jQuery的模擬這一事件,以便它可用于所有瀏覽器。該事件在鼠標移入到元素上時被觸發(fā)。任何HTML元素都可以接受此事件。
mouseenter事件和mouseover的區(qū)別
關(guān)鍵點就是:冒泡的方式處理問題
簡單的例子:
mouseover為例:
<div?class="aaron2"> ????<p>鼠標離開此區(qū)域觸發(fā)mouseleave事件</p> </div>
如果在p元素與div元素都綁定mouseover事件,鼠標在離開p元素,但是沒有離開div元素的時候,觸發(fā)的結(jié)果:
p元素響應(yīng)事件
div元素響應(yīng)事件
這里的問題是div為什么會被觸發(fā)? 原因就是事件冒泡的問題,p元素觸發(fā)了mouseover,他會一直往上找父元素上的mouseover事件,如果父元素有mouseover事件就會被觸發(fā)
所以在這種情況下面,jQuery推薦我們使用 mouseenter事件
mouseenter事件只會在綁定它的元素上被調(diào)用,而不會 在后代節(jié)點上被觸發(fā)
這就是最本質(zhì)的區(qū)別
查看全部 -
移入移出事件,onmouseover()與onmouseout()事件~
jQuery當中同樣提供了這樣的事件來監(jiān)聽用戶的移入移出操作,mouseover()與mouseout()事件,兩者用法類似,下面一mouseover為例:
方法一:$ele.mouseover()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,用的比較少
<div?id="test">點擊觸發(fā)<div> $("ele").mouseover(function(){ ????alert('觸發(fā)指定事件') }) $("#test").click(function(){ ???});
方法二:$ele.mouseover( handler(eventObject) )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào)?handler函數(shù)
這樣可以針對事件的反饋做很多操作了
<div?id="test">滑動觸發(fā)<div> $("#test").mouseover(function()?{ ????//this指向?div元素? });
方法三:$ele.mouseover( [eventData ], handler(eventObject) )
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
<div?id="test">點擊觸發(fā)<div> $("#test").mouseover(11111,function(e)?{ ????//this指向?div元素 ????//e.data??=>?11111?傳遞數(shù)據(jù) });
查看全部 -
用交互操作中,經(jīng)常需要知道用戶是否有移動的操作?;谝苿拥臋C制可以做出拖動、拖拽一系列的效果出來。針對移動事件,jQuery提供了一個mousemove的快捷方法可以監(jiān)聽用戶移動的的操作
使用上非常簡單:
方法一:$ele.mousemove()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,用的比較少
<div?id="test">點擊觸發(fā)<div> $("ele").mousemove(function(){ ????alert('觸發(fā)指定事件') }) $("#test").click(function(){????? ???????//指定觸發(fā)事件?});
?方法二:$ele.mousemove( handler(eventObject) )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào)?handler函數(shù)
這樣可以針對事件的反饋做很多操作了
<div?id="test">滑動觸發(fā)<div> $("#test").mousemove(function()?{ ????//this指向?div元素? });
?方法三:$ele.mousemove( [eventData ], handler(eventObject) )
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
<div?id="test">點擊觸發(fā)<div> $("#test").mousemove(11111,function(e)?{ ????//this指向?div元素 ????//e.data??=>?11111?傳遞數(shù)據(jù) });
?mousemove事件觸發(fā)需要以下幾點:
mousemove事件是當鼠標指針移動時觸發(fā)的,即使是一個像素
如果處理器做任何重大的處理,或者如果該事件存在多個處理函數(shù),這可能造成瀏覽器的嚴重的性能問題
查看全部 -
用戶交互操作中,最簡單直接的操作就是點擊操作,因此jQuery提供了一個mousedown的快捷方法可以監(jiān)聽用戶鼠標按下的操作,與其對應(yīng)的還有一個方法mouseup快捷方法可以監(jiān)聽用戶鼠標彈起的操作。兩種方法用法類似,下面以mousedown()為例
使用上非常簡單:
方法一:$ele.mousedown()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,可能一般用的比較少
<div?id="test">點擊觸發(fā)<div> $("ele").mousedown(function(){ ????alert('觸發(fā)指定事件') }) $("#test").mousedown(function(){? ?????//手動指定觸發(fā)事件?});
方法二:$ele.mousedown( handler(eventObject) )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào)?handler函數(shù)
這樣可以針對事件的反饋做很多操作了
<div?id="test">點擊觸發(fā)<div> $("#test").mousedown(function()?{ ????//this指向?div元素 });
方法三:$ele.mousedown([eventData],handler(eventObject))
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
<div?id="test">點擊觸發(fā)<div> $("#test").mousedown(11111,function(e)?{ ????//this指向?div元素 ????//e.data??=>?11111?傳遞數(shù)據(jù) });
mousedown事件觸發(fā)需要以下幾點:
mousedown強調(diào)是按下觸發(fā)
如果在一個元素按住了鼠標不放,并且拖動鼠標離開這個元素,并釋放鼠標鍵,這仍然是算作mousedown事件
任何鼠標按鈕被按下時都能觸發(fā)mousedown事件
用event 對象的which區(qū)別按鍵,敲擊鼠標左鍵which的值是1,敲擊鼠標中鍵which的值是2,敲擊鼠標右鍵which的值是3
mouseup事件觸發(fā)需要以下幾點:
mouseup強調(diào)是松手觸發(fā),與mousedown是相反的
mouseup與mousedown組合起來就是click事件
如果用戶在一個元素上按下鼠標按鍵,并且拖動鼠標離開這個元素,然后釋放鼠標鍵,這仍然是算作mouseup事件
任何鼠標按鈕松手時都能觸發(fā)mouseup事件
用event 對象的which區(qū)別按鍵,敲擊鼠標左鍵which的值是1,敲擊鼠標中鍵which的值是2,敲擊鼠標右鍵which的值是3
另外需要注意的是:
click與mousedown的區(qū)別:
click事件其實是由mousedown于mouseup 2個動作構(gòu)成,所以點擊的動作只有在松手后才觸發(fā)
查看全部 -
用交互操作中,最簡單直接的操作就是點擊操作。jQuery提供了兩個方法一個是click方法用于監(jiān)聽用戶單擊操作,另一個方法是dbclick方法用于監(jiān)聽用戶雙擊操作。這兩個方法的用法是類似的,下面以click()事件為例
使用上非常簡單:
方法一:$ele.click()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,用的比較少
<div?id="test">點擊觸發(fā)<div> $("ele").click(function(){ ????alert('觸發(fā)指定事件') }) $("#test").click(function(){?? ?????//手動指定觸發(fā)事件? });
方法二:$ele.click( handler(eventObject) )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào)?handler函數(shù),這樣可以針對事件的反饋做很多操作了,方法中的this是指向了綁定事件的元素
<div?id="test">點擊觸發(fā)<div> $("#test").click(function()?{ ????//this指向?div元素 });
方法三:$ele.click([eventData],handler(eventObject))
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
<div?id="test">點擊觸發(fā)<div> $("#test").click(11111,function(e)?{ ????//this指向?div元素 ????//e.data??=>?11111?傳遞數(shù)據(jù) });
dbclick()的用法和click()的用法是類似的,可以參考以上click()的用法。
dbclick與click事件不同的是:
click事件觸發(fā)需要以下幾點:
click事件其實是由mousedown與mouseup 2個動作構(gòu)成,所以點擊的動作只有在松手后才觸發(fā)
PS:mousedown和mouseup下一節(jié)會講到
dbclick事件觸發(fā)需要以下幾點:
dbclick又是由2個click疊加而來的,所以dbclick事件只有在滿足以下條件的情況下才能被觸發(fā)
鼠標指針在元素里面時點擊。
鼠標指針在元素里面時釋放。
鼠標指針在元素里面時再次點擊,點擊間隔時間,是系統(tǒng)而定。
鼠標指針在元素里面時再次釋放。
注意:在同一元素上同時綁定 click 和 dbclick 事件是不可取的。各個瀏覽器事件觸發(fā)的順序是不同的,一些瀏覽器在dbclick之前接受兩個 click 事件 ,而一些瀏覽器只接受一個 click 事件。用戶往往可通過不同的操作系統(tǒng)和瀏覽器配置雙擊靈敏度
查看全部 -
target是當前事件執(zhí)行的第一個具體DOM對象,這個DOM對象不變
this是事件冒泡到DOM樹的哪個對象,this就指向哪個對象,改變的
e.value是undefine,
e和e.target是兩個不同的對象。
事件對象event沒有value這個屬性。
e.target的值是觸發(fā)事件的dom元素對象,這個元素對象有value屬性。
查看全部 -
如何添加參數(shù)
function fn(e) {
? ? ? ? ? ? ?$(this).val(e.data)
? ? ? ? }
? ? ? ? function a() {
? ? ? ? ? ? $("input:last").focusin('慕課網(wǎng)', fn)
? ? ? ? }
? ? ? ? a();
查看全部 -
mouseup事件觸發(fā)需要以下幾點:
mouseup強調(diào)是松手觸發(fā),與mousedown是相反的
mouseup與mousedown組合起來就是click事件
如果用戶在一個元素上按下鼠標按鍵,并且拖動鼠標離開這個元素,然后釋放鼠標鍵,這仍然是算作mouseup事件
任何鼠標按鈕松手時都能觸發(fā)mouseup事件
用event 對象的which區(qū)別按鍵,敲擊鼠標左鍵which的值是1,敲擊鼠標中鍵which的值是2,敲擊鼠標右鍵which的值是3
查看全部 -
.textContent() 是原生 js 的方法,而非 jQuery 方法,無法使用 jQuery 對象進行調(diào)用
jQuery 獲得對象文本的方法有:
.val()
.text()
.html()
查看全部 -
unction?greet(?event?)?{ ??alert(?"Hello?"?+?event.data.name?);?//Hello?慕課網(wǎng) } $(?"button"?).on(?"click",?{ ??name:?"慕課網(wǎng)" },?greet?);
這里
$(?"button"?).on(?"click",?{ ??name:?"慕課網(wǎng)" },?greet?)
表示button執(zhí)行onclick點擊事件時,觸發(fā)greet事件,而{name:"慕課網(wǎng)"}則作為參數(shù)被傳入到greet事件中,{name:"慕課網(wǎng)"}表示一個對象,要想得到“慕課網(wǎng)”,就要通過name屬性來查找,所以用event.data.name
這里也可以傳入一個{name:"慕課網(wǎng)",url:"idcbgp.cn/qadetail/262220"}這樣一個多變量參數(shù),如果要查找地址信息,則用event.data.url
大概就是這樣。
查看全部 -
keydown 是在按之前判斷(當時text還沒有內(nèi)容),觸發(fā)一次空,當下一次按鍵時,就觸發(fā)上一次輸入的內(nèi)容,所以就少一個。
查看全部 -
? ? ? ? ? ? ? ?清風(fēng)流光 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ?
focus blur 和 mouseenter mouseleave相似 ?你點擊的時候相當于只點擊了文本框 文本框沒事件 不觸發(fā)
focusin focusout 和 mouseover mouseout相似 你在文本框內(nèi)獲得焦點和失去焦點的同時相當于從子到父都觸發(fā)了事件;
2017-05-18
查看全部 -
keypress事件與keydown和keyup的主要區(qū)別
只能捕獲單個字符,不能捕獲組合鍵
無法響應(yīng)系統(tǒng)功能鍵(如delete,backspace)
不區(qū)分小鍵盤和主鍵盤的數(shù)字字符
總而言之,
KeyPress主要用來接收字母、數(shù)字等ANSI字符,而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識別的擊鍵。諸如:功能鍵(F1-F12)、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。
查看全部
舉報