html-----020----事件
生活随笔
收集整理的這篇文章主要介紹了
html-----020----事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html事件
?
<body> <a href="http://www.cctv.com" accesskey="k" target="_blank">按alt鍵加上k鍵可以實現跳轉</a> <br /> <a href="http://www/baidu.com" accesskey="l" target="_blank">按alt鍵和l鍵可以跳轉到百度</a> <!--注釋：以下元素支持 accesskey 屬性： <a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>--> </body> </html> accesskey 規定激活元素的快捷鍵。?
?
<title>無標題文檔</title> <style type="text/css"> h1.intro{color:red; text-align:center;} .imo{background-color:blue;} </style> </head><body> <!--注釋：class 屬性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。--> <h1 class="intro">中華人民共和國</h1> <h1 class="imo intro">可以插入多個css樣式</h1> </body> </html> Class屬性<!--class 規定元素的一個或多個類名（引用樣式表中的類）-->
?
?
<body> <!--contenteditable 屬性規定元素內容是否可編輯。--> <p contenteditable="true">這是一個可編輯的段落</p> <p contenteditable="false">這是一個不可編輯的段落.默認</p><!--dir 屬性在以下標簽中無效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>。--> <p dir="ltr" >笑傲江湖</p><!--默認：從左到右--> <p dir="rtl" >笑傲江湖</p><!--從右到左--><!--draggable 規定元素是否可拖動。--> <p draggable="auto">令狐沖</p><!--使用瀏覽器的默認行為。--> <p draggable="false">令狐沖</p><!--規定元素不可拖動--> <p draggable="true">令狐沖</p><!--規定元素可以拖動--><!--目前所有主流瀏覽器都不支持 contenteditable 屬性。--> <p dropzone="copy">方正大師</p><!--拖動數據會產生被拖動數據的副本。--> <p dropzone="link">方正大師</p><!--拖動數據會產生指向原始數據的鏈接。--> <p dropzone="move">方正大師</p><!--拖動數據會導致被拖動數據被移動到新位置。--><p hidden="hidden">沖虛道長</p> <p hidden="false">沖虛道長</p> <p hidden="true">沖虛道長</p></body> contenteditable/dir /-draggable/dropzone/hidden?
?
<title>無標題文檔</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> <!--注釋：lang 屬性在以下標簽中無效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>--> <!--規定元素內容的語言。--> <p lang="cs">這人</p><!--所有瀏覽器均支持 lang 屬性。--> <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> <!--spellcheck=true/false：對不對元素進行拼寫和語法檢查---> </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>無標題文檔</title> <body> <p>data-* 用于存儲頁面或應用程序的私有定制數據。</p> <p> data-* 屬性用于存儲頁面或應用程序的私有自定義數據。</p> <p> data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。 存儲的（自定義）數據能夠被頁面的 JavaScript 中利用，以創建更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。</p> <p> data-* 屬性包括兩部分： ?屬性名不應該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符 ?屬性值可以是任意字符串</p> <p> 注釋：用戶代理會完全忽略前綴為 "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>無標題文檔</title> <body> <p>contextmenu 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。</p> <div contextmenu="mymenu"> <menu type="context" id="mymenu"> <menuitem label="Refresh"></menuitem> <menuitem label="Twitter"></menuitem></menu> </div><p>contextmenu 屬性規定元素的上下文菜單。當用戶右鍵點擊元素時，會出現上下文菜單。 contextmenu 屬性的值是要打開的 menu 元素的 id。</p> </body> </html> contextmenu屬性html5中 <body> <!--style屬性樣式--> <!--一個或多個由分號分隔的 CSS 屬性和值。--> <h1 style="color:blue; text-align:center">為了新中國的勝利前進</h1> <p style="color:red;">岳林山的</p><!--tabindex 屬性,是tab鍵的順序--> <!--以下元素支持 tabindex 屬性：<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。--> <button tabindex="1">第一個</button> <button tabindex="2">第二個</button> <button tabindex="3">第三個</button><!--title是額外顯示--> <a href="http://www.cctv.com" title="這是令狐沖的">按鈕</a> <!--title是abbr和acronym的必須元素--> <abbr title="這也是令狐沖的">按鈕</abbr> <acronym title="這是岳靈珊的" >按鈕</acronym> <!--translate 屬性:translate="yes|no"是否翻譯元素的內容--></body> tabindex 屬性,style屬性，title，abbr縮寫，acronym定義縮寫Window?事件屬性，最常用在body中
接下來的觸發事件都用到了body中
?
<title>無標題文檔</title> <script type="text/javascript"> function prin() { alert("感謝您的訪問");} </script> <script type="text/javascript"><body onunload="prin()"> <!--onunload一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）--> <!--在用戶從頁面導航離開時發生（通過點擊鏈接、提交表單或者關閉瀏覽器窗口等等--> <h1>歡迎訪問我的首頁</h1> <p>請關閉窗口，或按 F5 刷新頁面。</p> </body> </html> onunload事件---見下面?
?其他的window事件屬性
| 屬性 | 值 | 描述 |
| onerror | script | 在錯誤發生時運行的腳本。 |
| onhaschange | script | 當文檔已改變時運行的腳本。 |
| onmessage | script | 在消息被觸發時運行的腳本。 |
| onoffline | script | 當文檔離線時運行的腳本。 |
| ononline | script | 當文檔上線時運行的腳本。 |
| onpagehide | script | 當窗口隱藏時運行的腳本。 |
| onpageshow | script | 當窗口成為可見時運行的腳本。 |
| onpopstate | script | 當窗口歷史記錄改變時運行的腳本。 |
| onredo | script | 當文檔執行撤銷（redo）時運行的腳本。 |
| onstorage | script | 在?Web?Storage?區域更新后運行的腳本。 |
| onundo | script | 在文檔執行?undo?時運行的腳本。 |
?
?
?
?
Form?事件
?
由?HTML?表單內的動作觸發的事件（應用到幾乎所有?HTML?元素，但最常用在?form?元素中）：
?
<title>無標題文檔</title> <script type="text/javascript"> function upperCase() { var x=document.getElementById("fname").value document.getElementById("fname").value=x.toUpperCase() } </script><body> <!--onblur script 元素失去焦點時運行的腳本。--> <p>請輸入您的姓名，然后把焦點移動到字段外：</p> 請輸入您的姓名（英文字符）： <input type="text" name="fname" id="fname" onblur="upperCase()"></body> </html> onblur屬性?
?
<title>無標題文檔</title> <script type="text/javascript"> function checkField(val) { alert("輸入值已更改。新值是：" + val); } </script><body> <!--onchange 在元素值改變時觸發。 onchange 屬性適用于：<input>、<textarea> 以及 <select> 元素。--> <p>請修改輸入字段中的文本，然后在字段外點擊以觸發 onchange。</p> <p>原來的值是hello</p> 請輸入文本： <input type="text" name="txt" value="Hello" onchange="checkField(this.value)"> </body> </html> onchange事件?
?
<title>無標題文檔</title> <script type="text/javascript"> function setStyle(x) { document.getElementById(x).style.background="yellow"; } </script><body> <!--onfocus 屬性在元素獲得焦點時觸發。 onfocus 常用于 <input>、<select> 以及 <a>. 提示：onfocus 屬性與 onblur 屬性相反。 注釋：onfocus 屬性不適用于以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。--> <p>當輸入字段獲得焦點時觸發函數。此函數改變輸入字段的背景色。</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>無標題文檔</title> <script type="text/javascript"> function showMsg() { alert("您選中了一些文本！"); } </script><body> <!--onselect 屬性在元素中的文本被選中時觸發。 onselect 屬性可用于以下元素內：<input type="file">、<input type="password">、<input type="text">、<keygen> 以及 <textarea>--> 一些文本：<input type="text" value="請選中我！" onselect="showMsg()"><p>函數 showMsg() 在輸入字段中的文本被選中時觸發。此函數顯示一段消息。</p> </body> </html> onselect事件 <title>無標題文檔</title> <script type="text/javascript"> function checkForm() { alert("表單已提交！"); } </script><body> <!--onsubmit 屬性在提交表單時觸發。 onsubmit 屬性只在 <form> 中使用。--> <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>函數 checkForm() 在提交按鈕被點擊時觸發。此函數向用戶顯示一段消息。</p> </body> </html> onsubmit 屬性| 屬性 | 值 | 描述 |
| oncontextmenu | script | 當上下文菜單被觸發時運行的腳本。 |
| onformchange | script | 在表單改變時運行的腳本。 |
| onforminput | script | 當表單獲得用戶輸入時運行的腳本。 |
| oninput | script | 當元素獲得用戶輸入時運行的腳本。 |
| oninvalid | script | 當元素無效時運行的腳本。 |
| onreset | script | 當表單中的重置按鈕被點擊時觸發。HTML5?中不支持。 |
?
Keyboard?事件
?
| 屬性 | 值 | 描述 |
| onkeydown | script | 在用戶按下按鍵時觸發。 |
| onkeypress | script | 在用戶敲擊按鈕時觸發。 |
| onkeyup | script | 當用戶釋放按鍵時觸發。 |
?
?
<title>無標題文檔</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> <h3> 提示：相對于 onkeydown 事件的事件次序： onkeydown onkeypress onkeyup</h3> <!--注釋：onkeydown 屬性不適用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。--> <p>當用戶在輸入字段中按下按鍵時觸發函數。此函數提示用戶已按按鍵。</p><input type="text" onkeydown="displayResult()"> </body> </html> onkeydown事件?
?
?
<title>無標題文檔</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> <h3> 提示：相對于 onkeydown 事件的事件次序： onkeydown onkeypress onkeyup</h3> <!--注釋：在任何瀏覽器中，onkeypress 事件不會被所有按鍵觸發（例如 ALT、CTRL、SHIFT、ESC）。 注釋：onkeypress 屬性不適用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。--> <p>當用戶在輸入字段中按下按鍵時觸發函數。此函數提示用戶已按按鍵。</p><input type="text" onkeypress="displayResult()"> </body> </html> onkeypress事件 <title>無標題文檔</title> <script type="text/javascript"> function displayResult() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script><body> <p> onkeyup 屬性在用戶（在鍵盤上）釋放按鍵時觸發。<p><!--注釋：onkeyup 屬性不適用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>--> <p>當用戶在輸入字段中按下按鍵時觸發函數。此函數把字符轉換為大寫。</p>請輸入您的姓名（英文字符）： <input type="text" id="fname" onkeyup="displayResult()"> </body> </html> onkeyup 事件屬性?
Mouse?事件
由鼠標或類似用戶動作觸發的事件：
1：onclick 元素上發生鼠標點擊時觸發。
<title>無標題文檔</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()">復制文本</button><p>當按鈕被單擊時觸發函數。此函數把文本從 Field1 復制到 Field2 中。</p> </body> </html> onclick2:ondblclick ?元素上發生鼠標雙擊時觸發。
<title>無標題文檔</title> <script type="text/javascript"> function copyText() { document.getElementById("field2").value=document.getElementById("field1").value; } </script> </script><body> <!--ondblclick 屬性在鼠標雙擊元素時觸發。 注釋：ondblclick 屬性不適用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。 --> Field1: <input type="text" id="field1" value="Hello World!"><br> Field2: <input type="text" id="field2"><br><br><button ondblclick="copyText()">復制文本</button><p>當按鈕被雙擊時觸發函數。此函數把文本從 Field1 復制到 Field2 中。</p></body> </html> ondblclick 元素上發生鼠標雙擊時觸發。3:onmousedown 當元素上按下鼠標按鈕時觸發。
? ?onmouseup 當在元素上釋放鼠標按鈕時觸發。
<title>無標題文檔</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 屬性在鼠標按鈕在元素上按下時觸發。</p> <p> 提示：相對于 onmousedown 事件,onmouseup 事件的事件次序（限于鼠標左/中鍵）： onmousedown onmouseup onclick</p> <p> 相對于 onmousedown 事件,onmouseup 事件的事件次序（限于鼠標右鍵）： onmousedown onmouseup oncontextmenu</p> <!-- 注釋：onmousedown 屬性,onmouseup 屬性不適用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。--> <p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()"> 請點擊文本！mouseDown() 函數當鼠標按鈕在段落上被按下時觸發。此函數把文本顏色設置為紅色。mouseUp() 函數在鼠標按鈕被釋放時觸發。mouseUp() 函數把文本的顏色設置為綠色。 </p></body> </html> onmousedown/onmouseup4:?onmousemove 當鼠標指針移動到元素上時觸發。
? ? ?onmouseout 當鼠標指針移出元素時觸發。
<title>無標題文檔</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 屬性在鼠標指針移動到元素上時觸發。</h2> <!-- 注釋：onmousemove 屬性不適用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。--> <img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="../Pictures/1.JPG" width="128" height="128" alt="Smiley" ><p>函數 bigImg() 在鼠標指針移動到圖像上時觸發。此函數放大圖像。</p> <p>函數 normalImg() 在鼠標指針移出圖像時觸發。此函數把圖像的高度和寬度重置為正常尺寸。</p> </body> </html> onmouseout/onmousemove?
5:onmousemove ?當鼠標指針在元素上移動時觸發。
<!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>無標題文檔</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><!--注釋：onmouse,ove/onmouseout 屬性不適用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title> --> <img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="../Pictures/1.JPG" width="100" height="100" alt="Smiley" ><p>函數 bigImg() 在鼠標指針移動到圖像上時觸發。此函數放大圖像。</p> <p>函數 normalImg() 在鼠標指針移出圖像時觸發。此函數把圖像的高度和寬度重置為正常尺寸。</p> </body> </html> onmousmove?
| ondrag | script | 元素被拖動時運行的腳本。 |
| ondragend | script | 在拖動操作末端運行的腳本。 |
| ondragenter | script | 當元素元素已被拖動到有效拖放區域時運行的腳本。 |
| ondragleave | script | 當元素離開有效拖放目標時運行的腳本。 |
| ondragover | script | 當元素在有效拖放目標上正在被拖動時運行的腳本。 |
| ondragstart | script | 在拖動操作開端運行的腳本。 |
| ondrop | script | 當被拖元素正在被拖放時運行的腳本。 |
| onmousewheel | script | 當鼠標滾輪正在被滾動時運行的腳本。 |
| onscroll | script | 當元素滾動條被滾動時運行的腳本。 |
Media?事件
由媒介（比如視頻、圖像和音頻）觸發的事件（適用于所有?HTML?元素，但常見于媒介元素中，比如?<audio>、<embed>、<img>、<object>?以及?<video>）:
?
?
| 屬性 | 值 | 描述 |
| onabort | script | 在退出時運行的腳本。 |
| oncanplay | script | 當文件就緒可以開始播放時運行的腳本（緩沖已足夠開始時）。 |
| oncanplaythrough | script | 當媒介能夠無需因緩沖而停止即可播放至結尾時運行的腳本。 |
| ondurationchange | script | 當媒介長度改變時運行的腳本。 |
| onemptied | script | 當發生故障并且文件突然不可用時運行的腳本（比如連接意外斷開時）。 |
| onended | script | 當媒介已到達結尾時運行的腳本（可發送類似“感謝觀看”之類的消息）。 |
| onerror | script | 當在文件加載期間發生錯誤時運行的腳本。 |
| onloadeddata | script | 當媒介數據已加載時運行的腳本。 |
| onloadedmetadata | script | 當元數據（比如分辨率和時長）被加載時運行的腳本。 |
| onloadstart | script | 在文件開始加載且未實際加載任何數據前運行的腳本。 |
| onpause | script | 當媒介被用戶或程序暫停時運行的腳本。 |
| onplay | script | 當媒介已就緒可以開始播放時運行的腳本。 |
| onplaying | script | 當媒介已開始播放時運行的腳本。 |
| onprogress | script | 當瀏覽器正在獲取媒介數據時運行的腳本。 |
| onratechange | script | 每當回放速率改變時運行的腳本（比如當用戶切換到慢動作或快進模式）。 |
| onreadystatechange | script | 每當就緒狀態改變時運行的腳本（就緒狀態監測媒介數據的狀態）。 |
| onseeked | script | 當?seeking?屬性設置為?false（指示定位已結束）時運行的腳本。 |
| onseeking | script | 當?seeking?屬性設置為?true（指示定位是活動的）時運行的腳本。 |
| onstalled | script | 在瀏覽器不論何種原因未能取回媒介數據時運行的腳本。 |
| onsuspend | script | 在媒介數據完全加載之前不論何種原因終止取回媒介數據時運行的腳本。 |
| ontimeupdate | script | 當播放位置改變時（比如當用戶快進到媒介中一個不同的位置時）運行的腳本。 |
| onvolumechange | script | 每當音量改變時（包括將音量設置為靜音）時運行的腳本。 |
| onwaiting | script | 當媒介已停止播放但打算繼續播放時（比如當媒介暫停已緩沖更多數據）運行腳本 |
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/9999w/p/4393622.html
總結
以上是生活随笔為你收集整理的html-----020----事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SOAP简单示例
- 下一篇： WebView三个方法区别（解决乱码问题