當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

html-----020----事件

發(fā)布時(shí)間：2024/8/24 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 html-----020----事件小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

html事件

<body> <a href="http://www.cctv.com" accesskey="k" target="_blank">按alt鍵加上k鍵可以實(shí)現(xiàn)跳轉(zhuǎn)</a> <br /> <a href="http://www/baidu.com" accesskey="l" target="_blank">按alt鍵和l鍵可以跳轉(zhuǎn)到百度</a>  </body> </html> accesskey 規(guī)定激活元素的快捷鍵。

<title>無(wú)標(biāo)題文檔</title> <style type="text/css"> h1.intro{color:red; text-align:center;} .imo{background-color:blue;} </style> </head><body>  <h1 class="intro">中華人民共和國(guó)</h1> <h1 class="imo intro">可以插入多個(gè)css樣式</h1> </body> </html> Class屬性

<body>  <p contenteditable="true">這是一個(gè)可編輯的段落</p> <p contenteditable="false">這是一個(gè)不可編輯的段落.默認(rèn)</p> <p dir="ltr" >笑傲江湖</p> <p dir="rtl" >笑傲江湖</p> <p draggable="auto">令狐沖</p> <p draggable="false">令狐沖</p> <p draggable="true">令狐沖</p> <p dropzone="copy">方正大師</p> <p dropzone="link">方正大師</p> <p dropzone="move">方正大師</p><p hidden="hidden">沖虛道長(zhǎng)</p> <p hidden="false">沖虛道長(zhǎng)</p> <p hidden="true">沖虛道長(zhǎng)</p></body> contenteditable/dir /-draggable/dropzone/hidden

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function change_header() {document.getElementById("suibian").innerHTML="Nice day!"; } </script> </head><body> <h1 id="suibian">你好啊</h1> <button onclick="change_header()">改變文章</button> </body> </html> onclick事件

<body>   <p lang="cs">這人</p> <p lang="af">這人</p> <p lang="ar">這人</p> <p lang="be">這人</p> <p lang="bg">這人</p> <p lang="ca">這人</p> <p lang="cs">這人</p> <p lang="da">這人</p> <p lang="de">這人</p> <p lang="el">這人</p>  </body> lang 屬性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無(wú)標(biāo)題文檔</title> <body> <p>data-* 用于存儲(chǔ)頁(yè)面或應(yīng)用程序的私有定制數(shù)據(jù)。</p> <p> data-* 屬性用于存儲(chǔ)頁(yè)面或應(yīng)用程序的私有自定義數(shù)據(jù)。</p> <p> data-* 屬性賦予我們?cè)谒?HTML 元素上嵌入自定義 data 屬性的能力。存儲(chǔ)的（自定義）數(shù)據(jù)能夠被頁(yè)面的 JavaScript 中利用，以創(chuàng)建更好的用戶體驗(yàn)（不進(jìn)行 Ajax 調(diào)用或服務(wù)器端數(shù)據(jù)庫(kù)查詢）。</p> <p> data-* 屬性包括兩部分： ?屬性名不應(yīng)該包含任何大寫(xiě)字母，并且在前綴 "data-" 之后必須有至少一個(gè)字符 ?屬性值可以是任意字符串</p> <p> 注釋：用戶代理會(huì)完全忽略前綴為 "data-" 的自定義屬性。 data-* 屬性是 HTML5 中的新屬性。</p> <p>下面是用法</p> <ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li><li data-animal-type="spider">Tarantula</li> </ul> </body> </html> data-*屬性僅在html5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無(wú)標(biāo)題文檔</title> <body> <p>contextmenu 規(guī)定元素的上下文菜單。上下文菜單在用戶點(diǎn)擊元素時(shí)顯示。</p> <div contextmenu="mymenu"> <menu type="context" id="mymenu"> <menuitem label="Refresh"></menuitem> <menuitem label="Twitter"></menuitem></menu> </div><p>contextmenu 屬性規(guī)定元素的上下文菜單。當(dāng)用戶右鍵點(diǎn)擊元素時(shí)，會(huì)出現(xiàn)上下文菜單。 contextmenu 屬性的值是要打開(kāi)的 menu 元素的 id。</p> </body> </html> contextmenu屬性html5中 <body>   <h1 style="color:blue; text-align:center">為了新中國(guó)的勝利前進(jìn)</h1> <p style="color:red;">岳林山的</p>  <button tabindex="1">第一個(gè)</button> <button tabindex="2">第二個(gè)</button> <button tabindex="3">第三個(gè)</button> <a href="http://www.cctv.com" title="這是令狐沖的">按鈕</a>  <abbr title="這也是令狐沖的">按鈕</abbr> <acronym title="這是岳靈珊的" >按鈕</acronym> </body> tabindex 屬性,style屬性，title，abbr縮寫(xiě)，acronym定義縮寫(xiě)

