js的事件

javaScript HTML DOM

HTML DOM(文檔對象模型)

當(dāng)網(wǎng)頁被加載時,瀏覽器會創(chuàng)建頁面的文檔對象模型

查找HTML元素

通過id找到HTML元素:例如:

document.getElementById("intro");

通過標(biāo)簽名找到HTML元素:例如:

document.getElementsByTagName("p");

通過類名找到HTML元素:例如:

document.getElementsByClassName("intro");

改變HTML輸出流

document.write() 

改變HTML內(nèi)容

document.getElementById("p").innerHTML="新的code";

改變HTML屬性

document.getElementById("p").attribute=新屬性值

例如:修改image中src屬性

document.getElementById("image").src="lan.jpg";

改變HTML樣式

document.getElementById("p").style.property=新樣式联四;

例如:修改p2中的顏色

document.getElementById("P2").style.color="blue";

使用事件

<button type="button" onclick="document.getElementById("id1").style.color='red'">

對事件做出反應(yīng)

例如:當(dāng)用戶在HTML元素上點擊時,需要在用戶點擊某個元素時執(zhí)行代碼

<h1 onclick="this.innerHTML="javaScript"">點擊問文本</h1>

HTML事件屬性

<button onclick="displayDate()">點這里</button>

使用HTML DOM來分配事件

document.getElementById("myBtn").onclick=function(){
    dispalyDate();
};

onload和onunload事件

onload和onunload事件會在用戶進入或離開頁面時被觸發(fā)哨鸭。

onload事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本昧狮,并基于這些信息來加載網(wǎng)頁的正確版本。

onload和onunload事件用于處理cookie

onchange事件

<input type="text" id="fname" onchange="upcase()"/>

onmouseover和onmouseout事件

onmouseover和onmouseout事件可用于在用戶的鼠標(biāo)移至HTML元素上方或移出元素時觸發(fā)的函數(shù)

<button type="button" onclick="document.getElementById('aa').style.color='red'">button</button>

onmousedown、onmouseup事件

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末酥馍,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子阅酪,更是在濱河造成了極大的恐慌旨袒,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件术辐,死亡現(xiàn)場離奇詭異砚尽,居然都是意外死亡,警方通過查閱死者的電腦和手機辉词,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門必孤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瑞躺,你說我怎么就攤上這事敷搪。” “怎么了隘蝎?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵购啄,是天一觀的道長。 經(jīng)常有香客問我嘱么,道長狮含,這世上最難降的妖魔是什么顽悼? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮几迄,結(jié)果婚禮上蔚龙,老公的妹妹穿的比我還像新娘。我一直安慰自己映胁,他們只是感情好木羹,可當(dāng)我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著解孙,像睡著了一般坑填。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上弛姜,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天脐瑰,我揣著相機與錄音,去河邊找鬼廷臼。 笑死苍在,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的荠商。 我是一名探鬼主播寂恬,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼莱没!你這毒婦竟也來了初肉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤郊愧,失蹤者是張志新(化名)和其女友劉穎朴译,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體属铁,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡眠寿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了焦蘑。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片盯拱。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖例嘱,靈堂內(nèi)的尸體忽然破棺而出狡逢,到底是詐尸還是另有隱情,我是刑警寧澤拼卵,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布奢浑,位于F島的核電站,受9級特大地震影響腋腮,放射性物質(zhì)發(fā)生泄漏雀彼。R本人自食惡果不足惜壤蚜,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望徊哑。 院中可真熱鬧袜刷,春花似錦、人聲如沸莺丑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梢莽。三九已至萧豆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間昏名,已是汗流浹背炕横。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留葡粒,地道東北人。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓膜钓,卻偏偏與公主長得像嗽交,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子颂斜,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,925評論 2 344

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

  • JS事件 努力不一定成功,不努力肯定不能成功 ---forever onClick 單擊事件 onMouseOve...
    SpringAnimation閱讀 359評論 0 1
  • 事件就是用戶或瀏覽器自身執(zhí)行的某種動作夫壁。比如說 click,mouseover沃疮,都是事件的名字盒让。而相應(yīng)某個事件的函...
    落花的季節(jié)閱讀 248評論 1 1
  • 前言 還記得那些年面試官問你的定時器的原理嗎?還有呢司蔬?Promise的原理呢邑茄?原理、原理俊啼、原理肺缕,問的我們懷疑人生。...
    Layzimo閱讀 554評論 1 3
  • Node核心思想:1.異步非阻塞授帕;2.單線程同木;3.事件驅(qū)動; 在目前的web應(yīng)用中跛十,客戶端和服務(wù)器端之間有些交互可...
    七寸知架構(gòu)閱讀 1,149評論 0 52
  • 一彤路、JS前言 (1)認(rèn)識JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示)芥映,會使用HT...
    凜0_0閱讀 2,752評論 0 8