-
jQuery表單事件之change事件 <input>元素，<textarea>和<select>元素的值都是可以發(fā)生改變的，開發(fā)者可以通過change事件去監(jiān)聽這些改變的動作 input元素 監(jiān)聽value值的變化，當(dāng)有改變時，失去焦點后觸發(fā)change事件。對于單選按鈕和復(fù)選框，當(dāng)用戶用鼠標(biāo)做出選擇時，該事件立即觸發(fā)。 select元素 對于下拉選擇框，當(dāng)用戶用鼠標(biāo)作出選擇時，該事件立即觸發(fā) textarea元素 多行文本輸入框，當(dāng)有改變時，失去焦點后觸發(fā)change事件查看全部
-
focus和blur不冒泡； focusin 和focusin會冒泡；查看全部
-
jQuery表單事件之blur與focus事件 在之前2.8與2.9節(jié)我們學(xué)過了表單處理事件focusin事件與focusout事件，同樣用于處理表單焦點的事件還有blur與focus事件 它們之間的本質(zhì)區(qū)別: 是否支持冒泡處理 舉個簡單的例子 <div> <input type="text" /> </div> 其中input元素可以觸發(fā)focus()事件 div是input的父元素，當(dāng)它包含的元素input觸發(fā)了focus事件時，它就產(chǎn)生了focusin()事件。 focus()在元素本身產(chǎn)生，focusin()在元素包含的元素中產(chǎn)生 blur與focusout也亦是如此 具體參考下案例，給出來的區(qū)查看全部
-
jQuery鼠標(biāo)事件之focusout事件 當(dāng)一個元素，或者其內(nèi)部任何一個元素失去焦點的時候，比如input元素，用戶在點擊失去焦的時候，如果開發(fā)者需要捕獲這個動作，jQuery提供了一個focusout事件 使用上非常簡單： 方法一：$ele.focusout() 綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個事件，可能一般用的比較少 <div id="test">點擊觸發(fā)<div> $("ele").focusout(function(){ alert('觸發(fā)指定事件') }) $("#test").mouseup(function(){ $("ele").focusout() //指定觸發(fā)事件 }); 方法二：$ele.focusout( handler ) 綁定$ele元素，每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào) handler函數(shù) 這樣可以針對事件的反饋做很多操作了 <div id="test">點擊觸發(fā)<div> $("#test").focusout(function() { //this指向 div元素 }); 方法三：$ele.focusout( [eventData ], handler ) 使用與方法二一致，不過可以接受一個數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題 <div id="test">點擊觸發(fā)<div> $("#test").focusout(11111,function(e) { //this指向 div元素 //e.date => 11111 傳遞數(shù)據(jù) });查看全部
-
jQuery鼠標(biāo)事件之focusin事件 當(dāng)一個元素，或者其內(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() //指定觸發(fā)事件 }); 方法二：$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.date => 11111 傳遞數(shù)據(jù) });查看全部
-
jQuery鼠標(biāo)事件之hover事件 學(xué)了mouseover、mouseout、mouseenter、mouseleave事件，也理解了四個事件的相同點與不同點，現(xiàn)在可以用來給元素做一個簡單的切換效果 在元素上移進(jìn)移出切換其換色，一般通過2個事件配合就可以達(dá)到，這里用mouseenter與mouseleave，這樣可以避免冒泡問題 $(ele).mouseenter(function(){ $(this).css("background", '#bbffaa'); }) $(ele).mouseleave(function(){ $(this).css("background", 'red'); }) 這樣目的是達(dá)到了，代碼稍微有點多，對于這樣的簡單邏輯jQuery直接提供了一個hover方法，可以便捷處理 只需要在hover方法中傳遞2個回調(diào)函數(shù)就可以了，不需要顯示的綁定2個事件 $(selector).hover(handlerIn, handlerOut) handlerIn(eventObject)：當(dāng)鼠標(biāo)指針進(jìn)入元素時觸發(fā)執(zhí)行的事件函數(shù) handlerOut(eventObject)：當(dāng)鼠標(biāo)指針離開元素時觸發(fā)執(zhí)行的事件函數(shù) 這個事件就是這么簡單，具體參考下右邊代碼的操作:查看全部
-
jQuery鼠標(biāo)事件之mouseenter與mouseleave事件 用交互操作中，經(jīng)常需要知道用戶操作鼠標(biāo)是否有移到元素內(nèi)部或是元素外部，因此jQuery提供了一個mouseenter和mouseleave的快捷方法可以監(jiān)聽用戶移動到內(nèi)部的操作 使用上非常簡單，三種參數(shù)傳遞方式與mouseover和mouseout是一模一樣的，所以這里不再重復(fù)，主要講講區(qū)別，下面以mouseenter為例： mouseenter JavaScript事件是Internet Explorer專有的。由于該事件在平時很有用，jQuery的模擬這一事件，以便它可用于所有瀏覽器。該事件在鼠標(biāo)移入到元素上時被觸發(fā)。任何HTML元素都可以接受此事件。 mouseenter事件和mouseover的區(qū)別 關(guān)鍵點就是：冒泡的方式處理問題 簡單的例子： mouseover為例： <div class="aaron2"> <p>鼠標(biāo)離開此區(qū)域觸發(fā)mouseleave事件</p> </div> 如果在p元素與div元素都綁定mouseover事件，鼠標(biāo)在離開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ā)查看全部
-
jQuery鼠標(biāo)事件之mouseover與mouseout事件 在學(xué)JS的時候，大家還記得有兩個方法叫移入移出事件嗎？onmouseover()與onmouseout()事件~ jQuery當(dāng)中同樣提供了這樣的事件來監(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() //指定觸發(fā)事件 }); 方法二：$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.date => 11111 傳遞數(shù)據(jù) }); 具體使用可以參考右邊的代碼查看全部
-
jQuery鼠標(biāo)事件之mousemove事件 用交互操作中，經(jīng)常需要知道用戶是否有移動的操作。基于移動的機(jī)制可以做出拖動、拖拽一系列的效果出來。針對移動事件，jQuery提供了一個mousemove的快捷方法可以監(jiān)聽用戶移動的的操作 使用上非常簡單： 方法一：$ele.mousemove() 綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個事件，用的比較少 <div id="test">點擊觸發(fā)<div> $("ele").mousemove(function(){ alert('觸發(fā)指定事件') }) $("#test").click(function(){ $("ele").mousemove() //指定觸發(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.date => 11111 傳遞數(shù)據(jù) }); mousemove事件觸發(fā)需要以下幾點： mousemove事件是當(dāng)鼠標(biāo)指針移動時觸發(fā)的，即使是一個像素 如果處理器做任何重大的處理，或者如果該事件存在多個處理函數(shù)，這可能造成瀏覽器的嚴(yán)重的性能問題查看全部
-
dbclick與click事件不同的是： click事件觸發(fā)需要以下幾點： click事件其實是由mousedown與mouseup 2個動作構(gòu)成，所以點擊的動作只有在松手后才觸發(fā) PS:mousedown和mouseup下一節(jié)會講到 dblclick事件觸發(fā)需要以下幾點： dblclick又是由2個click疊加而來的，所以dblclick事件只有在滿足以下條件的情況下才能被觸發(fā) 鼠標(biāo)指針在元素里面時點擊。 鼠標(biāo)指針在元素里面時釋放。 鼠標(biāo)指針在元素里面時再次點擊，點擊間隔時間，是系統(tǒng)而定。 鼠標(biāo)指針在元素里面時再次釋放。 注意：在同一元素上同時綁定 click 和 dblclick 事件是不可取的。各個瀏覽器事件觸發(fā)的順序是不同的，一些瀏覽器在dblclick之前接受兩個 click 事件 ，而一些瀏覽器只接受一個 click 事件。用戶往往可通過不同的操作系統(tǒng)和瀏覽器配置雙擊靈敏度查看全部
-
jQuery鼠標(biāo)事件之click與dbclick事件 用交互操作中，最簡單直接的操作就是點擊操作。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(){ $("ele").click() //手動指定觸發(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.date => 11111 傳遞數(shù)據(jù) }); dblclick()的用法和click()的用法是類似的，可以參考以上click()的用法。 dbclick與click事件不同的是： click事件觸發(fā)需要以下幾點： click事件其實是由mousedown與mouseup 2個動作構(gòu)成，所以點擊的動作只有在松手后才觸發(fā) PS:mousedown和mouseup下一節(jié)會講到查看全部
-
第二次點擊有用，只不過和第一次結(jié)果一樣，看不出變化。$('#msg').html()無參數(shù)時為獲取，有參為設(shè)置，相當(dāng)于 n=n+1; 你把后面一個n去掉，再一次運行，結(jié)果不變，但是事件發(fā)生過。查看全部
-
this和event.target的區(qū)別： js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素；查看全部
-
變量n. 導(dǎo)致的問題：當(dāng)你點擊了幾次第一個測試區(qū)域后，只點擊了一次第二個測試區(qū)域，就會發(fā)現(xiàn)第二個測試區(qū)域顯示的次數(shù)顯然不是1，因為第一個測試區(qū)域的時候就修改了全局變量n的值。查看全部
-
$("div").on("click","p",fn) 事件綁定在最上層div元素上，當(dāng)用戶觸發(fā)在a元素上，事件將往上冒泡，一直會冒泡在div元素上。如果提供了第二參數(shù)，那么事件在往上冒泡的過程中遇到了選擇器匹配的元素，將會觸發(fā)事件回調(diào)函數(shù)查看全部
舉報
0/150
提交
取消