-
$('body').on('click', 'a', function(e)是委托機(jī)制 在點(diǎn)擊a這個(gè)元素時(shí) 事件向上傳遞（冒泡） 直到與第二個(gè)參數(shù)相等 事件被消費(fèi) 并產(chǎn)生回調(diào)函數(shù) 就這個(gè)函數(shù) 當(dāng)然直接綁定a標(biāo)簽效果也是一樣 內(nèi)部實(shí)現(xiàn)不同 但是如果a標(biāo)簽的祖父級(jí)要拿到a標(biāo)簽的點(diǎn)擊事件或者a標(biāo)簽的內(nèi)容就可以用這個(gè)函數(shù)查看全部
-
focusin 和 focusout 都支持冒泡事件，其下的子元素獲取和失去焦點(diǎn)，都能產(chǎn)生冒泡事件 focus 和 blur 不支持冒泡事件，所以必須綁定在具體元素上，僅僅只有此元素有聚焦和失焦的效果查看全部
-
triggerHandler與trigger的用法是一樣的，重點(diǎn)看不同之處： triggerHandler不會(huì)觸發(fā)瀏覽器的默認(rèn)行為，.triggerHandler( "submit" )將不會(huì)調(diào)用表單上的.submit() .trigger() 會(huì)影響所有與 jQuery 對(duì)象相匹配的元素，而 .triggerHandler() 僅影響第一個(gè)匹配到的元素 使用 .triggerHandler() 觸發(fā)的事件，并不會(huì)在 DOM 樹(shù)中向上冒泡。 如果它們不是由目標(biāo)元素直接觸發(fā)的，那么它就不會(huì)進(jìn)行任何處理 與普通的方法返回 jQuery 對(duì)象(這樣就能夠使用鏈?zhǔn)接梅?相反，.triggerHandler() 返回最后一個(gè)處理的事件的返回值。如果沒(méi)有觸發(fā)任何事件，會(huì)返回 undefined查看全部
-
trigger 事件還有一個(gè)特性：會(huì)在DOM樹(shù)上冒泡，所以如果要阻止冒泡就需要在事件處理程序中返回false或調(diào)用事件對(duì)象中的 .stopPropagation() 方式可以使事件停止冒泡。 若要觸發(fā)通過(guò) jQuery 綁定的事件處理函數(shù)，而不觸發(fā)原生的事件，使用 .triggerHandler() 來(lái)代替。 triggerHandler與trigger的用法是一樣的，不同之處： 1. .triggerHandler 不會(huì)觸發(fā)瀏覽器的默認(rèn)行為，.triggerHandler("submit")將不會(huì)瀏覽器調(diào)用表單上的.submit() 2. .trigger() 會(huì)影響所有與 jQuery 對(duì)象相匹配的元素，而 .triggerHandler() 僅影響第一個(gè)匹配到的元素。 3. 使用 .triggerHandler() 觸發(fā)的事件，并不會(huì)在DOM樹(shù)中向上冒泡。如果它們不是由目標(biāo)元素直接觸發(fā)的，那么它們就不會(huì)進(jìn)行任何處理。 4. 與普通的方法返回 jQuery 對(duì)象(這樣就能夠使用鏈?zhǔn)接梅?相反，.triggerHandler() 返回沒(méi)有觸發(fā)任何事件，會(huì)返回 undefined查看全部
-
事件對(duì)象是用來(lái)記錄一些事件發(fā)生時(shí)的相關(guān)信息的對(duì)象。事件對(duì)象只有事件發(fā)生時(shí)才會(huì)產(chǎn)生，并且只能是事件處理函數(shù)內(nèi)部訪問(wèn)，在所有事件處理函數(shù)運(yùn)行結(jié)束后，事件對(duì)象就被銷毀 回到上面的問(wèn)題，既然事件對(duì)象是跟當(dāng)前觸發(fā)元素息息相關(guān)的，所以我們就能從里面相關(guān)的信息，從事件對(duì)象中找到 event.target event.target target 屬性可以是注冊(cè)事件時(shí)的元素，或者它的子元素。通常用于比較 event.target 和 this 來(lái)確定事件是不是由于冒泡而觸發(fā)的。經(jīng)常用于事件冒泡時(shí)處理事件委托 簡(jiǎn)單來(lái)說(shuō)：event.target代表當(dāng)前觸發(fā)事件的元素，可以通過(guò)當(dāng)前元素對(duì)象的一系列屬性來(lái)判斷是不是我們想要的元素查看全部
-
眾所周知類似于mousedown、click、keydown等等這類型的事件都是瀏覽器提供的，通俗叫原生事件，這類型的事件是需要有交互行為才能被觸發(fā)。 .trigger：根據(jù)綁定到匹配元素的給定的事件類型執(zhí)行所有的處理程序和行為。 .trigger 除了能夠觸發(fā)瀏覽器事件，同時(shí)還支持自定義事件，并且自定義事件還支持傳遞參數(shù)。 $("#elem").on("Aaron",function(event,arg1,arg2){ alert("自觸自定義時(shí)間"); }); $("#elem").trigger("Aaron",["參數(shù)1","參數(shù)2"]); // 點(diǎn)擊更新次數(shù) $("button:first").click(function(event,bottonName){ bottonName = bottonName || "first"; update($("span:first"),$("span:last"),bottonName); }); // 通過(guò)自定義事件調(diào)用，更新次數(shù) $("button:last").click(function(){ $("button:first").trigger("click","last"); }); function update(first,last,bottonName){ first.text(bottonName); var n = parseInt(last.text(), 10); last.text( n + 1); }查看全部
-
1. event.type: 獲取觸發(fā)元素的事件類型 2. event.pageX 和 event.pageY: 獲取鼠標(biāo)當(dāng)前相對(duì)于頁(yè)面的坐標(biāo) 3. event.preventDefault() 方法：阻止默認(rèn)行為 在執(zhí)行這個(gè)方法后，如果點(diǎn)擊一個(gè)鏈接(a標(biāo)簽)，瀏覽器不會(huì)跳轉(zhuǎn)到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來(lái)確定這個(gè)方法是否(在那個(gè)事件對(duì)象上)被調(diào)用過(guò)了。 4. event.stopPropagation() 方法：阻止事件冒泡 事件是可以冒泡的，為防止事件冒泡到DOM樹(shù)上，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)。 5. event.which：獲取在鼠標(biāo)單擊時(shí)，單擊的是鼠標(biāo)的哪個(gè)鍵 event.which 將 event.keyCode 和 event.charCode 標(biāo)準(zhǔn)化了。 6. event.currentTarget：在事件冒泡過(guò)程中的當(dāng)前DOM元素 冒泡前的當(dāng)前觸發(fā)事件的DOM對(duì)象，等同于this 7. this 和 event.target 的區(qū)別： js中事件是會(huì)冒泡的，所以this是可以變化的，但 event.target 不會(huì)變化，它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素; 8. this 和 event.target 都是dom對(duì)象 如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對(duì)象。比如this和$(this)的使用、event.target和$(event.target)的使用；查看全部
-
<div class="left"> <div class="aaron"> <a>點(diǎn)擊這里</a> </div> </div> //給body綁定一個(gè)click事件 //沒(méi)有直接a元素綁定點(diǎn)擊事件 //通過(guò)委托機(jī)制，點(diǎn)擊a元素的時(shí)候，事件觸發(fā) $('body').on('click', 'a', function(e) { // 彈窗1次，將a改為div就會(huì)彈窗2次 alert(e.target.textContent) }) 事件綁定在最上層 body 元素上，當(dāng)用戶觸發(fā)在 a 元素上，事件將往上冒泡，一直會(huì)冒泡在 body 元素上。如果提供了第二參數(shù)，那么事件在往上冒泡的過(guò)程中遇到了選擇器匹配的元素，將會(huì)觸發(fā)事件回調(diào)函數(shù)。查看全部
-
之前學(xué)的鼠標(biāo)事件，表單事件月鍵盤(pán)事件都有個(gè)特點(diǎn)，就是直接給元素綁定一個(gè)處理函數(shù)，所有這類事件都是屬于快捷處理。翻開(kāi)源碼其實(shí)可以看到，所有的快捷事件在底層的處理都是通過(guò)一個(gè)"on"方法來(lái)實(shí)現(xiàn)的。jQuery on()方法是官方推薦的綁定事件的一個(gè)方法。 1. 多個(gè)事件綁定同一個(gè)函數(shù)： // 通過(guò)空格分離，傳遞不同的事件名，可以同時(shí)綁定多個(gè)事件 $("#elem").on("mouseover mouseout", function(){ }); // 一個(gè)事件或多個(gè)事件的格式。。。 2. 多個(gè)事件綁定不同函數(shù)： // 通過(guò)逗號(hào)分離，傳遞不同的事件名，可以同時(shí)綁定多個(gè)事件，每一個(gè)事件執(zhí)行自己的回調(diào)方法 $("#elem").on({ mouseover: function(){}, mouseout: function(){} }); 3. 將數(shù)據(jù)傳遞到處理程序 function greet( event ){ alert("Hello " + event.data.name ); // Hello 慕課網(wǎng) } $( "button" ).on("click",{ name: "慕課網(wǎng)"; }, greet); function greet(event){ $("#test4").text("點(diǎn)擊觸發(fā)："+event.type+":"+event.data.action); } $("#test4").on("mousedown mouseup",{ action:"111" },greet)查看全部
-
理論上 keydown 和 keyup 可以綁定到任何元素，但keydown/keyup事件只是發(fā)送到具有焦點(diǎn)的元素上，不同的瀏覽器中，可獲得焦點(diǎn)的元素略有不同，但是表單元素總是能獲取焦點(diǎn)，所以對(duì)于此事件類型表單元素是最合適的。 keydown 獲得的是之前的文本，keyup 獲得的是之后的文本 析： keydown 每次獲取的內(nèi)容都是之前輸入的，當(dāng)前輸入的獲取不到 keydown 事件觸發(fā)在文字還沒(méi)敲進(jìn)文本框，這時(shí)如果在 keydown 事件中輸出文本框中的文本，得到的是觸發(fā)鍵盤(pán)事件前的文本，而 keyup 事件觸發(fā)時(shí)整個(gè)鍵盤(pán)事件的操作已經(jīng)完成，獲得的是觸發(fā)鍵盤(pán)事件后的文本 keydown 是不區(qū)分英文字母大小寫(xiě)的，a和A的which都是65，但是 keypress 是區(qū)分大小寫(xiě)的，只是 keypress 不能接收到除英文字母、數(shù)字、Enter以外的鍵，而 keydown 卻是可以的！查看全部
-
form元素是有默認(rèn)提交表單的行為，如果通過(guò)submit處理的話，需要禁止瀏覽器的這個(gè)默認(rèn)行為 傳統(tǒng)的方式是調(diào)用事件對(duì)象 e.preventDefault() 來(lái)處理， jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可 例： <div class="aaron"> <form id="target1" action="test.html"> 回車鍵或者點(diǎn)擊提交表單： <input type="text" value="輸入新的值" /> <input type="submit" value="Go" /> </form> </div> //回車鍵或者點(diǎn)擊提交表單 $('#target1').submit(function(e) { alert('捕獲提交表達(dá)動(dòng)作,不阻止頁(yè)面跳轉(zhuǎn)') }); //回車鍵或者點(diǎn)擊提交表單,禁止瀏覽器默認(rèn)跳轉(zhuǎn)： $('#target2').submit(function() { alert('捕獲提交表達(dá)動(dòng)作,阻止頁(yè)面跳轉(zhuǎn)') return false; });查看全部
-
change事件： 1. input元素： 監(jiān)聽(tīng)value值的變化，當(dāng)有改變時(shí)，失去焦點(diǎn)后觸發(fā) change 事件，對(duì)于單選按鈕和復(fù)選框，當(dāng)用戶用鼠標(biāo)做出選擇時(shí)，該事件就立即觸發(fā)！ 2. select元素： 對(duì)于下拉選擇框，當(dāng)用戶用鼠標(biāo)做出選擇時(shí)，該事件就立即觸發(fā)！ 3. textarea元素： 當(dāng)有改變時(shí)，失去焦點(diǎn)后觸發(fā) change 事件！查看全部
-
當(dāng)某元素觸發(fā)了 focus 事件時(shí)，它也就產(chǎn)生了 focusin() 事件！ 而當(dāng)某元素觸發(fā)了 blur 事件時(shí)，它也就產(chǎn)生了 focusout() 事件！查看全部
-
mouseenter事件和mouseover的區(qū)別： 關(guān)鍵點(diǎn)就是：冒泡的方式處理問(wèn)題 例： <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事件，如果父元素有mouseover事件就會(huì)被觸發(fā) 所以在這種情況下面，jQuery推薦我們使用 mouseenter事件， mouseenter事件只會(huì)在綁定它的元素上被調(diào)用，而不會(huì)在后代節(jié)點(diǎn)(其他節(jié)點(diǎn))上被觸發(fā)查看全部
-
用交互操作中，經(jīng)常需要知道用戶是否有移動(dòng)的操作?；谝苿?dòng)的機(jī)制可以做出拖動(dòng)、拖拽一系列的效果出來(lái)。針對(duì)移動(dòng)事件，jQuery提供了一個(gè)mousemove的快捷方法可以監(jiān)聽(tīng)用戶移動(dòng)的的操作 mousemove事件觸發(fā)需要以下幾點(diǎn)： 1. mousemove事件是當(dāng)鼠標(biāo)指針移動(dòng)時(shí)觸發(fā)的，即使是一個(gè)像素 2. 如果處理器做任何重大的處理，或者如果該事件存在多個(gè)處理函數(shù)，這可能造成瀏覽器的嚴(yán)重的性能問(wèn)題 function dataq(e) { $(this).find('p:last').html('數(shù)據(jù):' + e.data) } function a() { $(".right").mousemove(1111, dataq) } a(); $(".bottom").mousemove(1234,function(e){ alert(e.data); // 1234 $(this).find("p:last").html("數(shù)據(jù)："+e.data) });查看全部
舉報(bào)
0/150
提交
取消