Window?事件屬性，最常用在body中

接下來(lái)的觸發(fā)事件都用到了body中

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function prin() { alert("此文檔正在打印");} </script> </head><body onafterprint="prin()"> <h1>請(qǐng)?jiān)囍蛴〈宋臋n。</h1> <p><b>提示：</b>鍵盤(pán)快捷鍵，比如 Ctrl+P 設(shè)置頁(yè)面打印。</p> <p><b>注釋：</b>Internet Explorer 和 Firefox 支持 onafterprint 屬性。</p> <p><b>注釋：</b>在 IE 中，onafterprint 屬性在打印對(duì)話框出現(xiàn)之前而不是之后發(fā)生。</p> </body> </html> onafterprint事件html5

<title>無(wú)標(biāo)題文檔</title> <script> function loaad() { alert("此文檔正在打印");} </script> </head><body onload="loaad()"> <h1>颯颯</h1> </body> </html> onload事件

<title>無(wú)標(biāo)題文檔</title> <script> function prin() { alert("您已經(jīng)改變窗口大小");} </script> </head><body onresize="prin()"> <p>請(qǐng)?jiān)囍{(diào)整瀏覽器窗口的大小。</p> </body> </html> onresize事件---見(jiàn)下面

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function prin() { alert("感謝您的訪問(wèn)");} </script> <script type="text/javascript"><body onunload="prin()">   <h1>歡迎訪問(wèn)我的首頁(yè)</h1> <p>請(qǐng)關(guān)閉窗口，或按 F5 刷新頁(yè)面。</p> </body> </html> onunload事件---見(jiàn)下面

?其他的window事件屬性

屬性	值	描述
onerror	script	在錯(cuò)誤發(fā)生時(shí)運(yùn)行的腳本。
onhaschange	script	當(dāng)文檔已改變時(shí)運(yùn)行的腳本。
onmessage	script	在消息被觸發(fā)時(shí)運(yùn)行的腳本。
onoffline	script	當(dāng)文檔離線時(shí)運(yùn)行的腳本。
ononline	script	當(dāng)文檔上線時(shí)運(yùn)行的腳本。
onpagehide	script	當(dāng)窗口隱藏時(shí)運(yùn)行的腳本。
onpageshow	script	當(dāng)窗口成為可見(jiàn)時(shí)運(yùn)行的腳本。
onpopstate	script	當(dāng)窗口歷史記錄改變時(shí)運(yùn)行的腳本。
onredo	script	當(dāng)文檔執(zhí)行撤銷(xiāo)（redo）時(shí)運(yùn)行的腳本。
onstorage	script	在?Web?Storage?區(qū)域更新后運(yùn)行的腳本。
onundo	script	在文檔執(zhí)行?undo?時(shí)運(yùn)行的腳本。

Form?事件

由?HTML?表單內(nèi)的動(dòng)作觸發(fā)的事件（應(yīng)用到幾乎所有?HTML?元素，但最常用在?form?元素中）：

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function upperCase() { var x=document.getElementById("fname").value document.getElementById("fname").value=x.toUpperCase() } </script><body>  <p>請(qǐng)輸入您的姓名，然后把焦點(diǎn)移動(dòng)到字段外：</p> 請(qǐng)輸入您的姓名（英文字符）： <input type="text" name="fname" id="fname" onblur="upperCase()"></body> </html> onblur屬性

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function checkField(val) { alert("輸入值已更改。新值是：" + val); } </script><body>  <p>請(qǐng)修改輸入字段中的文本，然后在字段外點(diǎn)擊以觸發(fā) onchange。</p> <p>原來(lái)的值是hello</p> 請(qǐng)輸入文本： <input type="text" name="txt" value="Hello" onchange="checkField(this.value)"> </body> </html> onchange事件

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function setStyle(x) { document.getElementById(x).style.background="yellow"; } </script><body>  <p>當(dāng)輸入字段獲得焦點(diǎn)時(shí)觸發(fā)函數(shù)。此函數(shù)改變輸入字段的背景色。</p>First name: <input type="text" id="fname" onfocus="setStyle(this.id)"><br> Last  name:<input type="text" id="lname" onfocus="setStyle(this.id)"> </body> onfocus事件

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function showMsg() { alert("您選中了一些文本！"); } </script><body>  一些文本：<input type="text" value="請(qǐng)選中我！" onselect="showMsg()"><p>函數(shù) showMsg() 在輸入字段中的文本被選中時(shí)觸發(fā)。此函數(shù)顯示一段消息。</p> </body> </html> onselect事件

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function checkForm() { alert("表單已提交！"); } </script><body>  <form action="qwd-1.html" onsubmit="checkForm()"> 姓：<input type="text" name="lname"><br> 名：<input type="text" name="fname"><br> <input type="submit" value="提交"> </form><p>函數(shù) checkForm() 在提交按鈕被點(diǎn)擊時(shí)觸發(fā)。此函數(shù)向用戶顯示一段消息。</p> </body> </html> onsubmit 屬性

屬性	值	描述
oncontextmenu	script	當(dāng)上下文菜單被觸發(fā)時(shí)運(yùn)行的腳本。
onformchange	script	在表單改變時(shí)運(yùn)行的腳本。
onforminput	script	當(dāng)表單獲得用戶輸入時(shí)運(yùn)行的腳本。
oninput	script	當(dāng)元素獲得用戶輸入時(shí)運(yùn)行的腳本。
oninvalid	script	當(dāng)元素?zé)o效時(shí)運(yùn)行的腳本。
onreset	script	當(dāng)表單中的重置按鈕被點(diǎn)擊時(shí)觸發(fā)。HTML5?中不支持。

