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 开发者通常会使用这个方法创建只读字段。现在很少有需要调用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 事件会在图像加载被中断时发生。

七创建图像幻灯片

八表格验证