整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1.1 onblur和onfocus
馬克-to-win：onblur失去焦點和onfocus得到焦點事件。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<SCRIPT LANGUAGE="JavaScript">
<!--
function check(a)
{
var username = a.value;
if (username == "")
{
/*String.fontcolor() (Method)
Encapsulates the string within an <FONT COLOR="..."> tag context.*/
document.getElementById("error").innerHTML = "用戶名不能為空！".fontcolor("red");
}
}
function rese()
{
document.getElementById("error").innerHTML = "";
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="document.getElementById('u').focus()">
篇幅有限更多請見擴展鏈接：http://www.mark-to-win.com/tutorial/js_4_onbluronfocus.html「鏈接」
HTML DOM 事件
HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。
事件通常與函數結合使用，函數不會在事件發生前被執行！ (如用戶點擊按鈕)。
提示： 在 W3C 2 級 DOM 事件中規范了事件模型。
HTML DOM 事件
DOM： 指明使用的 DOM 屬性級別。
鼠標事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onclick | 當用戶點擊某個對象時調用的事件句柄。 | 2 |
| oncontextmenu | 在用戶點擊鼠標右鍵打開上下文菜單時觸發 | |
| ondblclick | 當用戶雙擊某個對象時調用的事件句柄。 | 2 |
| onmousedown | 鼠標按鈕被按下。 | 2 |
| onmouseenter | 當鼠標指針移動到元素上時觸發。 | 2 |
| onmouseleave | 當鼠標指針移出元素時觸發 | 2 |
| onmousemove | 鼠標被移動。 | 2 |
| onmouseover | 鼠標移到某元素之上。 | 2 |
| onmouseout | 鼠標從某元素移開。 | 2 |
| onmouseup | 鼠標按鍵被松開。 | 2 |
鍵盤事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onkeydown | 某個鍵盤按鍵被按下。 | 2 |
| onkeypress | 某個鍵盤按鍵被按下并松開。 | 2 |
| onkeyup | 某個鍵盤按鍵被松開。 | 2 |
框架/對象（Frame/Object）事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onabort | 圖像的加載被中斷。 ( <object>) | 2 |
| onbeforeunload | 該事件在即將離開頁面（刷新或關閉）時觸發 | 2 |
| onerror | 在加載文檔或圖像時發生錯誤。 ( <object>, <body>和 <frameset>) | |
| onhashchange | 該事件在當前 URL 的錨部分發生修改時觸發。 | |
| onload | 一張頁面或一幅圖像完成加載。 | 2 |
| onpageshow | 該事件在用戶訪問頁面時觸發 | |
| onpagehide | 該事件在用戶離開當前網頁跳轉到另外一個頁面時觸發 | |
| onresize | 窗口或框架被重新調整大小。 | 2 |
| onscroll | 當文檔被滾動時發生的事件。 | 2 |
| onunload | 用戶退出頁面。 ( <body> 和 <frameset>) | 2 |
表單事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onblur | 元素失去焦點時觸發 | 2 |
| onchange | 該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>) | 2 |
| onfocus | 元素獲取焦點時觸發 | 2 |
| onfocusin | 元素即將獲取焦點時觸發 | 2 |
| onfocusout | 元素即將失去焦點時觸發 | 2 |
| oninput | 元素獲取用戶輸入時觸發 | 3 |
| onreset | 表單重置時觸發 | 2 |
| onsearch | 用戶向搜索域輸入文本時觸發 ( <input="search">) | |
| onselect | 用戶選取文本時觸發 ( <input> 和 <textarea>) | 2 |
| onsubmit | 表單提交時觸發 | 2 |
剪貼板事件
| 屬性 | 描述 | DOM |
|---|---|---|
| oncopy | 該事件在用戶拷貝元素內容時觸發 | |
| oncut | 該事件在用戶剪切元素內容時觸發 | |
| onpaste | 該事件在用戶粘貼元素內容時觸發 |
打印事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onafterprint | 該事件在頁面已經開始打印，或者打印窗口已經關閉時觸發 | |
| onbeforeprint | 該事件在頁面即將開始打印時觸發 |
拖動事件
| 事件 | 描述 | DOM |
|---|---|---|
| ondrag | 該事件在元素正在拖動時觸發 | |
| ondragend | 該事件在用戶完成元素的拖動時觸發 | |
| ondragenter | 該事件在拖動的元素進入放置目標時觸發 | |
| ondragleave | 該事件在拖動元素離開放置目標時觸發 | |
| ondragover | 該事件在拖動元素在放置目標上時觸發 | |
| ondragstart | 該事件在用戶開始拖動元素時觸發 | |
| ondrop | 該事件在拖動元素放置在目標區域時觸發 |
多媒體（Media）事件
| 事件 | 描述 | DOM |
|---|---|---|
| onabort | 事件在視頻/音頻（audio/video）終止加載時觸發。 | |
| oncanplay | 事件在用戶可以開始播放視頻/音頻（audio/video）時觸發。 | |
| oncanplaythrough | 事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩沖時觸發。 | |
| ondurationchange | 事件在視頻/音頻（audio/video）的時長發生變化時觸發。 | |
| onemptied | 當期播放列表為空時觸發 | |
| onended | 事件在視頻/音頻（audio/video）播放結束時觸發。 | |
| onerror | 事件在視頻/音頻（audio/video）數據加載期間發生錯誤時觸發。 | |
| onloadeddata | 事件在瀏覽器加載視頻/音頻（audio/video）當前幀時觸發觸發。 | |
| onloadedmetadata | 事件在指定視頻/音頻（audio/video）的元數據加載后觸發。 | |
| onloadstart | 事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發。 | |
| onpause | 事件在視頻/音頻（audio/video）暫停時觸發。 | |
| onplay | 事件在視頻/音頻（audio/video）開始播放時觸發。 | |
| onplaying | 事件在視頻/音頻（audio/video）暫停或者在緩沖后準備重新開始播放時觸發。 | |
| onprogress | 事件在瀏覽器下載指定的視頻/音頻（audio/video）時觸發。 | |
| onratechange | 事件在視頻/音頻（audio/video）的播放速度發送改變時觸發。 | |
| onseeked | 事件在用戶重新定位視頻/音頻（audio/video）的播放位置后觸發。 | |
| onseeking | 事件在用戶開始重新定位視頻/音頻（audio/video）時觸發。 | |
| onstalled | 事件在瀏覽器獲取媒體數據，但媒體數據不可用時觸發。 | |
| onsuspend | 事件在瀏覽器讀取媒體數據中止時觸發。 | |
| ontimeupdate | 事件在當前的播放位置發送改變時觸發。 | |
| onvolumechange | 事件在音量發生改變時觸發。 | |
| onwaiting | 事件在視頻由于要播放下一幀而需要緩沖時觸發。 |
動畫事件
| 事件 | 描述 | DOM |
|---|---|---|
| animationend | 該事件在 CSS 動畫結束播放時觸發 | |
| animationiteration | 該事件在 CSS 動畫重復播放時觸發 | |
| animationstart | 該事件在 CSS 動畫開始播放時觸發 |
過渡事件
| 事件 | 描述 | DOM |
|---|---|---|
| transitionend | 該事件在 CSS 完成過渡后觸發。 |
其他事件
| 事件 | 描述 | DOM |
|---|---|---|
| onmessage | 該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發 | |
| onmousewheel | 已廢棄。 使用 onwheel 事件替代 | |
| ononline | 該事件在瀏覽器開始在線工作時觸發。 | |
| onoffline | 該事件在瀏覽器開始離線工作時觸發。 | |
| onpopstate | 該事件在窗口的瀏覽歷史（history 對象）發生改變時觸發。 | |
| onshow | 該事件當 <menu> 元素在上下文菜單顯示時觸發 | |
| onstorage | 該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發 | |
| ontoggle | 該事件在用戶打開或關閉 <details> 元素時觸發 | |
| onwheel | 該事件在鼠標滾輪在元素上下滾動時觸發 |
事件對象
常量
| 靜態變量 | 描述 | DOM |
|---|---|---|
| CAPTURING-PHASE | 當前事件階段為捕獲階段(3) | 1 |
| AT-TARGET | 當前事件是目標階段,在評估目標事件(1) | 2 |
| BUBBLING-PHASE | 當前的事件為冒泡階段 (2) | 3 |
屬性
| 屬性 | 描述 | DOM |
|---|---|---|
| bubbles | 返回布爾值，指示事件是否是起泡事件類型。 | 2 |
| cancelable | 返回布爾值，指示事件是否可擁可取消的默認動作。 | 2 |
| currentTarget | 返回其事件監聽器觸發該事件的元素。 | 2 |
| eventPhase | 返回事件傳播的當前階段。 | 2 |
| target | 返回觸發此事件的元素（事件的目標節點）。 | 2 |
| timeStamp | 返回事件生成的日期和時間。 | 2 |
| type | 返回當前 Event 對象表示的事件的名稱。 | 2 |
方法
| 方法 | 描述 | DOM |
|---|---|---|
| initEvent() | 初始化新創建的 Event 對象的屬性。 | 2 |
| preventDefault() | 通知瀏覽器不要執行與事件關聯的默認動作。 | 2 |
| stopPropagation() | 不再派發事件。 | 2 |
目標事件對象
方法
| 方法 | 描述 | DOM |
|---|---|---|
| addEventListener() | 允許在目標事件中注冊監聽事件(IE8 = attachEvent()) | 2 |
| dispatchEvent() | 允許發送事件到監聽器上 (IE8 = fireEvent()) | 2 |
| removeEventListener() | 運行一次注冊在事件目標上的監聽事件(IE8 = detachEvent()) | 2 |
事件監聽對象
方法
| 方法 | 描述 | DOM |
|---|---|---|
| handleEvent() | 把任意對象注冊為事件處理程序 | 2 |
文檔事件對象
方法
| 方法 | 描述 | DOM |
|---|---|---|
| createEvent() | 2 |
鼠標/鍵盤事件對象
屬性
| 屬性 | 描述 | DOM |
|---|---|---|
| altKey | 返回當事件被觸發時，"ALT" 是否被按下。 | 2 |
| button | 返回當事件被觸發時，哪個鼠標按鈕被點擊。 | 2 |
| clientX | 返回當事件被觸發時，鼠標指針的水平坐標。 | 2 |
| clientY | 返回當事件被觸發時，鼠標指針的垂直坐標。 | 2 |
| ctrlKey | 返回當事件被觸發時，"CTRL" 鍵是否被按下。 | 2 |
| Location | 返回按鍵在設備上的位置 | 3 |
| charCode | 返回onkeypress事件觸發鍵值的字母代碼。 | 2 |
| key | 在按下按鍵時返回按鍵的標識符。 | 3 |
| keyCode | 返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。 | 2 |
| which | 返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。 | 2 |
| metaKey | 返回當事件被觸發時，"meta" 鍵是否被按下。 | 2 |
| relatedTarget | 返回與事件的目標節點相關的節點。 | 2 |
| screenX | 返回當某個事件被觸發時，鼠標指針的水平坐標。 | 2 |
| screenY | 返回當某個事件被觸發時，鼠標指針的垂直坐標。 | 2 |
| shiftKey | 返回當事件被觸發時，"SHIFT" 鍵是否被按下。 | 2 |
方法
| 方法 | 描述 | W3C |
|---|---|---|
| initMouseEvent() | 初始化鼠標事件對象的值 | 2 |
| initKeyboardEvent() | 初始化鍵盤事件對象的值 | 3 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
ttps://www.w3school.com.cn/js/index.asp
1.JavaScript 事件
HTML事件是發生在HTML元素上的“事情”.
當在HTML頁面中使用JavaScript時，JavaScript能夠“應對”這些事件。
通過JavaScript代碼，向HTML元素添加事件處理程序。
格式1：
<html 元素 事件名稱=“JavaScript代碼對應時間的處理程序”>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test1(){
alert("按鈕的點擊事件被觸發")
}
</script>
</head>
<body>
<input type="button" value="按鈕" onclick="test1();"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test1(){
alert("按鈕的點擊事件被觸發")
}
</script>
</head>
<body>
<input type="button" value="按鈕" onclick="('按鈕的點擊事件被處罰');" /><br>
<h2>通常我們都是在對應事件的雙引號中編寫處理程序，處理程序中如果出現雙引號改成單引號</h2>
<input type="button" value="按鈕" onclick="test1()" /><br>
</body>
</html>
常見的 HTML 事件
下面是一些常見的 HTML 事件：
onload–瀏覽器已經完成頁面加載[頁面初始化事件]
onclick–用戶點擊了 HTML 元素
onmouseover–用戶把鼠標移動到 HTML 元素上[鼠標進入]
onmouseout–用戶把鼠標移開 HTML 元素[鼠標移出]
onchange–HTML 元素已被改變
onfocus—元素獲得焦點。
onblur—元素失去焦點。
onkeydown–用戶按下鍵盤按鍵
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test1(){
alert("頁面初始化事件被觸發");
}
function test2(){
alert("元素點擊事件被觸發");
}
function testover(){
document.getElementById("img1").width=document.getElementById("img1").width+100;
document.getElementById("img1").height=document.getElementById("img1").height+100;
}
function testout(){
document.getElementById("img1").width=100;
document.getElementById("img1").height=100;
}
function testchange(){
var inputvalue=document.getElementById("text1").value;
if(inputvalue==""){
alert("用戶名不能為空");
}
if(inputvalue=="zhangsan"){
document.getElementById("span1").innerHTML="<font color='red'>該用戶名已經存在請重寫輸入!</font>";
}
}
function testblur(){
var inputvalue=document.getElementById("text1").value;
if(inputvalue==""){
alert("用戶名不能為空");
}
if(inputvalue=="zhangsan"){
document.getElementById("span1").innerHTML="<font color='red'>該用戶名已經存在請重寫輸入!</font>";
}
}
function testfocus(){
document.getElementById("span1").innerHTML="";
document.getElementById("text1").value="";
}
function testkeydown(e){
if(e.keyCode==38 ){
alert("向上移動");
}
if(e.keyCode==37){
alert("向左移動");
}
if(e.keyCode==39){
alert("向右移動");
}
if(e.keyCode==40){
alert("向下移動");
}
if(e.keyCode==32){
alert("暫停");
}
}
</script>
</head>
<body onload="test1();" onkeydown="testkeydown(even);">
<img id="img1" src="13.jpg" width="100px" height="100px" onclick="test2();"
onmouseover="testover();" onmouseout="textout();"
>
<input id="text1" type="text" value="請輸入用戶名" onchange="testchange();"
onfocus="testfocus();"/>
<span id="span1"></span>
-->
<input type="text" id="text1" value="請輸入用戶名" onblur="testblur();"
onfocus="testfocus();"/>
<span id="span1">
</span>
</body>
</html>
onsubmit—表單提交事件【作用在form表單上】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function testsubmit(){
var textvalue=document.getElementById("text1").value;
if(textvalue==""){
alert("用戶名不能為空！");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="test" method="get" onsubmit="return testsubmit();">
<input type="text" id="text1" value="請輸入用戶名" />
<input type="password" />
<input type="submit" value="登錄" />
</form>
</body>
</html>
1.onsubmit作用在form表單上 return javascript函數；
2.javascript函數的返回值return 的是false表示不會向form表單anction屬性指定的后端處理程序提交表單數據，如果是true表示會向form表單anction屬性指定的后端處理程序提交表單數據。
2、JavaScript 字符串
JavaScript 字符串是引號中的零個或多個字符。用于存儲和操作文本。
var x = “Bill Gates”; //創建字符串變量【沒有可供操作的的方法和屬性】
var y=new String(“hello”); //創建字符串對象【可供操作的的方法和屬性】
當創建的字符串變量調用提供的方法和屬性的時候，字符串變量會被自動轉換成字符串對象。
//創建字符串變量
var x = “Bill Gates”;
x.substring(0,5); //此時x表示的字符串變量會被自動轉換成字符串對象。
方法和屬性
length 屬性–返回字符串的長度
indexOf(string) 方法返回字符串中指定文本首次出現的索引（位置）
lastIndexOf(string) 方法返回指定文本在字符串中最后一次出現的索引
JavaScript 從零計算位置。
0 是字符串中的第一個位置，1 是第二個，2 是第三個 …
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
slice(start,end) 方法提取字符串的某個部分并在新字符串中返回被提取的部分
參數為負數
substring(start, end)方法提取字符串的某個部分并在新字符串中返回被提取的部分
參數不能為負數
substr(start, length)方法提取字符串的某個部分并在新字符串中返回被提取的部分
第二參數是個數，不是結束位置。
replace(old,new) 方法用另一個值替換在字符串中指定的值
toUpperCase() 把字符串轉換為大寫：
toLowerCase() 把字符串轉換為小寫：
trim() 方法刪除字符串兩端的空白符：
charAt() 方法返回字符串中指定下標（位置）的字符串：
charCodeAt() 方法返回字符串中指定索引的字符 unicode 編碼：
split(op) 將字符串通過指定的分隔符號拆分成字符串數組：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