Keyboard?事件

屬性	值	描述
onkeydown	script	在用戶按下按鍵時(shí)觸發(fā)。
onkeypress	script	在用戶敲擊按鈕時(shí)觸發(fā)。
onkeyup	script	當(dāng)用戶釋放按鍵時(shí)觸發(fā)。

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function displayResult() { var x; if(window.event) // IE8 以及更早版本 {x=event.keyCode;} else if(event.which) // IE9/Firefox/Chrome/Opera/Safari {x=event.which;} var keychar=String.fromCharCode(x); alert("按鍵 " + keychar + " 被按下"); } </script><body> <p> onkeydown 屬性在用戶（在鍵盤(pán)上）按鍵時(shí)觸發(fā)。<p> <h3> 提示：相對(duì)于 onkeydown 事件的事件次序： onkeydown onkeypress onkeyup</h3>  <p>當(dāng)用戶在輸入字段中按下按鍵時(shí)觸發(fā)函數(shù)。此函數(shù)提示用戶已按按鍵。</p><input type="text" onkeydown="displayResult()"> </body> </html> onkeydown事件

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function displayResult() { var x; if(window.event) // IE8 以及更早版本 {x=event.keyCode;} else if(event.which) // IE9/Firefox/Chrome/Opera/Safari {x=event.which;} keychar=String.fromCharCode(x); alert("按鍵 " + keychar + " 被按下"); } </script><body> <p> onkeydown 屬性在用戶（在鍵盤(pán)上）按鍵時(shí)觸發(fā)。<p> <h3> 提示：相對(duì)于 onkeydown 事件的事件次序： onkeydown onkeypress onkeyup</h3>  <p>當(dāng)用戶在輸入字段中按下按鍵時(shí)觸發(fā)函數(shù)。此函數(shù)提示用戶已按按鍵。</p><input type="text" onkeypress="displayResult()"> </body> </html> onkeypress事件

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function displayResult() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script><body> <p> onkeyup 屬性在用戶（在鍵盤(pán)上）釋放按鍵時(shí)觸發(fā)。<p> <p>當(dāng)用戶在輸入字段中按下按鍵時(shí)觸發(fā)函數(shù)。此函數(shù)把字符轉(zhuǎn)換為大寫(xiě)。</p>請(qǐng)輸入您的姓名（英文字符）： <input type="text" id="fname" onkeyup="displayResult()"> </body> </html> onkeyup 事件屬性

Mouse?事件

由鼠標(biāo)或類似用戶動(dòng)作觸發(fā)的事件：

1：onclick 元素上發(fā)生鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)。

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function copyText() { document.getElementById("field2").value=document.getElementById("field1").value; } </script><body> <p> Field1: <input type="text" id="field1" value="Hello World!"><br> Field2: <input type="text" id="field2"><br><br><button onclick="copyText()">復(fù)制文本</button><p>當(dāng)按鈕被單擊時(shí)觸發(fā)函數(shù)。此函數(shù)把文本從 Field1 復(fù)制到 Field2 中。</p> </body> </html> onclick

2:ondblclick ?元素上發(fā)生鼠標(biāo)雙擊時(shí)觸發(fā)。

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function copyText() { document.getElementById("field2").value=document.getElementById("field1").value; } </script> </script><body>  Field1: <input type="text" id="field1" value="Hello World!"><br> Field2: <input type="text" id="field2"><br><br><button ondblclick="copyText()">復(fù)制文本</button><p>當(dāng)按鈕被雙擊時(shí)觸發(fā)函數(shù)。此函數(shù)把文本從 Field1 復(fù)制到 Field2 中。</p></body> </html> ondblclick 元素上發(fā)生鼠標(biāo)雙擊時(shí)觸發(fā)。

3:onmousedown 當(dāng)元素上按下鼠標(biāo)按鈕時(shí)觸發(fā)。

? ?onmouseup 當(dāng)在元素上釋放鼠標(biāo)按鈕時(shí)觸發(fā)。

<title>無(wú)標(biāo)題文檔</title> <script type="text/javascript"> function mouseDown() { document.getElementById("p1").style.color="red"; }function mouseUp() { document.getElementById("p1").style.color="green"; } </script><body> <p>onmousedown 屬性在鼠標(biāo)按鈕在元素上按下時(shí)觸發(fā)。</p> <p> 提示：相對(duì)于 onmousedown 事件,onmouseup 事件的事件次序（限于鼠標(biāo)左/中鍵）： onmousedown onmouseup onclick</p> <p> 相對(duì)于 onmousedown 事件,onmouseup 事件的事件次序（限于鼠標(biāo)右鍵）： onmousedown onmouseup oncontextmenu</p>  <p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()"> 請(qǐng)點(diǎn)擊文本！mouseDown() 函數(shù)當(dāng)鼠標(biāo)按鈕在段落上被按下時(shí)觸發(fā)。此函數(shù)把文本顏色設(shè)置為紅色。mouseUp() 函數(shù)在鼠標(biāo)按鈕被釋放時(shí)觸發(fā)。mouseUp() 函數(shù)把文本的顏色設(shè)置為綠色。 </p></body> </html> onmousedown/onmouseup

4:?onmousemove 當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)。

