JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）第10章

JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第10章

jQuery事件處理本章主要內(nèi)容：jQuery事件對象附加和解除事件處理函數(shù)事件快捷方法10.1jQuery事件對象jQuery事件對象封裝了瀏覽器差異，并按照W3C標(biāo)準(zhǔn)進(jìn)行了規(guī)范和統(tǒng)一，確保在所有瀏覽器中采用統(tǒng)一的處理方法。10.1.1事件對象構(gòu)造函數(shù)jQuery的Event()構(gòu)造函數(shù)用事件名稱作為參數(shù)來創(chuàng)建事件對象。使用構(gòu)造函數(shù)創(chuàng)建事件對象時，可不使用new關(guān)鍵字。var

e1

=

$.Event('click')

//創(chuàng)建事件對象var

e2

=

new

$.Event('click')

//創(chuàng)建事件對象事件對象可作為trigger()方法的參數(shù)來觸發(fā)事件。$('body').trigger(e1)

//觸發(fā)事件10.1.2事件對象屬性event.currentTarget：事件冒泡過程中的當(dāng)前DOM元素。event.data：事件對象存儲的附加數(shù)據(jù)。event.pageX、event.pageY：鼠標(biāo)事件發(fā)生時，鼠標(biāo)指針在瀏覽器窗口中的坐標(biāo)。event.relatedTarget：和事件有關(guān)的其他DOM元素，如鼠標(biāo)指針離開的對象。event.result：事件處理函數(shù)的最新返回值。event.target：最初發(fā)生事件的DOM元素。event.timeStamp：事件發(fā)生的時間戳，單位為毫秒。event.type：事件類型。event.which：在發(fā)生鍵盤事件時，屬性返回按鍵的ASCII值。發(fā)生鼠標(biāo)事件時，屬性返回所按下的鼠標(biāo)按鍵。10.1.3事件對象方法事件對象的常用方法如下。event.preventDefault()：阻止事件默認(rèn)行為。event.stopImmediatePropagation()：停止執(zhí)行元素的所有事件處理函數(shù)，同時阻止事件冒泡。event.stopPropagation()：阻止事件冒泡。10.2附加和解除事件處理函數(shù)附加事件處理函數(shù)指將函數(shù)和事件關(guān)聯(lián)起來，在發(fā)生事件時執(zhí)行該函數(shù)來處理事件。解除事件處理函數(shù)則是解除函數(shù)和事件的關(guān)聯(lián)關(guān)系。10.2.1附加事件處理函數(shù)on()方法為事件關(guān)聯(lián)處理函數(shù)，早期的bind()方法已被棄用。on()方法的基本語法格式如下。$('selector').on('eventname',func)$('selector')為要附加事件處理函數(shù)的目標(biāo)對象。eventname為事件名稱，如click。func可以是函數(shù)名或者匿名函數(shù)，可以為元素的同一個事件附加多個處理函數(shù)。10.2.2解除事件處理函數(shù)off()方法用于解除附加到元素的事件處理函數(shù)，其基本語法格式如下。$('selector').off('eventname',func)$('selector')為要解除事件處理函數(shù)的目標(biāo)對象，為其解除eventname事件附加的func()函數(shù)。不帶參數(shù)的off()方法解除匹配元素所有的事件處理函數(shù)。10.3事件快捷方法jQuery提供了一系列事件快捷方法來處理事件處理函數(shù)。例如，click()方法可以為對象附加click事件處理函數(shù)，不帶參數(shù)時則可觸發(fā)click事件。10.3.1瀏覽器事件快捷方法resize()：帶參數(shù)時，為對象附加resize事件處理函數(shù)。scroll()：帶參數(shù)時，為對象附加scroll事件處理函數(shù)。10.3.2表單事件快捷方法blur()：帶參數(shù)時為對象附加blur事件處理函數(shù)。change()：帶參數(shù)時為對象附加change事件處理函數(shù)。focus()：帶參數(shù)時為對象附加focus事件處理函數(shù)。focusin()：帶參數(shù)時為對象附加focusin事件處理函數(shù)。focusout()：帶參數(shù)時為對象附加focusout事件處理函數(shù)。select()：帶參數(shù)時為對象附加select事件處理函數(shù)。submit()：帶參數(shù)時為對象附加submit事件處理函數(shù)。10.3.3鍵盤事件快捷方法keydown()：帶參數(shù)時附加keydown事件處理函數(shù)。keypress()：帶參數(shù)時附加keypress事件處理函數(shù)。keyup()：帶參數(shù)時附加keyup事件處理函數(shù)。另外，無參數(shù)的方法觸發(fā)對象的對應(yīng)事件。10.3.4鼠標(biāo)事件快捷方法click()：帶參數(shù)時附加click事件處理函數(shù)。contextmenu()：帶參數(shù)時附加contextmenu事件處理函數(shù)。dblclick()：帶參數(shù)時附加dblclick事件處理函數(shù)。hover()：只帶一個參數(shù)時附加mouseleave事件處理函數(shù)；帶兩個參數(shù)時，第1個為mouseenter事件處理函數(shù)，第2個為mouseleave事件處理函數(shù)。mousedown()：帶參數(shù)時附加mousedown事件處理函數(shù)。10.3.4鼠標(biāo)事件快捷方法mouseenter()：帶參數(shù)時附加mouseenter事件處理函數(shù)。mouseleave()：帶參數(shù)時附加mouseleave事件處理函數(shù)。mousemove()：帶參數(shù)時附加mousemove事件處理函數(shù)。mouseout()：帶參數(shù)時附加mouseout事件處理函數(shù)。mouseover()：帶參數(shù)時附加mous