js的事件

javaScript HTML DOM

HTML DOM(文檔對象模型)

當(dāng)網(wǎng)頁被加載時(shí),瀏覽器會創(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元素上點(diǎn)擊時(shí),需要在用戶點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼

<h1 onclick="this.innerHTML="javaScript"">點(diǎn)擊問文本</h1>

HTML事件屬性

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

使用HTML DOM來分配事件

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

onload和onunload事件

onload和onunload事件會在用戶進(jìn)入或離開頁面時(shí)被觸發(fā)。

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

onload和onunload事件用于處理cookie

onchange事件

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

onmouseover和onmouseout事件

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

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

onmousedown、onmouseup事件

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

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

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

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