? ? ?onmouseout 當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)。

<title>無(wú)標(biāo)題文檔</title><script type="text/javascript"> function bigImg(x) { x.style.height="180px"; x.style.width="180px"; }function normalImg(x) { x.style.height="128px"; x.style.width="128px"; } </script> <body> <h2>onmousemove 屬性在鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)。</h2>  <img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="../Pictures/1.JPG" width="128" height="128" alt="Smiley" ><p>函數(shù) bigImg() 在鼠標(biāo)指針移動(dòng)到圖像上時(shí)觸發(fā)。此函數(shù)放大圖像。</p> <p>函數(shù) normalImg() 在鼠標(biāo)指針移出圖像時(shí)觸發(fā)。此函數(shù)把圖像的高度和寬度重置為正常尺寸。</p> </body> </html> onmouseout/onmousemove

5:onmousemove ?當(dāng)鼠標(biāo)指針在元素上移動(dòng)時(shí)觸發(fā)。

ondrag	script	元素被拖動(dòng)時(shí)運(yùn)行的腳本。
ondragend	script	在拖動(dòng)操作末端運(yùn)行的腳本。
ondragenter	script	當(dāng)元素元素已被拖動(dòng)到有效拖放區(qū)域時(shí)運(yùn)行的腳本。
ondragleave	script	當(dāng)元素離開(kāi)有效拖放目標(biāo)時(shí)運(yùn)行的腳本。
ondragover	script	當(dāng)元素在有效拖放目標(biāo)上正在被拖動(dòng)時(shí)運(yùn)行的腳本。
ondragstart	script	在拖動(dòng)操作開(kāi)端運(yùn)行的腳本。
ondrop	script	當(dāng)被拖元素正在被拖放時(shí)運(yùn)行的腳本。
onmousewheel	script	當(dāng)鼠標(biāo)滾輪正在被滾動(dòng)時(shí)運(yùn)行的腳本。
onscroll	script	當(dāng)元素滾動(dòng)條被滾動(dòng)時(shí)運(yùn)行的腳本。

