-
//給body綁定一個click事件 //沒有直接a元素綁定點擊事件 //通過委托機制，點擊a元素的時候，事件觸發 $('body').on('click', 'a', function(e) { alert(e.target.textContent) })查看全部
-
select事件只能用于<input>元素與<textarea>元素查看全部
-
mouseenter與mouseleave，這樣可以避免冒泡問題查看全部
-
mouseover有事件冒泡的問題，mouseenter可以避免事件冒泡。查看全部
-
<h4>測試二</h4> <div class="left"> <div class="aaron1"> <p>鼠標移進此區域觸發mouseover事件</p> <a>進入元素內部,mouseover事件觸發次數：</a> </div> </div> <script type="text/javascript"> var n = 0; //綁定一個mouseover事件 $(".aaron1 p:first").mouseover(function(e) { $(".aaron1 a").html('進入元素內部,mouseover事件觸發次數：' + (++n)) }) </script> <h4>測試三</h4> <div class="right"> <div class="aaron2"> <p>鼠標移動：不同函數傳遞數據</p> <a>進入元素內部,mouseover事件觸發次數：</a> </div> </div> <br/> <script type="text/javascript"> var n = 0; //不同函數傳遞數據 function data(e) { $(".right a").html('mouseover事件觸發次數：' + (++n) + '<br/> 傳入數據為 ：'+ e.data) } function a() { $(".right p:first").mouseover('data = 慕課網', data) } a(); </script>查看全部
-
<h4>測試二</h4> <div class="left"> <div class="aaron1"> <p>鼠標在綠色區域移動觸發mousemove</p> <p>移動的X位置：</p> </div> </div> <script type="text/javascript"> //綁定一個mousemove事件 //觸發后修改內容 $(".aaron1").mousemove(function(e) { $(this).find('p:last').html('移動的X位置：' + e.pageX) }) </script>查看全部
-
<h4>測試一</h4> <button>彈出回調中的鼠標鍵</button> <script type="text/javascript"> //this指向button元素 $("button:eq(0)").mousedown(function(e) { alert('e.which: ' + e.which) }) </script>查看全部
-
<h4>測試三</h4> <div class="test3"> <p>$('.right').click(1111, set)</p> </div> <button>不同函數傳遞數據</button> <script type="text/javascript"> //不同函數傳遞數據 function data(e) { alert(e.data) //1111 } function a() { $("button:eq(2)").dblclick(1111, data) } a(); </script>查看全部
-
1、當textarea或文本類型的input元素中的文本被選擇時，會發生select事件。 這個函數會調用執行綁定到select事件的所有函數，包括瀏覽器的默認行為。可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行為。 注意：select事件只能用于<input>元素與<textarea>元素 2、select事件 （1）方法一：.select() 觸發元素的select事件: $("input").select(); （2）方法二：$ele.select( handler(eventObject) ) 綁定$ele元素，每次$ele元素觸發點擊操作會執行回調handler函數，這樣可以針對事件的反饋做很多操作了 <input id="test" value="文字選中"></input> $("#text").select(function() { //響應文字選中回調 //this指向 input元素 }); （3）方法三：$ele.select( [eventData ], handler(eventObject) ) 使用與方法二一致，不過可以接受一個數據參數，這樣的處理是為了解決不同作用域下數據傳遞的問題 <input id="test" value="文字選中"></input> $("#text").select(11111,function(e) {//響應文字選中回調 //this指向 div元素 //e.date => 11111 傳遞數據 });查看全部
-
1、對于表單焦點處理事件focusin獲焦事件與focusout失焦事件，同樣用于處理表單焦點的事件還有blur失焦事件與focus獲焦事件 2、blur與focus事件之間的本質區別：是否支持冒泡處理 （1）例子 <div> <input type="text" /> </div> 其中input元素可以觸發focus()事件 div是input的父元素，當它包含的元素input觸發了focus事件時，它就產生了focusin()事件。 （2）focus()在元素本身產生，focusin()在元素包含的元素中產生 blur與focusout也亦是如此 （3） ①focus()是元素本身失去焦點時觸發， ②focusin()是元素的子元素失去焦點時觸發，本身失去焦點時是不會觸發該事件的.如果是多級子元素，任何一級的子元素失去焦點都會觸發最高一級元素的focusin()事件 3、blur失焦與focus獲焦、focusin獲焦與focusout失焦的區別 ①blur失焦：不支持冒泡 ②focus獲焦：不支持冒泡 ③focusin獲焦：支持冒泡 ④focusout失焦：支持冒泡查看全部
-
1、<input>元素，<textarea>和<select>元素都是可以選擇值一些改變，可以通過change事件去監聽這些改變的動作 （1）input元素 監聽value值的變化，當有改變時，失去焦點后觸發change事件 （2）select元素 對于下拉選擇框，復選框和單選按鈕，當用戶用鼠標作出選擇，該事件立即觸發 （3）textarea元素 多行文本輸入框，當用戶用鼠標點擊時，該事件立即觸發 2、change事件很簡單，無非就是注意下觸發的先后行為查看全部
-
1、當一個元素，或者其內部任何一個元素失去焦點的時候，比如input元素，用戶在點擊失去焦的時候，如果開發者需要捕獲這個動作，jQuery提供了一個focusout事件 2、focusout事件（失焦） （1）方法一：$ele.focusout() 綁定$ele元素，不帶任何參數一般是用來指定觸發一個事件，一般用比較少 <div id="test">點擊觸發<div> $("ele").focusout(function(){ alert('觸發指定事件') }) $("#text").mouseup(function(){ $("ele").focusout() //指定觸發事件 }); （2）方法二：$ele.focusout( handler ) 綁定$ele元素，每次$ele元素觸發點擊操作會執行回調handler函數，這樣可以針對事件的反饋做很多操作了 <div id="test">點擊觸發<div> $("#text").focusout(function() { //this指向 div元素 }); （3）方法三：$ele.focusout( [eventData ], handler ) 使用與方法二一致，不過可以接受一個數據參數，這樣的處理是為了解決不同作用域下數據傳遞的問題 <div id="test">點擊觸發<div> $("#text").focusout(11111,function(e) { //this指向 div元素 //e.date => 11111 傳遞數據 });查看全部
-
1、當一個元素，或者其內部任何一個元素獲得焦點的時候，例如：input元素，用戶在點擊聚焦的時候，如果開發者需要捕獲這個動作的時候，jQuery提供了一個focusin事件 2、focusin()事件（獲焦） （1）方法一：$ele.focusin() 綁定$ele元素，不帶任何參數一般是用來指定觸發一個事件，一般用比較少 <div id="test">點擊觸發<div> $("ele").focusin(function(){ alert('觸發指定事件') }) $("#text").mouseup(function(){ $("ele").focusin() //指定觸發事件 }); （2）方法二：$ele.focusin( handler ) 綁定$ele元素，每次$ele元素觸發點擊操作會執行回調handler函數，這樣可以針對事件的反饋做很多操作了 <div id="test">點擊觸發<div> $("#text").focusin(function() { //this指向 div元素 }); （3）方法三：$ele.focusin( [eventData ], handler ) 使用與方法二一致，不過可以接受一個數據參數，這樣的處理是為了解決不同作用域下數據傳遞的問題 <div id="test">點擊觸發<div> $("#text").focusin(11111,function(e) { //this指向 div元素 //e.date => 11111 傳遞數據 });查看全部
-
1、學了mouseover、mouseout、mouseenter、mouseleave事件，也理解了四個事件的相同點與不同點，現在可以用來給元素做一個簡單的切換效果 在元素上移進移出切換其換色，一般通過2個事件配合就可以達到，這里用mouseenter與mouseleave，這樣可以避免冒泡問題 $(ele).mouseenter(function(){ $(this).css("background", '#bbffaa'); }) $(ele).mouseleave(function(){ $(this).css("background", 'red'); }) 2、這樣目的是達到了，稍微有點多，對于這樣的簡單邏輯jQuery直接提供了一個hover方法（切換效果），可以便捷處理 只需要在hover方法中傳遞2個回調函數就可以了，不需要顯示的綁定2個事件 $(selector).hover(handlerIn, handlerOut) ①handlerIn(eventObject)：當鼠標指針進入元素時觸發執行的事件函數 ②handlerOut(eventObject)：當鼠標指針離開元素時觸發執行的事件函數查看全部
-
1、用交互操作中，經常需要知道用戶操作鼠標是否有移到元素內部或是元素外部，因此jQuery提供了 ①mouseenter的快捷方法：可以監聽用戶移動到內部的操作（進入） ②mouseleave的快捷方法：可以監聽用戶移動到外部的操作（離開） 2、三種參數傳遞方式與mouseover和mouseout是一模一樣的 3、mouseenter JavaScript事件是Internet Explorer專有的。由于該事件在平時很有用，jQuery的模擬這一事件，以便它可用于所有瀏覽器。該事件在鼠標移入到元素上時被觸發。任何HTML元素都可以接受此事件。 4、mouseenter事件（與mouseleave事件）和mouseover的區別 關鍵點就是：冒泡的方式處理問題 （1）mouseover為例： <div class="aaron2"> <p>鼠標離開此區域觸發mouseleave事件</p> </div> 如果在p元素與div元素都綁定mouseover事件，鼠標在離開p元素，但是沒有離開div元素的時候，觸發的結果： p元素響應事件 div元素響應事件 這里的問題是div為什么會被觸發？ 原因就是事件冒泡的問題，p元素觸發了mouseover，他會一直往上找父元素上的mouseover事件，如果有全觸發了 所以在這種情況下面，jQuery推薦我們使用 mouseenter事件 mouseenter事件只會在綁定它的元素上被調用，而不會在后代節點上被觸發查看全部
舉報
0/150
提交
取消