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