Media?事件

由媒介（比如視頻、圖像和音頻）觸發(fā)的事件（適用于所有?HTML?元素，但常見(jiàn)于媒介元素中，比如?<audio>、<embed>、<img>、<object>?以及?<video>）:

屬性	值	描述
onabort	script	在退出時(shí)運(yùn)行的腳本。
oncanplay	script	當(dāng)文件就緒可以開(kāi)始播放時(shí)運(yùn)行的腳本（緩沖已足夠開(kāi)始時(shí)）。
oncanplaythrough	script	當(dāng)媒介能夠無(wú)需因緩沖而停止即可播放至結(jié)尾時(shí)運(yùn)行的腳本。
ondurationchange	script	當(dāng)媒介長(zhǎng)度改變時(shí)運(yùn)行的腳本。
onemptied	script	當(dāng)發(fā)生故障并且文件突然不可用時(shí)運(yùn)行的腳本（比如連接意外斷開(kāi)時(shí)）。
onended	script	當(dāng)媒介已到達(dá)結(jié)尾時(shí)運(yùn)行的腳本（可發(fā)送類似“感謝觀看”之類的消息）。
onerror	script	當(dāng)在文件加載期間發(fā)生錯(cuò)誤時(shí)運(yùn)行的腳本。
onloadeddata	script	當(dāng)媒介數(shù)據(jù)已加載時(shí)運(yùn)行的腳本。
onloadedmetadata	script	當(dāng)元數(shù)據(jù)（比如分辨率和時(shí)長(zhǎng)）被加載時(shí)運(yùn)行的腳本。
onloadstart	script	在文件開(kāi)始加載且未實(shí)際加載任何數(shù)據(jù)前運(yùn)行的腳本。
onpause	script	當(dāng)媒介被用戶或程序暫停時(shí)運(yùn)行的腳本。
onplay	script	當(dāng)媒介已就緒可以開(kāi)始播放時(shí)運(yùn)行的腳本。
onplaying	script	當(dāng)媒介已開(kāi)始播放時(shí)運(yùn)行的腳本。
onprogress	script	當(dāng)瀏覽器正在獲取媒介數(shù)據(jù)時(shí)運(yùn)行的腳本。
onratechange	script	每當(dāng)回放速率改變時(shí)運(yùn)行的腳本（比如當(dāng)用戶切換到慢動(dòng)作或快進(jìn)模式）。
onreadystatechange	script	每當(dāng)就緒狀態(tài)改變時(shí)運(yùn)行的腳本（就緒狀態(tài)監(jiān)測(cè)媒介數(shù)據(jù)的狀態(tài)）。
onseeked	script	當(dāng)?seeking?屬性設(shè)置為?false（指示定位已結(jié)束）時(shí)運(yùn)行的腳本。
onseeking	script	當(dāng)?seeking?屬性設(shè)置為?true（指示定位是活動(dòng)的）時(shí)運(yùn)行的腳本。
onstalled	script	在瀏覽器不論何種原因未能取回媒介數(shù)據(jù)時(shí)運(yùn)行的腳本。
onsuspend	script	在媒介數(shù)據(jù)完全加載之前不論何種原因終止取回媒介數(shù)據(jù)時(shí)運(yùn)行的腳本。
ontimeupdate	script	當(dāng)播放位置改變時(shí)（比如當(dāng)用戶快進(jìn)到媒介中一個(gè)不同的位置時(shí)）運(yùn)行的腳本。
onvolumechange	script	每當(dāng)音量改變時(shí)（包括將音量設(shè)置為靜音）時(shí)運(yùn)行的腳本。
onwaiting	script	當(dāng)媒介已停止播放但打算繼續(xù)播放時(shí)（比如當(dāng)媒介暫停已緩沖更多數(shù)據(jù)）運(yùn)行腳本

轉(zhuǎn)載于:https://www.cnblogs.com/9999w/p/4393622.html

總結(jié)

以上是生活随笔為你收集整理的html-----020----事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

事件
html

上一篇： SOAP简单示例
下一篇： WebView三个方法区别（解决乱码问题