JavaScript 事件

事件對象

在觸發(fā)DOM上的某個事件時未舟,會產(chǎn)生一個事件對象 event螺垢,這個對象中包含著所有與事件有關(guān)的信息:導致事件的元素扔役、事件的類型以及其他與 ** * 特定事件* **相關(guān)的信息如鼠標操作導致的對象中包含鼠標位置信息笋颤,鍵盤操作導致的事件對象中包含與按下的鍵有關(guān)的信息筑煮。
今天記錄 event.type 和event.currentTarget
1.event.type
返回的是事件類型

var btn = document.getElementById("myBtn");
btn.onClick = function(event) {
     alert(event.type);       //"click"
};

2.event.currentTarget 和event.target
currentTarget相當于事件注冊于哪個元素上绿满,而target元素則是實際上被點擊或其他操作的元素(需參考事件DOM事件流)
便于理解參考書上代碼:

document.body.onclick = function(event) {
        alert(event.currentTarget === document.body);      //true
        alert(evetn.target === document.getElementById("myBtn");   //true
}

個人的理解是該function是顯式地綁定在body上的臂外,所以currentTarget與body相等,而實際上我們也點擊了頁面上的myBtn按鈕喇颁,所以event.target實際上是與我們實際點擊的元素就是myBtn相等的漏健。

event的使用

當我們需要通過一個函數(shù)處理多個事件時,可以使用event.type這個屬性

var btn = document.getElementById("myBtn");
var handler = function(event) {
    switch(event.type) {
        case "click":
            //TODO LIST
            break;
        case "mouseover":
            //TODO LIST
            break;
            case "click":
            //TODO LIST
            break;
        case "mouseout":
            //TODO LIST
            break;
    }
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

結(jié)尾

今天記錄較少因為接下來的內(nèi)容涉及到了 事件類型 這一塊橘霎,太過復雜蔫浆,會在清明節(jié)三天陸陸續(xù)續(xù)看完后總結(jié)在下一篇日記中。
ps:這兩天看了許多前端的面試題發(fā)現(xiàn)完全不會啊哈哈哈哈哈哈哈哈哈姐叁。好好學習天天向上瓦盛。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末洗显,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子原环,更是在濱河造成了極大的恐慌墙懂,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,640評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件扮念,死亡現(xiàn)場離奇詭異损搬,居然都是意外死亡,警方通過查閱死者的電腦和手機柜与,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評論 3 395
  • 文/潘曉璐 我一進店門巧勤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人弄匕,你說我怎么就攤上這事颅悉。” “怎么了迁匠?”我有些...
    開封第一講書人閱讀 165,011評論 0 355
  • 文/不壞的土叔 我叫張陵剩瓶,是天一觀的道長。 經(jīng)常有香客問我城丧,道長延曙,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,755評論 1 294
  • 正文 為了忘掉前任亡哄,我火速辦了婚禮枝缔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蚊惯。我一直安慰自己愿卸,他們只是感情好,可當我...
    茶點故事閱讀 67,774評論 6 392
  • 文/花漫 我一把揭開白布截型。 她就那樣靜靜地躺著趴荸,像睡著了一般。 火紅的嫁衣襯著肌膚如雪宦焦。 梳的紋絲不亂的頭發(fā)上发钝,一...
    開封第一講書人閱讀 51,610評論 1 305
  • 那天,我揣著相機與錄音赶诊,去河邊找鬼笼平。 笑死园骆,一個胖子當著我的面吹牛舔痪,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锌唾,決...
    沈念sama閱讀 40,352評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼锄码,長吁一口氣:“原來是場噩夢啊……” “哼夺英!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起滋捶,我...
    開封第一講書人閱讀 39,257評論 0 276
  • 序言:老撾萬榮一對情侶失蹤痛悯,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后重窟,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體载萌,經(jīng)...
    沈念sama閱讀 45,717評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,894評論 3 336
  • 正文 我和宋清朗相戀三年巡扇,在試婚紗的時候發(fā)現(xiàn)自己被綠了扭仁。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,021評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡厅翔,死狀恐怖乖坠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情刀闷,我是刑警寧澤熊泵,帶...
    沈念sama閱讀 35,735評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站甸昏,受9級特大地震影響顽分,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜施蜜,卻給世界環(huán)境...
    茶點故事閱讀 41,354評論 3 330
  • 文/蒙蒙 一怯邪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧花墩,春花似錦悬秉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至祠肥,卻和暖如春武氓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背仇箱。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評論 1 270
  • 我被黑心中介騙來泰國打工县恕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人剂桥。 一個月前我還...
    沈念sama閱讀 48,224評論 3 371
  • 正文 我出身青樓忠烛,卻偏偏與公主長得像,于是被迫代替她去往敵國和親权逗。 傳聞我的和親對象是個殘疾皇子美尸,可洞房花燭夜當晚...
    茶點故事閱讀 44,974評論 2 355

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

  • 事件處理程序在應用中是必不可少的,雖然現(xiàn)在很多框架都有自己實現(xiàn)事件處理方法,但是熟知原生才能讓我們應對各種各樣的需...
    俗三瘋閱讀 288評論 0 1
  • 事件流 事件流描述的是從頁面中接受事件的順序冤议。但是IE和Netscape開發(fā)團隊提出了差不多相反的事件流的概念。I...
    losspm閱讀 265評論 0 0
  • 在觸發(fā) DOM 上的某個事件時师坎,會產(chǎn)生一個事件對象 event恕酸,這個對象中包含著所有與事件有關(guān)的信息。包括導致事件...
    zouyang0921閱讀 775評論 0 0
  • 事件對象 在觸發(fā)DOM上的某個事件時胯陋,會產(chǎn)生一個事件對象event蕊温,這個對象中包含著所有與事件有關(guān)的信息。 包括導...
    shanruopeng閱讀 216評論 0 0
  • 1.通過NSThread的performSelectorInBackground遏乔;2.通過定時器寿弱,屬于比較簡單的寫...
    somepark閱讀 260評論 0 0