-
jQuery鼠標事件之mousemove事件 用交互操作中，經(jīng)常需要知道用戶是否有移動的操作?；谝苿拥臋C制可以做出拖動、拖拽一系列的效果出來。針對移動事件，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.data => 11111 傳遞數(shù)據(jù) });查看全部
-
jQuery鼠標事件之mousedown與mouseup事件 用戶交互操作中，最簡單直接的操作就是點擊操作，因此jQuery提供了一個mousedown的快捷方法可以監(jiān)聽用戶鼠標按下的操作，與其對應的還有一個方法mouseup快捷方法可以監(jiān)聽用戶鼠標彈起的操作。兩種方法用法類似，下面以mousedown()為例 使用上非常簡單： 方法一：$ele.mousedown() 綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個事件，可能一般用的比較少 <div id="test">點擊觸發(fā)<div> $("ele").mousedown(function(){ alert('觸發(fā)指定事件') }) $("#test").mousedown(function(){ $("ele").mousedown() //手動指定觸發(fā)事件 }); 方法二：$ele.mousedown( handler(eventObject) ) 綁定$ele元素，每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào) handler函數(shù) 這樣可以針對事件的反饋做很多操作了 <div id="test">點擊觸發(fā)<div> $("#test").mousedown(function() { //this指向 div元素 }); 方法三：$ele.mousedown( [eventData ], handler(eventObject) ) 使用與方法二一致，不過可以接受一個數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題 <div id="test">點擊觸發(fā)<div> $("#test").mousedown(11111,function(e) { //this指向 div元素 //e.data => 11111 傳遞數(shù)據(jù) });查看全部
-
jQuery鼠標事件之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.data => 11111 傳遞數(shù)據(jù) }); dblclick()的用法和click()的用法是類似的，可以參考以上click()的用法。 dbclick與click事件不同的是： click事件觸發(fā)需要以下幾點： click事件其實是由mousedown與mouseup 2個動作構成，所以點擊的動作只有在松手后才觸發(fā) PS:mousedown和mouseup下一節(jié)會講到 dblclick事件觸發(fā)需要以下幾點： dblclick又是由2個click疊加而來的，所以dblclick事件只有在滿足以下條件的情況下才能被觸發(fā)查看全部
-
focus()在元素本身產(chǎn)生，focusin()在元素包含的元素中產(chǎn)生 focus()與blur()時間作用與input標簽查看全部
-
自定義事件：triggerHandler查看全部
-
jquery事件對象的屬性和方法 event.type event.preventX event.preventY event.preventDefault event.stopPropagation event.which event.currenTarget查看全部
-
keyPress事件與keydown和keyup的主要區(qū)別查看全部
-
hover()這個方法里頭封裝的是mouseenter(), mouseleave()兩個方法, 可以阻止冒泡問題. 這個方法可以用來改變樣式, 比如鼠標移入div變色, 移出回到以前的顏色. 相當于css中的div:hover, 但是:hover很多的瀏覽器對a:hover支持還不錯, 對div:hover, ul:hover支持有點差, 特別是ie6,ie7這些較低的版本. 用jquery可以解決兼容性,代碼量比js要少很多, 可以專注在邏輯業(yè)務上. jQuery 1.7 版本前該方法觸發(fā) mouseenter 和 mouseleave 事件。 jQuery 1.8 版本后該方法觸發(fā) mouseover 和 mouseout 事件。查看全部
-
triggerHandler事件 若要觸發(fā)通過 jQuery 綁定的事件處理函數(shù)，而不觸發(fā)原生的事件，使用.triggerHandler() 來代替 triggerHandler與trigger的用法是一樣的，重點看不同之處： triggerHandler不會觸發(fā)瀏覽器的默認行為，.triggerHandler( "submit" )將不會調(diào)用表單上的.submit() .trigger() 會影響所有與 jQuery 對象相匹配的元素，而 .triggerHandler() 僅影響第一個匹配到的元素 使用 .triggerHandler() 觸發(fā)的事件，并不會在 DOM 樹中向上冒泡。 如果它們不是由目標元素直接觸發(fā)的，那么它就不會進行任何處理 與普通的方法返回 jQuery 對象(這樣就能夠使用鏈式用法)相反，.triggerHandler() 返回最后一個處理的事件的返回值。如果沒有觸發(fā)任何事件，會返回 undefined查看全部
-
trigger事件 假設一個jQuery元素 綁定了一個事件： $("element").click(function(){ alert("click event") }); 那么想要觸發(fā)這個event 事件有兩種方式： 1 用鼠標點擊 element 這個頁面元素。 2 就是在javacsrip腳本里寫 trigger 來觸發(fā)它（就是不用鼠標點），當執(zhí)行到這句的事件就等于點擊了element. 比如 在頁面加載完成的時候就想自動點擊一下這個element. $(function(){ $("element").click(function(){ alert("click event") }); $("element").trigger("click"); }) trigger除了能夠觸發(fā)瀏覽器事件，同時還支持自定義事件，并且自定義時間還支持傳遞參數(shù) $('#elem').on('Aaron', function(event,arg1,arg2) { alert("自觸自定義時間") }); $('#elem').trigger('Aaron',['參數(shù)1','參數(shù)2'])查看全部
-
jQuery事件對象的屬性和方法 事件對象的屬于與方法有很多，但是我們經(jīng)常用的只有那么幾個，這里我主要說下作用與區(qū)別 event.type：獲取事件的類型 觸發(fā)元素的事件類型 $("a").click(function(event) { alert(event.type); // "click"事件 }); event.pageX 和 event.pageY：獲取鼠標當前相對于頁面的坐標 通過這2個屬性，可以確定元素在當前頁面的坐標值，鼠標相對于文檔的左邊緣的位置（左邊）與 （頂邊）的距離，簡單來說是從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化 event.preventDefault() 方法：阻止默認行為 這個用的特別多，在執(zhí)行這個方法后，如果點擊一個鏈接（a標簽），瀏覽器不會跳轉到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來確定這個方法是否(在那個事件對象上)被調(diào)用過了 event.stopPropagation() 方法：阻止事件冒泡 事件是可以冒泡的，為防止事件冒泡到DOM樹上，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù) event.which：獲取在鼠標單擊時，單擊的是鼠標的哪個鍵 event.which 將 event.keyCode 和 event.charCode 標準化了。event.which也將正?；陌粹o按下(mousedown 和 mouseupevents)，左鍵報告1，中間鍵報告2，右鍵報告3 event.currentTarget : 在事件冒泡過程中的當前DOM元素 冒泡前的當前觸發(fā)事件的DOM對象, 等同于this. this和event.target的區(qū)別： js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素； .this和event.target都是dom對象 如果要使用jquey中的方法可以將他們轉換為jquery對象。比如this和$(this)的使用、event.target和$(event.target)的使用；查看全部
-
1.event.target是觸發(fā)事件的元素，不一定是事件綁定的元素。 如：<div> <p> <p> <p> </div> 事件綁定在div上， 點擊p會發(fā)生事件冒泡，觸發(fā)回調(diào)function,this是div，此時event.target為p； 點擊div時,this是div，event.target是div。 由于點擊p時事件不是綁定在p上，而是綁定在div上，由div綁定的事件的回調(diào)函數(shù)處理，所以稱為事件委托。 注意：由于事件冒泡的存在，this是可以變化的，this是指“委托人”，即處理事件的元素。 而event.target始終指直接接受事件的目標DOM元素查看全部
-
通過.on()綁定的事件處理程序 通過off() 方法移除該綁定 綁定2個事件 $("elem").on("mousedown mouseup",fn) 刪除一個事件 $("elem").off("mousedown") 刪除所有事件 $("elem").off("mousedown mouseup") 快捷方式刪除所有事件，這里不需要傳遞事件名了，節(jié)點上綁定的所有事件講全部銷毀 $("elem").off()查看全部
-
<body> <h2>on事件委托</h2> <div class="left"> <div class="aaron"> <a>點擊這里</a> </div> </div> <script type="text/javascript"> //給body綁定一個click事件 //沒有直接a元素綁定點擊事件 //通過委托機制，點擊a元素的時候，事件觸發(fā) $('body').on('click', 'a', function(e) { alert(e.target.textContent) })查看全部
-
on()的高級用法 委托機制 .on( events ,[ selector ] ,[ data ], handler(eventObject) ) 在on的第二參數(shù)中提供了一個selector選擇器，簡單的來描述下： 參考下面3層結構 <div class="left"> <p class="aaron"> <a>目標節(jié)點</a> //點擊在這個元素上 </p> </div> 給出如下代碼： $("div").on("click","p",fn) 事件綁定在最上層div元素上，當用戶觸發(fā)在a元素上，事件將往上冒泡，一直會冒泡在div元素上。如果提供了第二參數(shù)，那么事件在往上冒泡的過程中遇到了選擇器匹配的元素，將會觸發(fā)事件回調(diào)函數(shù)查看全部
舉報
0/150
提交
取消