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ā)這些事件秩冈。

//給element綁定hello事件

element.bind("hello",function(){

? ? alert("hello world!");

});

//觸發(fā)hello事件

element.trigger("hello");


事件冒泡

什么是事件冒泡

在一個(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() 來阻止

$(function(){

? ? var $box1 = $('.father');

? ? var $box2 = $('.son');

? ? var $box3 = $('.grandson');

? ? $box1.click(function() {

? ? ? ? alert('father');

? ? });

? ? $box2.click(function() {

? ? ? ? alert('son');

? ? });

? ? $box3.click(function(event) {

? ? ? ? alert('grandson');

? ? ? ? event.stopPropagation();

? ? });

? ? $(document).click(function(event) {

? ? ? ? alert('grandfather');

? ? });

})

......

<div class="father">

? ? <div class="son">

? ? ? ? <div class="grandson"></div>

? ? </div>

</div>

阻止默認(rèn)行為

阻止右鍵菜單

$(document).contextmenu(function(event) {

? ? event.preventDefault();

});

合并阻止操作

實(shí)際開發(fā)中筋粗,一般把阻止冒泡和阻止默認(rèn)行為合并起來寫策橘,合并寫法可以用

// event.stopPropagation();

// event.preventDefault();

// 合并寫法:

return false;

頁面彈框?qū)嵗?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市娜亿,隨后出現(xiàn)的幾起案子丽已,更是在濱河造成了極大的恐慌,老刑警劉巖买决,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件沛婴,死亡現(xiàn)場(chǎng)離奇詭異吼畏,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)嘁灯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門泻蚊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人丑婿,你說我怎么就攤上這事性雄。” “怎么了羹奉?”我有些...
    開封第一講書人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵秒旋,是天一觀的道長。 經(jīng)常有香客問我尘奏,道長滩褥,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任炫加,我火速辦了婚禮瑰煎,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘俗孝。我一直安慰自己酒甸,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開白布赋铝。 她就那樣靜靜地躺著插勤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪革骨。 梳的紋絲不亂的頭發(fā)上农尖,一...
    開封第一講書人閱讀 51,301評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音良哲,去河邊找鬼盛卡。 笑死,一個(gè)胖子當(dāng)著我的面吹牛筑凫,可吹牛的內(nèi)容都是我干的滑沧。 我是一名探鬼主播,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼巍实,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼滓技!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起棚潦,我...
    開封第一講書人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤令漂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體洗显,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡外潜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了挠唆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片处窥。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖玄组,靈堂內(nèi)的尸體忽然破棺而出滔驾,到底是詐尸還是另有隱情,我是刑警寧澤俄讹,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布哆致,位于F島的核電站,受9級(jí)特大地震影響患膛,放射性物質(zhì)發(fā)生泄漏摊阀。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一踪蹬、第九天 我趴在偏房一處隱蔽的房頂上張望胞此。 院中可真熱鬧,春花似錦跃捣、人聲如沸漱牵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽酣胀。三九已至,卻和暖如春娶聘,著一層夾襖步出監(jiān)牢的瞬間闻镶,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來泰國打工丸升, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留铆农,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓发钝,卻偏偏與公主長得像顿涣,于是被迫代替她去往敵國和親波闹。 傳聞我的和親對(duì)象是個(gè)殘疾皇子酝豪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

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