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

為了賬號安全,請及時綁定郵箱和手機立即綁定
  • jQuery鼠標事件之focusin事件

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

    使用上非常簡單:

    方法一:$ele.focusin()

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

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

    ?

    方法二:$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?傳遞數據?});


    查看全部
  • jQuery鼠標事件之hover事件

    學了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事件

    用交互操作中,經常需要知道用戶操作鼠標是否有移到元素內部或是元素外部,因此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事件只會在綁定它的元素上被調用,而不會在后代節點上被觸發


    這就是最本質的區別,具體的對應可以參考右邊的案例:

    PS:同學可以根據右側代碼,自己寫出mouseout與mouseleave的區別哦~


    查看全部
  • jQuery鼠標事件之mouseover與mouseout事件

    在學JS的時候,大家還記得有兩個方法叫移入移出事件嗎?onmouseover()與onmouseout()事件~

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

    方法一:$ele.mouseover()

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

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

    方法二:$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?傳遞數據?});


    查看全部
  • jQuery鼠標事件之mousemove事件

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

    使用上非常簡單:

    方法一:$ele.mousemove()

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

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

    ?

    方法二:$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事件

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

    使用上非常簡單:

    方法一:$ele.mousedown()

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

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

    方法二:$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事件

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

    使用上非常簡單:

    方法一:$ele.click()

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

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

    方法二:$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 事件。用戶往往可通過不同的操作系統和瀏覽器配置雙擊靈敏度


    查看全部
  • 由于瀏覽器有事件冒泡的這個特性,我們可以在觸發li的時候把這個事件往上冒泡到ul上,因為ul上綁定事件響應所以就能夠觸發這個動作了

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

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


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

    查看全部
  • 這里需要特別注意:

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

    jQuery處理如下:

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


    查看全部
  • select事件只能用于<input>元素與<textarea>元素


    查看全部
  • event.type:獲取事件的類型

    event.pageX 和 event.pageY:獲取鼠標當前相對于頁面的坐標

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

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

    event.which:獲取在鼠標單擊時,單擊的是鼠標的哪個鍵

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


    查看全部
  • 區別就在于focus和blur只能在input之類的表格元素本身上起效,當在他的父級元素上綁focus和blur事件時,因為它倆不冒泡,所以在外部的綁定其實是沒有效果的。
    而focusin和focusout可以冒泡,所以就算是在父級綁定的這兩個事件,只要是內部元素觸發了獲得和失去焦點的事件,一樣可以冒泡出來,讓父級元素綁定的事件捕獲到,從而執行命令。

    查看全部
  • textContent文本內容

    查看全部

舉報

0/150
提交
取消
課程須知
1、有HTML/CSS基礎 2、有JavaScript基礎
老師告訴你能學到什么?
1、jQuery的基礎語法 2、jQuery事件處理

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!