jquery筆記之事件

默認(rèn)的js代碼是window.onload()
jq代碼是$(document).ready()

js的onload是等待所有元素文件和相關(guān)聯(lián)的文件加載完成论寨,而jq是等待dom加載完成即可花吟。

  1. $(document).ready(function(){codes..})
  2. $(function({codes..})
  3. $().ready(function(){codes..})

1.事件綁定
方法:bind(type[,data],fn)
type:指事件類(lèi)型
data:指可選參數(shù)
fn:指綁定的處理函數(shù)

2.合成事件
1)hover(enter,leave)
模擬光標(biāo)懸停事件鲤脏,第一個(gè)參數(shù)是移動(dòng)到元素上觸發(fā)第一個(gè)函數(shù)们颜,第二個(gè)參數(shù)是移出元素觸發(fā)第二個(gè)函數(shù)
2)toggle()
模擬鼠標(biāo)連續(xù)點(diǎn)擊的事件

3.事件冒泡
包裹的元素會(huì)從內(nèi)側(cè)元素向外側(cè)元素冒泡。
停止冒泡事件:evernt.stopPropagation()
阻止默認(rèn)行為:event.preventDefault()

4.事件捕獲
與事件冒泡相反
jq不支持

5.事件對(duì)象的屬性
1)event.type 獲取事件的類(lèi)型
2)event.preventDefault() 阻止事件的默認(rèn)行為
3)event.stopPropagation() 阻止事件的冒泡方法
4)event.target獲取觸發(fā)事件的元素
5)event.relatedTarget 發(fā)生事件的相關(guān)元素
6)event.pageX和event.pageY獲取光標(biāo)相對(duì)于頁(yè)面的x坐標(biāo)或者y坐標(biāo)
7)event.which 獲得鼠標(biāo)單擊中的左中右鍵
8)event.metaKey 為鍵盤(pán)獲取Ctrl按鍵

6.移除事件
1)移除按鈕元素以前注冊(cè)的事件
方法:unbind([type],[data])
type:事件類(lèi)型
data:要移除的函數(shù)

2)一次觸發(fā)事件one(type,[data],fn)

7.常用模擬
1.觸發(fā)點(diǎn)擊操作:$("#btn").trigger("click") 簡(jiǎn)寫(xiě):$("#btn").click()

2.觸發(fā)自定義事件:元素需要先綁定一個(gè)事件

$("#btn").bind("myClick",function(){
    $('#test').append("<p>xxx</p>")
})
$("#btn").trigger("myClick")

3.傳遞數(shù)據(jù):trigger(type,[data])
type: 事件類(lèi)型
data:傳遞給函數(shù)的參數(shù)

4.執(zhí)行默認(rèn)操作
trigger()方法如果觸發(fā)事件猎醇,會(huì)執(zhí)行瀏覽器的默認(rèn)操作窥突。
例如:$("input").trigger("focus")
這個(gè)代碼布局會(huì)觸發(fā)input的focus操作,而且input本身也會(huì)得到焦點(diǎn)
如果只觸發(fā)綁定的focus事件硫嘶,$("input").triggerHandler("focus")

bind技巧:
1.綁定多個(gè)事件類(lèi)型

$(function(){
    $("div").bind("mouseover mouseout",function(){
        $(this).toggleClass("over");
    })
})

2.添加事件的命名空間阻问,便于管理

$(function(){
    $("div").bind("click.plugin",function(){
        $("body").append("<p>code</p>");
    })
})

3.相同事件名稱(chēng),不同命名空間的執(zhí)行方法

$(function(){
    $("div").bind("click.plugin",function(){
        $("body").append("<p>code1</p>");
    });
    $("div").bind("click",function(){
        $("body").append("<p>code2</p>");
    })
    $("button").click(function(){
        $("div").trigger("click!");//匹配所有不包含在命名空間中的方法
    })
})
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末音半,一起剝皮案震驚了整個(gè)濱河市则拷,隨后出現(xiàn)的幾起案子贡蓖,更是在濱河造成了極大的恐慌曹鸠,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件斥铺,死亡現(xiàn)場(chǎng)離奇詭異彻桃,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)晾蜘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)邻眷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人剔交,你說(shuō)我怎么就攤上這事肆饶。” “怎么了岖常?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵驯镊,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng)板惑,這世上最難降的妖魔是什么橄镜? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮冯乘,結(jié)果婚禮上洽胶,老公的妹妹穿的比我還像新娘。我一直安慰自己裆馒,他們只是感情好姊氓,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著喷好,像睡著了一般他膳。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上绒窑,一...
    開(kāi)封第一講書(shū)人閱讀 52,793評(píng)論 1 314
  • 那天棕孙,我揣著相機(jī)與錄音,去河邊找鬼些膨。 笑死蟀俊,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的订雾。 我是一名探鬼主播肢预,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼洼哎!你這毒婦竟也來(lái)了烫映?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤噩峦,失蹤者是張志新(化名)和其女友劉穎锭沟,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體识补,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡族淮,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了凭涂。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片祝辣。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖切油,靈堂內(nèi)的尸體忽然破棺而出蝙斜,到底是詐尸還是另有隱情,我是刑警寧澤澎胡,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布孕荠,位于F島的核電站绢片,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏岛琼。R本人自食惡果不足惜底循,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望槐瑞。 院中可真熱鬧熙涤,春花似錦、人聲如沸困檩。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)悼沿。三九已至等舔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間糟趾,已是汗流浹背慌植。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留义郑,地道東北人蝶柿。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像非驮,于是被迫代替她去往敵國(guó)和親交汤。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

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

  • 總結(jié): 鼠標(biāo)事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,616評(píng)論 2 10
  • 第1章 鼠標(biāo)事件 1-1 jQuery鼠標(biāo)事件之click與dbclick事件 用交互操作中劫笙,最簡(jiǎn)單直接的操作就是...
    mo默22閱讀 1,284評(píng)論 0 6
  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點(diǎn)的復(fù)制與替換 (1)DOM拷貝clone() 克隆節(jié)點(diǎn)是DOM的常...
    凜0_0閱讀 1,348評(píng)論 0 8
  • 絡(luò)繹手插在衣服口袋芙扎,走在前面,伊心低著頭走在后面填大,像一只溫順的小綿羊戒洼。這場(chǎng)戲是設(shè)定男女主角在校園的一個(gè)小公園談心,...
    向日葵姑娘等太陽(yáng)閱讀 210評(píng)論 0 1
  • 把字寫(xiě)大點(diǎn)栋盹,方便找問(wèn)題施逾。 我婆婆的眼比較尖敷矫,跟我說(shuō)例获,本字寫(xiě)得不對(duì)。嗯曹仗,仔細(xì)一看榨汤,是不太對(duì),撇起筆是有動(dòng)作的怎茫,不是露...
    水石軒主人閱讀 137評(píng)論 0 0