Event 對象之事件句柄　(Event Handl

Event 對象之事件句柄　(Event Handlers)

謂的Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

事件通常與函數結合使用，函數不會在事件發生前被執行！
事件句柄

HTML 4.0 的新特性之一是能夠使 HTML 事件觸發瀏覽器中的行為，比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，可將之插入 HTML 標簽以定義事件的行為。

屬性此事件發生在何時...IEFOW3Conabort圖像的加載被中斷。419Yesonblur元素失去焦點。319Yesonchange域的內容被改變。319Yesonclick當用戶點擊某個對象時調用的事件句柄。319Yesondblclick當用戶雙擊某個對象時調用的事件句柄。419Yesonerror在加載文檔或圖像時發生錯誤。419Yesonfocus元素獲得焦點。319Yesonkeydown某個鍵盤按鍵被按下。31NoYesonkeypress某個鍵盤按鍵被按下并松開。319Yesonkeyup某個鍵盤按鍵被松開。319Yesonload一張頁面或一幅圖像完成加載。319Yesonmousedown鼠標按鈕被按下。419Yesonmousemove鼠標被移動。319Yesonmouseout鼠標從某元素移開。419Yesonmouseover鼠標移到某元素之上。319Yesonmouseup鼠標按鍵被松開。419Yesonreset重置按鈕被點擊。419Yesonresize窗口或框架被重新調整大小。419Yesonselect文本被選中。319Yesonsubmit確認按鈕被點擊。319Yesonunload用戶退出頁面。319Yes

下面就各個事件分別介紹

1、onabort 事件

定義和用法
onabort 事件會在圖像加載被中斷時發生。

當用戶在圖像完成載入之前放棄圖像的裝載（如單擊了 stop 按鈕）時，就會調用該句柄。

支持該事件的 HTML 標簽：

<img>

支持該事件的 JavaScript 對象：

image

實例 1

在本例中，如果圖像的加載被中斷，則會顯示一個對話框：

<img src="image_w3default.gif"
onabort="alert('Error: Loading of the image was aborted')" />

<img src="image_w3default.gif"
onabort="alert('Error: Loading of the image was aborted')" />

實例 2

在本例中，如果圖像的加載中斷，我們將調用一個函數：<html>
<head>
<script type="text/javascript">
function abortImage()
{
alert('Error: Loading of the image was aborted')
}
</script>
</head>
<body>
<img src="image_w3default.gif" onabort="abortImage()" />
</body>
</html>

2、onblur 事件
返回 Event 對象參考手冊
定義和用法
onblur 事件會在對象失去焦點時發生。

語法
onblur="SomeJavaScriptCode"參數描述
SomeJavaScriptCode 必需。規定該事件發生時執行的 JavaScript。

支持該事件的 HTML 標簽：
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>,
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>,
<em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>,
<iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>,
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>,
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>,
<th>, <thead>, <tr>, <tt>, <ul>, <var>
支持該事件的 JavaScript 對象：
button, checkbox, fileUpload, layer, frame, password,
radio, reset, submit, text, textarea, window
實例 1
在本例中，我們將在用戶離開輸入框時執行 JavaScript 代碼：

<html>
<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>

<body>

輸入您的姓名：
<input type="text" id="fname" onblur="upperCase()" />

</body>
</html>

3、onchange 事件
返回 Event 對象參考手冊
定義和用法
onchange 事件會在域的內容改變時發生。

語法
onchange="SomeJavaScriptCode"參數描述
SomeJavaScriptCode 必需。規定該事件發生時執行的 JavaScript。

支持該事件的 HTML 標簽：
<input type="text">, <select>, <textarea>支持該事件的 JavaScript 對象：
fileUpload, select, text, textarea實例 1
在本例中，我們將在用戶改變輸入域內容時執行 JavaScript 代碼：

<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>

<body>

輸入您的姓名：
<input type="text" id="fname" onchange="upperCase(this.id)" />

Events

你可以編寫事件觸發執行的javascript代碼,例如用戶單擊html元素,移動鼠標或提交表單時

當目標元素發生事件時,執行處理函數

html常用的事件:

屬性此事件何時發生

onabort 圖像的加載被中斷

onblur 元素失去焦點

onchange 域的內容被改變

onclick 當用戶點擊某個對象時調用的事件句柄

onerror 在加載文檔或圖像時發生錯誤

onfocus 元素獲得焦點

onkeydown某個鍵盤按鍵被按下

onkeypress 某個鍵盤按鍵被按下并松開

onkeyup 某個鍵盤按鍵被松開

onload 一張頁面或一幅圖像完成加載

onmousedown 鼠標按鈕被按下

onmousemove 鼠標被移動

onmouseout 鼠標從某元素移開

onmouseover鼠標移動到某元素之上

onmouseup 鼠標按鍵被松開

onreset 重置按鍵被點擊

onresize 窗口或框架被重新調整大小

onselect 文本被選中

onsubmit 確認按鈕被點擊

onunload 用戶退出頁面

相應的事件可以添加到html元素作為屬性

例如:

<p onclick="someFunc()">點擊的文字</p>

事件發生時執行的函數的類型是事件處理程序(event )

function show(){

alert("英雄的黎明!"); }

</script>

效果如下:

可以給元素綁定事件監聽:

var x=document.getElementById("demo");

x.onclick=function(){

document.body.innerHTML=Date(); }

當用戶進入或離開頁面時,觸發onload和onunload事件,在頁面加載后執行操作時,這些操作非常有用

類似地,window.onload事件可以用于在整個頁面加載之后運行代碼

window.onload=function(){

// 代碼塊 }

onchange事件主要用于文本框.當文本框內的文本發生變化并且失去焦點從元素中丟失時,調用事件處理程序.

例如:

function change(){

var x=document.getElementById("name");

x.value=x.value.toUpperCase();

}

</script>

效果如下:

當輸入完英文后,按回車字母自動變為大寫字母

事件監聽

addEventListener()方法將事件處理程序附加到元素,而不會覆蓋現有的事件處理程序.你可以向一個元素添加許多事件處理程序.

你可以將許多同一類型的事件處理程序添加到一個元素.即兩個點擊事件.

element.addEventListener(event,function[,useCapture]);

第一個參數event代表事件的類型(如點擊,或鼠標按下)

第二個參數是事件發生時要調用的函數.

第三個參數是一個布爾值,指定是否使用事件冒泡或事件捕獲.此參數是可選的.

提示:在添加事件類型的時候,沒有on 如:click,而不是onclick

element.addEventListener("click",myFunction);

element.addEventListener("mouseover",myFunction);

function myFunction(){

alert("19954601618"); }

這會向元素添加兩個事件偵聽器.

我們可以刪除其中一個監聽器:

element.removeEventListener("mouseover",myFunction);

我們創建一個事件處理程序,在執行后會自動刪除.

var btn=document.getElementById("demo");

btn.addEventListener("click",myFunction);

function myFunction(){

alert(Math.random());

btn.removeEventListener("click",myFunction);

}

</script>

效果如下:

單擊按鈕后,將顯示帶有隨機數的報警,并刪除事件偵聽器

提示:IE版本8及更低版本不支持addEventListener()和removeEventListener()方法.但是,可以使用document.attachEvent()方法在IE中附加事件處理程序.

七創建圖像幻燈片

我們可以創建一個示例圖像幻燈片項目,將使用"下一個"和"上一個"按鈕更改圖像.

現在,我們來創建html,其中包括一個圖像和兩個導航按鈕:

<div>

</div>

接下來,在數組中定義我們的示例圖像:

var images=["1.jpg","2.jpg","3.jpg"];

現在我們需要處理"上一個"和"下一個"按鈕點擊并調用相應的功能來更改圖像.

html:

<div>

js:

var images=["1.jpg","2.jpg","3.jpg"];

var num=0;

function next(){

var slider=document.getElementById("slider");

num++;

if(num>=images.length){

num=0; }

slider.src=images[num];

}

function pre(){

var slider=document.getElementById("slider");

num--;

if(num<0){

num=images.length-1;

}

slider.src=images[num];

}

效果如下:

提示:num變量保存當前圖像的.下一個和上一個按鈕點擊由他們相應的功能來處理,這些功能會將圖像的源更改為數組中的下一個/上一個圖像.

八表格驗證

html5添加了一些允許表單驗證的屬性.例如,require屬性可以添加到輸入字段,以使其強制填寫.

更復雜的表單驗證可以使用javascript來完成.

表單元素具有可以處理以執行驗證的onsubmit事件.

例如,我們創建一個帶有兩個輸入框和一個按鈕的窗體.兩個字段中的文本應該相同.不能為空,才可通過驗證.

Number:<input type="text" name="num1" id="num1" />

<br/>

Repeat:<input type="text" name="num2" id="num2"/>

<br/>

</form>

現在我們需要定義validate()函數:

function validate(){

var n1=document.getElementById("num1");

var n2=document.getElementById("num2");

if(n1.value!=""&&n2.value!=""){

if(n1.value==n2.value){

return true; }

}

alert("輸入兩個值不相等,請重新輸入");

return false;

}

只有當兩個不為空且相等時才返回true.

提示:如果其onsubmit事件返回false,表單將不會提交.

javascript基本教程到處就結束了.恭喜你已經入門了!

言

在 HTML 中使用 <form> 表單元素在 JavaScript 中對應的是 HTMLFormElement 類型，而HTMLFormElement繼承了HTMLElement接口：

interface HTMLFormElement extends HTMLElement {
    ...
}

因此，HTMLFormElement 除了與 HTMLElement有一樣的屬性和方法外，還有自己獨有的屬性和方法：

acceptCharset：服務器可以接收的字符集，等價于 HTML 的 accept-charset 屬性。
action：請求的 URL，等價于 HTML 的 action 屬性。
elements：表單中所有控件的 HTMLCollection。
enctype：請求的編碼類型，等價于 HTML 的 enctype 屬性。
length：表單中控件的數量。
method：HTTP 請求的方法類型，通常是 get 或 post，等價于 HTML 的 method 屬性。
name：表單的名字，等價于 HTML 的 name 屬性。
target：用于發送請求和接收響應的窗口的名字，等價于 HTML 的 target 屬性。
reset()：把表單字段重置為各自的默認值，如果沒有默認值，則為空。
submit()：提交表單。

如果想要獲取 <form> 表單元素的引用，需要使用 DOM 選擇器進行查找，如 getElementById/getElementsByName/getElementsByClassName/getElementsByTagName/querySelector/querySelectorAll 這些方法，下面使用 getElementById() 方法獲取表單，只要給表單設置一個 id 屬性即可：

let form=document.getElementById("form-id");

Document中的<form>是document.forms的成員，因此可以通過索引或表單的 name 來訪問特定的表單。如下所示：

// 文檔中第一個元素
let firstForm=document.forms[0];
// 取得名字為"form-name"的表單
let formName=document.forms["form-name"];

注意：表單可以同時擁有id和name，且兩者可以不相同。

提交表單

一般情況下，<form>表單元素是通過客戶端用戶點擊的方式發送表單數據。而定義提交按鈕主要有：

定義使用 type=“submit” 屬性值的 <input> 元素，如 <input type="submit" value="提交">。
定義使用 type="submit" 屬性值的 <button> 元素，如 <button type="submit">提交</button>。
定義使用 type="image" 屬性值的 <input> 元素，如 <input type="image" src="submit.gif">。

這種方式提交表單會在請求之前觸發 submit 事件。這就提供了一個驗證表單數據的機會，可以根據驗證結果來決定表單是否要提交。如下所示：

let form=document.getElementById("form-id");
form.addEventListener("submit", (event)=> {
    // 驗證表單
    if (...) {
        // 驗證失敗后，就要阻止表單提交
        event.preventDefault();
        return;
    } 
    // 這里用于驗證成功后將表單提交
});

調用 preventDefault() 方法可以阻止表單提交。通常，在表單數據無效以及不應該發送到服務器可以這樣處理。

也可以調用submit() 方法提交表單，表單中不存在提交按鈕也不影響提交。如下所示：

let form=document.querySelector("#form-id");
// 提交表單
form.submit();

通過 submit() 方法提交的表單，submit 事件不會觸發。因此在調用這個方法前要先做數據驗證。

表單提交的最大一個問題是可能會提交兩次。如果提交表單后沒有反應，那么沒有耐心的用戶可能會多次點擊提交按鈕。因此，解決這種方法主要有兩種：表單提交后禁用按鈕，或者通過 onsubmit 事件取消之后的表單提交。

重置表單

一般用戶填寫完表單信息后，想要重新填寫時，可以使用重置按鈕來重置表單。而定義重置按鈕主要有：

定義使用 type="reset" 屬性值的 <input>元素，如 <input type="reset" value="重置">。
定義使用 type="reset" 屬性值的 <button> 元素，如 <button type="reset">重置</button>

重置成功后，表單字段的值會重置為默認值；如果沒有默認值，則會為空。

重置按鈕可以觸發 reset 事件。這個事件為取消重置提供了機會。如下所示：

let form=document.getElementById("form-id");
form.addEventListener("reset", (event)=> {
    event.preventDefault();
});

重置按鈕也可以調用 reset() 方法完成重置操作：

let form=document.getElementById("form-id");
// 重置表單
form.reset();

但 reset()方法會觸發 reset 事件。

注意：表單設計中通常不提倡重置表單。

表單字段

表單元素可以像頁面中的其它元素一樣使用原生 DOM 方法來訪問。此外，調用 elements 屬性為表單的有序列表，包含表單中所有標簽元素的引用，包括<input>、<textarea>、<button>、<select>和<fieldset>元素，并按照在 HTML 中出現的次序保存，通過索引和name屬性進行訪問。如下所示：

let form=document.getElementById("form-id");
// 取得表單中的第一個字段
let field1=form.elements[0];
// 取得表單中名為"textbox-name"的字段
let field2=form.elements["textbox-name"];
// 取得字段的數量
let fieldCount=form.elements.length;

如果多個表單控件使用同一個 name 值，比如 <input>元素設置type="radio"屬性為單選，就會返回包含所有同名元素的 HTMLCollection。如下所示：

<form method="post" id="form-id">
    <ul>
        <li><input type="radio" name="sex" value="男">男</li>
        <li><input type="radio" name="sex" value="女">女</li>
        <li><input type="radio" name="sex" value="未知">未知</li>
    </ul>
</form>

因此，訪問 elements["sex"] 返回的 NodeList 就包含著 3 個元素；而使用索引訪問時，就會返回當前位置的元素。如下所示：

let form=document.getElementById("form-id");
let sexes=form.elements["sex"];
console.log(sexes.length); // 3
let index_one=sexes[1];
let form_one=form.elements[1];
console.log(index_one===form_one); // true

公共屬性

除了 <fieldset> 元素以外，所有表單字段都有一組同樣的屬性。由于 <input> 類型可以表示多種表單字段，因此某些屬性只適用于特定類型的字段。除此之外的屬性可以在任何表單字段上使用。以下列出了這些表單字段的公共屬性和方法。

disabled：布爾值，表示表單字段是否禁用。
form：指針，指向表單字段所屬的表單。這個屬性是只讀的。
name：字符串，這個字段的名字。
readOnly：布爾值，表示這個字段是否只讀。
tabIndex：數值，表示這個字段在按Tab 鍵時的切換順序。
type：字符串，表示字段類型，如"checkbox"、"radio"等。
value：要提交給服務器的字段值。對文件輸入字段來說，這個屬性是只讀的，僅包含計算機上某個文件的路徑。

JavaScript 可以動態修改任何屬性，當然，form屬性除外。如下所示：

let form=document.getElementById("form-id");
let field=form.elements[0];
// 修改字段的值
field.value="修改后的值";
// 檢查字段所屬的表單
console.log(field.form===form); // true
// 給字段設置焦點
field.focus();
// 禁用字段
field.disabled=true;
// 改變字段的類型（不推薦，但對<input>來說是可能的）
field.type="checkbox";

動態修改表單字段屬性的能力為修改表單提供了方便。如當點擊兩次提交按鈕時，會在第一次提交后，通過監聽submit事件來實現禁用提交按鈕。如下所示：

// 避免多次提交表單的代碼
let form=document.getElementById("form-id");
form.addEventListener("submit", (event)=> {
let target=event.target;
// 取得提交按鈕
let btn=target.elements["submit-btn"];
// 禁用提交按鈕
btn.disabled=true;
});

以上代碼，通過監聽 submit 事件，并在函數中獲取按鈕并設置disabled=true，來達到提交按鈕禁用。注意：這個功能不能通過直接給提交按鈕添加 onclick 事件進行實現，原因是不同瀏覽器觸發事件的時機不一樣。有些瀏覽器會在觸發表單的 submit 事件前先觸發 onclick 事件，有些瀏覽器會后觸發 onclick 事件。對于先觸發 onclick 事件的瀏覽器，這個按鈕會在表單提交前被禁用，這意味著表單不會被提交。因此，最好使用表單的 submit 事件進行禁用提交按鈕。但這種方式不適用于沒有提交按鈕的表單提交，因為，只有提交按鈕才能觸發 submit 事件。

type 屬性可以用于除<fieldset>之外的任何表單字段。對于<input>元素，這個值等于 HTML 的 type 屬性值。對于其他元素，這個 type 屬性的值按照下表設置。

描述	示例HTML	類型的值
單選列表	<select>...</select>	"select-one"
多項列表	<select multiple>...</select>	"select-multiple"
自定義按鈕	<button>...</button>	"submit"
自定義非提交按鈕	<button type="button">...</button>	"button"
自定義重置按鈕	<button type="reset">...</button>	"reset"
自定義提交按鈕	<button type="submit">...</button>	"submit"

對于<input>和<button>元素，可以動態修改其 type 屬性。但<select>元素的 type 屬性是只讀的。

公共方法

每個表單字段都有兩個公共方法：

focus()：把瀏覽器焦點設置到表單字段，該字段會變成活動字段并可以響應鍵盤事件。
blur()：從元素上移出焦點，焦點不會轉移到任何特定元素，僅僅是從調用這個方法的元素上移除。

給一個 focus() 方法的例子：

window.addEventListener("load", (event)=> {
    document.forms[0].elements[0].focus();
});

上述情況就是在頁面加載后，把焦點定位到表單中的第一個字段。注意：如果表單中第一個字段是type="hidden"屬性的<input>元素，或者該字段被 CSS 屬性 display 或 visibility 隱藏，以上代碼就會出錯。

在 HTML5 中，表單字段增加了 autofocus 屬性，支持的瀏覽器會自動為帶有該屬性的元素設置焦點，無須使用 JavaScript。如下所示：

<input type="text" autofocus>

為了讓之前的代碼在使用autofocus時也能正常工作，必須先檢測元素上是否設置了該屬性。如果設置了 autofocus，就不再調用 focus()：

window.addEventListener("load", (event)=> {
    let element=document.forms[0].elements[0];
    if (element.autofocus !==true) {
        element.focus();
    }
});

注意：默認情況下只能給表單元素設置焦點。不過，通過將 tabIndex 屬性設置為–1 再調用focus()，也可以給任意元素設置焦點。

再給一個 blur() 的例子：

document.forms[0].elements[0].blur();

在瀏覽器支持 readOnly 屬性之前，Web 開發者通常會使用這個方法創建只讀字段?，F在很少有需要調用blur()的了。

公共事件

除了鼠標、鍵盤、變化和HTML 事件外，所有字段還支持以下 3 個事件：

blur：字段失去焦點時，會觸發該事件。
change：<input>和<textarea>元素的 value 發生變化且失去焦點時觸發，或者在<select>元素中選中項發生變化時觸發。
focus：在字段獲得焦點時觸發。

blur 和 focus 事件是用戶手動改變焦點或調用blur/focus方法時觸發。change事件是因控件不同而改變觸發時機。

<input> 和 <textarea>：change事件會在字段失去焦點，同時 value 自控件獲得焦點后發生改變時觸發。
<select>：change 事件會在用戶改變選中項時觸發，不需要控件失去焦點。

focus 和 blur 事件通常用于改變用戶界面，提供可見的提示或額外功能；change事件通常用于驗證用戶在字段中輸入的內容。比如，有的文本框可能只限于接收數值，focus 事件用來改變控件的背景顏色以便更清楚地表明當前字段獲得了焦點，blur 事件用于去掉這個背景顏色，change 事件用于在用戶輸入了非數值時把背景顏色改為紅色。如下所示：

let textbox=document.forms[0].elements[0];
textbox.addEventListener("focus", (event)=> {
    let target=event.target;
    if (target.style.backgroundColor !="red") {
        target.style.backgroundColor="yellow";
    }
});
textbox.addEventListener("blur", (event)=> {
    let target=event.target;
    target.style.backgroundColor=/[^\d]/.test(target.value) ? "red" : "";
});
textbox.addEventListener("change", (event)=> {
    let target=event.target;
    target.style.backgroundColor=/[^\d]/.test(target.value) ? "red" : "";
});

上述代碼中，onfocus 事件會把文本框的背景改為黃色，表明是當前活動字段。onblur 和 onchange 事件會在發現非數值字符時把背景改為紅色。為測試非數值字符，這里使用了簡單的正則表達式來檢測文本框的value。這個功能必須同時在 onblur 和 onchange 事件上實現，確保無論文本框是否改變都能執行驗證。

注意：blur 和 change 事件的關系并沒有明確定義。在某些瀏覽器中，blur事件會先于 change 事件觸發；在其它瀏覽器中，觸發順序會相反。因此不能依賴這兩個事件觸發的順序，必須區分時要多加注意。

總結

HTML 和 ECMAScript 都更新了好幾個版本，但是表單幾乎從來沒有改變。但是，通過 JavaScript 可以增加現有表單字段以提供新功能或增強易用性。也因此，表單字段也暴露了屬性、方法和事件供 JavaScript 調用使用。

在線咨詢

上一篇：Word文檔怎么橫向排版？這三種方法簡單高效專業
下一篇：ASP.NET Core MVC+Layui使用EF

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Event 對象之事件句柄 (Event Handl

定義和用法onabort 事件會在圖像加載被中斷時發生。

支持該事件的 HTML 標簽：

支持該事件的 JavaScript 對象：

實例 1

實例 2

Events

七 創建圖像幻燈片

八 表格驗證

言

提交表單

重置表單

表單字段

公共屬性

公共方法

公共事件

總結

您的項目需求

Event 對象之事件句柄　(Event Handl

定義和用法
onabort 事件會在圖像加載被中斷時發生。

七創建圖像幻燈片

八表格驗證