jquery事件 主動(dòng)觸發(fā)與自定義事件 事件冒泡 事件委托

jquery事件

事件函數(shù)列表:

blur() 元素失去焦點(diǎn)

focus() 元素獲得焦點(diǎn)

change() 表單元素的值發(fā)生變化

click() 鼠標(biāo)單擊

dblclick() 鼠標(biāo)雙擊

mouseover() 鼠標(biāo)進(jìn)入(進(jìn)入子元素也觸發(fā))

mouseout() 鼠標(biāo)離開(離開子元素也觸發(fā))

mouseenter() 鼠標(biāo)進(jìn)入(進(jìn)入子元素不觸發(fā))

mouseleave() 鼠標(biāo)離開(離開子元素不觸發(fā))

hover() 同時(shí)為mouseenter和mouseleave事件指定處理函數(shù)

mouseup() 松開鼠標(biāo)

mousedown() 按下鼠標(biāo)

mousemove() 鼠標(biāo)在元素內(nèi)部移動(dòng)

keydown() 按下鍵盤

keypress() 按下鍵盤

keyup() 松開鍵盤

load() 元素加載完畢

ready() DOM加載完成

resize() 瀏覽器窗口的大小發(fā)生改變

scroll() 滾動(dòng)條的位置發(fā)生變化

select() 用戶選中文本框中的內(nèi)容

submit() 用戶遞交表單

toggle() 根據(jù)鼠標(biāo)點(diǎn)擊的次數(shù),依次運(yùn)行多個(gè)函數(shù)

unload() 用戶離開頁面

綁定事件的其他方式

$(function(){

? ? $('#div1').bind('mouseover click', function(event) {

? ? ? ? alert($(this).html());

? ? });

});

取消綁定事件

$(function(){

? ? $('#div1').bind('mouseover click', function(event) {

? ? ? ? alert($(this).html());

? ? ? ? // $(this).unbind();

? ? ? ? $(this).unbind('mouseover');

? ? });

});

主動(dòng)觸發(fā)與自定義事件

主動(dòng)觸發(fā)?

可使用jquery對(duì)象上的trigger方法來觸發(fā)對(duì)象上綁定的事件。

自定義事件?

除了系統(tǒng)事件外,可以通過bind方法自定義事件,然后用trigger方法觸發(fā)這些事件。

事件冒泡

什么是事件冒泡?

在一個(gè)對(duì)象上觸發(fā)某類事件(比如單擊onclick事件),如果此對(duì)象定義了此事件的處理程序,那么此事件就會(huì)調(diào)用這個(gè)處理程序,如果沒有定義此事件處理程序或者事件返回true,那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播,從里到外,直至它被處理(父級(jí)對(duì)象所有同類事件都將被激活),或者它到達(dá)了對(duì)象層次的最頂層,即document對(duì)象(有些瀏覽器是window)。

事件冒泡的作用?

事件冒泡允許多個(gè)操作被集中處理(把事件處理器添加到一個(gè)父級(jí)元素上,避免把事件處理器添加到多個(gè)子級(jí)元素上),它還可以讓你在對(duì)象層的不同級(jí)別捕獲事件。

阻止事件冒泡?

事件冒泡機(jī)制有時(shí)候是不需要的,需要阻止掉,通過 event.stopPropagation() 來阻止

事件委托

事件委托就是利用冒泡的原理,把事件加到父級(jí)上,通過判斷事件來源的子集,執(zhí)行相應(yīng)的操作,事件委托首先可以極大減少事件綁定次數(shù),提高性能;其次可以讓新加入的子元素也可以擁有相同的操作。


創(chuàng)建節(jié)點(diǎn)

var $div = $('<div>');

var $div2 = $('<div>這是一個(gè)div元素</div>');

插入節(jié)點(diǎn)?

1、append()和appendTo():在現(xiàn)存元素的內(nèi)部,從后面插入元素

2、prepend()和prependTo():在現(xiàn)存元素的內(nèi)部,從前面插入元素

3、after()和insertAfter():在現(xiàn)存元素的外部,從后面插入元素

4、before()和insertBefore():在現(xiàn)存元素的外部,從前面插入元素

滾輪事件與函數(shù)節(jié)流

jquery.mousewheel插件使用?

jquery中沒有鼠標(biāo)滾輪事件,原生js中的鼠標(biāo)滾輪事件不兼容,可以使用jquery的滾輪事件插件jquery.mousewheel.js。

函數(shù)節(jié)流?

javascript中有些事件的觸發(fā)頻率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面說的鼠標(biāo)滾輪事件,在短事件內(nèi)多處觸發(fā)執(zhí)行綁定的函數(shù),可以巧妙地使用定時(shí)器來減少觸發(fā)的次數(shù),實(shí)現(xiàn)函數(shù)節(jié)流。

整屏滾動(dòng)實(shí)例

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的。 ??事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,678評(píng)論 1 11
  • 本篇博客源地址 總結(jié): 鼠標(biāo)事件 1.click與dbclick事件ele.click()ele.click(ha...
    ZombieBrandg閱讀 742評(píng)論 0 1
  • 總結(jié): 鼠標(biāo)事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,714評(píng)論 2 10
  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點(diǎn)的復(fù)制與替換 (1)DOM拷貝clone() 克隆節(jié)點(diǎn)是DOM的常...
    凜0_0閱讀 1,499評(píng)論 0 8
  • 第1章 鼠標(biāo)事件 1-1 jQuery鼠標(biāo)事件之click與dbclick事件 用交互操作中,最簡單直接的操作就是...
    mo默22閱讀 1,343評(píng)論 0 6

友情鏈接更多精彩內(nèi)容