1. 程式人生 > >jquery中的常用事件總結

jquery中的常用事件總結

Jquery中的常用事件總結

1.$(document).ready()

$(document).ready()是jQuery中響應JavaScript內建的onload事件並執行任務的一種典型方式。它和onload具有類似的效果。但是也有一些差異:

當一個文件完全下載到瀏覽器中時,會觸發window.onload事件。而使用$(document).ready()註冊的事件處理程式會在html下載完成並解析為Dom樹之後,程式碼就可以執行,但並不意味著所有關聯檔案都已經下載完畢。

一個頁面中一般只有一個onload事件處理程式,而且只能一次儲存對一個函式的引用;而$(document).ready()是可以有多個。

一般來說$(document).ready()都要優於使用onload事件處理程式。但是如果關聯檔案還沒有載入完成,則類似影象高度、寬度的屬性的呼叫就會有問題,因此需要在不同的時候選擇合適的方法。

複製程式碼 程式碼如下:

$(document).ready()有三種寫法,分別是:

$(document).ready(function(){

//thisis the coding...

});

$().ready(function(){

//thisis the coding...

});

$(function(){

//thisis the coding...

});

2.事件繫結

語法

$(selector).bind(event,data,function)

引數和描述:

event:必需。規定新增到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。

data 可選。規定傳遞到函式的額外資料。

function  必需。規定當事件發生時執行的函式。

對應的有unbind():移除事件

Eg:  $(‘#idchoose’).unbind(“click”,Function_Name)

簡寫繫結事件:一般比較喜歡偏向簡寫

$("#dividelement").bind("click",function(){//do something})改寫為:

$("#dividelement").click(function(){//do something }

jQuery通過使用.bind()方法為元素進行事件繫結,通過使用.unbind()方法為元素進行解除繫結。而且.bind()方法是可以執行多次繫結的,如果沒有繫結,在進行解除繫結的時候,這都是安全的。

很多時候某一個事件只需要觸發一次,隨後就要立即解除繫結,按照傳統的做法,我們可能會先進行事件繫結,然後在事件執行完畢後進行解除繫結。jQuery為我們提供了一種簡寫的方法.one來專門解決上述情景下的繁瑣的程式碼編寫,示例如下:

複製程式碼 程式碼如下:

$(document).ready(function(){

$('#swotcjer').one('click',toggleStyleSwitcher);

});

附帶說下,用bind繫結事件的好處是可以定義自定義的事件,而且可以一次繫結多個事件。

3.合成事件

在進行事件捕獲的時候,常常需要捕獲組合的使用者操作,並且以多個函式作為響應,這些事件我們稱為複合事件。

jQuery提供的.ready()方法就是最常用的符合事件方法之一,除此之外,還有進行互動處理的時候用到的兩個函式:

.hover(enter,leave) 一個模仿懸停事件(滑鼠移動到一個物件上面及移出這個物件)的方法。這是一個自定義的方法,它為頻繁使用的任務提供了一種“保持在其中”的狀態。

$(function(){

    $("#panelh5.head").hover(function(){

          $(this).next().show();

       },function(){

          $(this).next().hide();  

       })

})

.toggle(fn1,fn2,..fnN) 每次點選時切換要呼叫的函式。用於模擬滑鼠連續單擊事件。示例:

$(function(){

    $("#panelh5.head").toggle(function(){

                     $(this).addClass("highlight");

                     $(this).next().show();

       },function(){

                     $(this).removeClass("highlight");

                     $(this).next().hide();

       });

})

4.事件物件與事件冒泡

事件物件:在程式中使用事件物件非常簡單,只需要為函式新增一個引數,eg:

$(“element”).click(function(event){

//event:事件物件

})

當點選“element”元素時候,事件物件就被建立了。這個物件只有事件處理函式能訪問。當事件處理函式執行完畢,事件物件就被銷燬了。

事件捕獲: 允許多個元素響應事件的一種策略。在事件捕獲的過程中,事件首先會交給最外層的元素,接著再交給更具體的元素。 (body->div->span)

事件冒泡:另外一種相反的策略叫時間冒泡,當事件發生時,會首先發送給最具體的元素,在這個元素獲得響應機會之後,事件會向上冒泡到更一般的元素。事件冒泡有時候會產生副作用,導致始料不及的行為。 (span->div->body)

阻止事件冒泡的三種方法:

通過呼叫.preventDefault()方法可以在出發預設操作之前終止事件。

呼叫event.stopPropagation()停止事件傳播

jQuery提供了一個.stopPropagation()方法,使用該方法可以完全阻止事件冒泡。

5.使用event.tatget屬性明確事件物件

事件處理程式中event儲存著事件物件。而event.tatget屬性儲存著發生事件的目標元素。這個屬性是DOMAPI中規定的,但是沒有被所有瀏覽器實現。jQuery對這個事件物件進行了必要的擴充套件,從而在任何瀏覽器中都能夠使用這個屬性。通過.target,可以確定DOM中首先接收到事件的元素。而且,我們知道this引用的是處理事件的DOM元素。

使用event.tatget屬性 明確事件物件阻止事件冒泡的程式碼如下:

複製程式碼 程式碼如下:

$(document).ready(function(){

$('switcher').click(function(event){

if(event.target== this)

{

$('switcher.button').toggleClass('hidden');

}

};)

});

其他事件物件屬性可以參考w3c上的介紹。

相關推薦

JQuery常用 事件 清單總結

所有事件都是方法 所有事件都是方法blur(fn) :當失去焦點時觸發 change(fn) :當狀態改變時觸發 click(fn) :當單擊時觸發 dblclick(fn) :當雙擊時觸發 focu

jQuery常用事件

1 $.proxy 接收一個函式引數,並返回一個有特定上下文的新函式 jQuery.proxy( function, context [, additionalArguments ] ) 引數 型別 說明 function

jquery常用事件總結

Jquery中的常用事件總結 1.$(document).ready() $(document).ready()是jQuery中響應JavaScript內建的onload事件並執行任務的一種典型方式。它和onload具有類似的效果。但是也有一些差異: 當一個文件完全下載

jQuery常用的元素查找方法總結

form select checkbox disabled 聯合 節點 id屬性 anim area $("#myELement") 選擇id值等於myElement的元素,id值不能重復在文檔中只能有一個id值是myElement所以得到的是唯一的元素 $("div")

JQuery常用事件總結

JQuery在使用中會有很多事件被使用到,使用監聽事件可以大大提高開發的效率和速度,總結一下遇到過的常用事件。 1、滑鼠事件 click    點選事件; dblclick   雙擊事件; mouseenter  滑鼠移入事件

jQueryjQuery常用事件總結

注意:jQuery是一個集合,所有很多時候返回值也是一個集合 1.滑鼠事件 $ele.click() 單擊 $ele.click( function(e) ) $ele.click( [eventData ],function(e)) e.data=event

JQuery阻止事件冒泡方式及其區別

use urn query class span 事件冒泡 事件 clas nbsp 方式一:event.stopPropagation(); 1 $("#div1").mousedown(function(event){ 2 event.stopPropa

jQuery事件

方法 ever () 圖片 關聯 ready click type see 1.加載DOM 在頁面加載完畢後,JS用window.onload為DOM元素添加事件,jQuery中,用$(document).ready()為DOM元素添加事件,使用該方法可以在DOM載入就緒時

Jqueryclick事件重復執行的問題

銷毀 事件 事件綁定 方案 cti highlight logs () clas $(‘#xxx‘).unbind(‘click‘).click(function () { ... });   每次綁定前先取消上次的綁定。 1.一種方法是彈窗隱藏的時候把彈窗銷

JavaScript事件委托原理及Jquery事件委托

and 就是 傳播 break scrip lock -i 位置 dom 概念 事件委托,通俗來說就是將元素的事件委托給它的父級或者更外級元素處理。 事件流 事件流描述的是從頁面中接收事件的順序。 事件冒泡:事件開始由最具體的元素接收,然後逐級向上傳播到較為不具體的節點

jQuery事件與驅動

效果 代碼 產生 down ESS 名稱 用戶 use 註意 1.jQuery中的事件 在jQuery中,事件總體分為倆大類:基礎事件和符合事件。 jQuery中的簡單事件,與Javascript中的事件 幾乎一樣,都含有鼠標事件、鍵盤事件、載件事件等,只是其

jQuery事件方法,使用on()代替live()

del tor () on() span ron clas bin pan 在項目中經常需要動態的生成一些標簽,並且要給這些標簽添加一些事件,在jquery之前的版本中可以使用live()方法方便的綁定事件,但是live()在1.7版本中就被廢除,並在1.9版本中被刪除,這

JQuery事件與動畫

自定義 打印 sele 樣式 mouseover bind button cli ima 1.鼠標事件 方法       描述                       執行時機 click( )        觸發或將函數綁定到指定元素的click事件    

js 常用事件總結

pre style 不支持 con class 隨著 hist PE 手機 無論web端還是手機端,用戶的交互總伴隨著事件監聽 下面是我總結的一些常用到的事件 1.監聽標簽內容變化 非input元素 $(dom).bind(‘DOMNodeInserted‘,func

使用jQuery快速高效制作網頁交互特效——07 第七章 jQuery事件與動畫

left true scale 阻止 ble something 傳遞 程序 節點 1、 jQuery中的事件: ●和WinForm一樣,在網頁中的交互也是需要事件來實現的,例如tab切換效果,可以通過鼠標單擊事件來實現 ●jQuery事件是對JavaScr

JavaScript - 常用事件總結

目錄 一、事件的兩種繫結方式  1、on事件繫結方式 2、非on事件繫結方式 二、事件引數event  三、事件的冒泡與預設事件  1、事件的冒泡:子位於父內部,子觸發,父也一起觸發事件。  1-1 取消冒泡事件的方式一:子級內部設

js常用事件

滑鼠事件 /* onclick:點選某個物件時觸發 ondblclick:雙擊某個物件時觸發 onmouseover:滑鼠移入某個元素時觸發 onmouseout:滑鼠移出某個元素時觸發 onmouseenter:滑鼠進入某個元素時觸發 onmouseleave:滑鼠離開某個元素時觸發 onmouse

jQuery事件委託練習(一)

1.事件委託的基本結構 $(function(){ // 事件委託: // 請別人幫忙做事,然後將做完的結果反饋給我們 $("button").click(function(){ $("ul").append("<li>我是新增的li</li>");

Jquerytoggle事件

Html程式碼 <p>測試1</p> <p>測試2</p> <p style="display:none">隱藏測試</p> <button class="btn1">點選</button>

HTML-jQuery事件與動畫

網頁中的事件 和WinForm一樣,在網頁中的互動也是需要事件來實現的,例如tab切換效果,可以通過滑鼠單擊事件來實現 jQuery中的事件: jQuery事件是對JavaScript事件的封裝,常用事件分類: 基礎事件:①滑鼠事件;②鍵盤事件;③window事件