前端基础 JavaScript 第五章事件和事件处理----假期学习第十三天-CFANZ编程社区

第五章事件和事件处理

5.1 理解事件

5.1.1 事件概述

浏览器响应用户操作的机制，js大部分事件都与HTML标记有关，都是在用户操作页面元素时触发的。js为绝大多数HTML对象定义了事件，包括链接(link),图像(image),表单元素(form element)和窗口(window)等。

有些事件由浏览器自动监听，如窗体load事件。有些事件响应用户请求需要人工编写程序来定义。

5.1.2 事件类型

HTML组件及其对应的事件

HTML组件	HTML标记	JavaScript事件	描述
链接	<a></a>	click dbClick mouseDown mouseUp mouseOver mouseOut keyDown keyUp keyPress	鼠标单击链接鼠标双击链接按下鼠标按钮释放鼠标按钮鼠标停在链接上鼠标从链接的范围内移到链接的范围外用户按下键用户释放键用户按下并释放键
图像	<img>	abort error load keyDown keyUp keyPress	图像的加载被中止图像的加载过程中出现错误图像加载和显示用户按下键用户释放键用户按下并释放键
区域	<area>	mouseOver mouseOut dbClick	鼠标停在客户端图像区域上鼠标从图像区域内移到区域外用户双击图像区域
文档体	<body></body>	click dbClick keyDown keyUp keyPress mouseDown mouseUp	用户单击文档体用户双击文档体用户按下键用户释放键用户按下并释放键用户按下鼠标按钮用户释放鼠标按钮
窗口框架集框架	<frameset> </frameset> <frame> </frame>	blur error focus load unload move resize dragDrop	窗口失去输入焦点窗口加载时出现错误窗口接收当前输入焦点窗口的加载完成用户退出窗口移动窗口调整窗口大小用户将一个对象放入窗口
表单	<form></form>	submit reset	用户提交表单用户重置表单
单行文本域	<input type="text">	blur focus change select	文本域失去当前输入焦点文本域得到当前输入焦点文本域被修改并且失去当前输入焦点在文本域中选择了文本
密码域	<input type="password">	blur focus	密码域失去焦点密码域获得焦点
多行文本域	<textarea></textarea>	blur focus change select keyDown keyUp keyPress	文本域失去当前输入焦点文本域得到当前输入焦点文本域被修改并且失去当前焦点在文本域中选择了文本用户按下键用户释放键用户按下并释放键
按钮	<input type="button">	click blur focus mouseDown mouseUp	单击按钮按钮失去输入焦点按钮获得输入焦点用户在按钮上按下鼠标左键用户在按钮上释放鼠标左键
提交	<input type="submit">	click blur focus	单击重置按钮重置按钮失去焦点重置按钮获得焦点
重置	<input type="reset">	click blur focus	单击重置按钮重置按钮失去焦点重置按钮获得焦点
单选按钮	<input type="radio">	click blur focus	单击单选按钮单选按钮失去焦点单选按钮获得焦点
复选框	<input type="checkbox">	click blur focus	单击复选框复选框失去焦点复选框获得焦点
文件上传	<input type="file">	blur change focus	文件上传表单组件失去焦点用户选择一个文件上传文件上传表单组件获得输入焦点
下拉菜单	<select></select>	blur focus change	选择菜单组件失去输入焦点选择菜单组件获得输入焦点选择菜单组件被修改并失去当前输入焦点

针对不同的ＨＴＭＬ元素，js支持不同的事件类型。

5.1.3 事件处理器

前面给出了 js编程中常用事件类型，当这些事件发生时，程序就会执行用于响应事件的js代码。响应特定事件的代码称为事件处理器。事件处理器的代码包含在相应的HTML标记里,作为该标记的属性，其语法格式如下：

<HTML标签事件处理器名称=“js代码”>

事件处理器名称与事件本身名称大体相同，加个前缀on即可，事件处理器名称不区分大小写(HTML语言本身也从来不区分大小写，标签大小写都无所谓)

eg:

事件句柄

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

属性	当以下情况发生时，出现此事件	FF	N	IE
onabort	图像加载被中断	1	3	4
onblur	元素失去焦点	1	2	3
onchange	用户改变域的内容	1	2	3
onclick	鼠标点击某个对象	1	2	3
ondblclick	鼠标双击某个对象	1	4	4
onerror	当加载文档或图像时发生某个错误	1	3	4
onfocus	元素获得焦点	1	2	3
onkeydown	某个键盘的键被按下	1	4	3
onkeypress	某个键盘的键被按下或按住	1	4	3
onkeyup	某个键盘的键被松开	1	4	3
onload	某个页面或图像被完成加载	1	2	3
onmousedown	某个鼠标按键被按下	1	4	4
onmousemove	鼠标被移动	1	6	3
onmouseout	鼠标从某元素移开	1	4	4
onmouseover	鼠标被移到某元素之上	1	2	3
onmouseup	某个鼠标按键被松开	1	4	4
onreset	重置按钮被点击	1	3	4
onresize	窗口或框架被调整尺寸	1	4	4
onselect	文本被选定	1	2	3
onsubmit	提交按钮被点击	1	2	3
onunload	用户退出页面	1	2	3

5.2 处理事件

js中事件处理分为两个步骤：首先定义可以被js识别和处理的事件，然后由程序员使用标准的方法将事件和事件处理代码连接起来。

针对以上步骤，js有两种处理方式，分别是HTML属性的事件处理方式和js属性的事件处理方式。

5.2.1 通过HTML属性处理事件

事件处理器作为HTML的属性值来表示和应用，eg:

上述事件处理器onclick就是用标签<input>的属性onclick指定的，HTML4.0已经为js中的事件处理器定义了相应的属性，在程序中可以通过HTML标签的属性指定相应的事件处理器，从而完成事件处理。

最好通过事件处理器调用函数完成事件处理。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML属性处理事件</title>
    <script language="JavaScript">
        function  printMeaasge(message) {
            alert(message);
        }
    </script>
</head>
<body>
<h3>Example:作为HTML属性的事件处理器</h3>
<input type="button" value="直接输出信息" onclick="alert('您单击了按钮，直接输出了信息！')">
<input type="button" value="通过函数输出信息按钮" onclick="printMeaasge('单击按钮后先调用函数，通过函数输出信息！')">
</body>
</html>

运行结果：

前端基础 JavaScript 第五章事件和事件处理----假期学习第十三天_html

5.2.2 通过js属性处理事件

事件处理器几乎都是作为HTML的属性值来定义的，通过js属性处理事件，了解一下。

作为js属性的事件处理器，这种方式允许程序像操作js属性一样来处理事件。比较区别：

HTML属性：

js属性：

document.forms[0].infoButton.οnclick=function(){alert('按钮的click事件被触发了！')}

注意：HTML语言不区分字母大小写，所以作为HTML属性的事件处理器不区分大小写；而js是一种对大小写敏感的计算机语言，所以js的事件处理器属性区分大小写，他们必须使用小写字母，例如onclick、onload等。

js属性表示事件处理器不常用，但也有一些好处，如减少HTML与js代码的混合使用，js事件处理器的代码不必是确定的，动态创建修改等。

5.3 js中的事件处理

针对js编程中常用的事件类型和处理方式结合实例进行说明

5.3.1 处理链接事件

根据5.1.2中的表格可以看到与链接相关的事件一共有9个，常用的有click事件，mouseOver事件和mouseOut事件。

eg:链接的mouseover事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example: 链接的mouseover事件</title>
    <script language="JavaScript">
        function printMessage(message) {
            alert(message)
        }
    </script>
</head>
<body>
    <h3>Example: 链接的mouseover事件</h3>
    <a href="#" onmouseover="printMessage('您的鼠标经过链接了！')">
        请把鼠标放过来，看看会发生什么
    </a>
</body>
</html>

运行结果：

前端基础 JavaScript 第五章事件和事件处理----假期学习第十三天_事件处理_02

注意：双引号内在有双引号，内部要改成单引号

鼠标经过链接就触发事件，还可以给一个链接关联多个事件

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example: 链接的mouseover事件</title>
    <script language="JavaScript">
        function printMessage(message) {
            alert(message)
        }
    </script>
</head>
<body>
    <h3>Example: 链接的mouseover事件</h3>
    <a href="#" onmouseover="printMessage('您的鼠标经过链接了！')" onmouseout="printMessage('您的鼠标刚离开了 链接!')">
        请把鼠标放过来，看看会发生什么
    </a>
</body>
</html>

运行结果：

前端基础 JavaScript 第五章事件和事件处理----假期学习第十三天_前段js_03

5.3.2 处理窗口事件

窗口事件主要用来处理普通HTML文档以及包含帧结构的HTML文档，常用的有load事件，unload事件、blur事件、focus事件等。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example:窗口的load和unload事件</title>
    <script language="JavaScript">
        function loadHandle() {
            alert("窗口执行了load事件!")
        }
        function unloadHandle() {
            alert("窗口执行了unload事件!")
        }
    </script>

</head>
<body onload="loadHandle()" onunload="unloadHandle()">
    <h3>Example:窗口的load事件和unload</h3>
</body>
</html>

运行结果：

前端基础 JavaScript 第五章事件和事件处理----假期学习第十三天_事件处理_04

5.3.3 处理图形事件

为了美化页面常用大量图片，与图像相关的事件经常碰到

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example:图形的load事件</title>
    <script language="JavaScript">
        function imageloadHandle() {
            alert("图形加载完成！")
        }
        function keydownHandle() {
           alert("你按下了键盘<br>")
        }
    </script>
</head>
<body>
    <h3>Example:图形的load事件</h3>
    <img src="images/dzr.jpg" onload="imageloadHandle()" onkeydown="keydownHandle()">
</body>
</html>

运行结果：

前端基础 JavaScript 第五章事件和事件处理----假期学习第十三天_前段js_05

5.3.4 处理图形映射事件

就是4.3.2 图像热区链接的回顾

图像的不同区域链接到不同链接，也可链接到不同事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example:图形映射事件</title>
    <script language="JavaScript">
        function messageHandle() {
            alert("您单击的是图形的第二个映射区！")
        }
    </script>
</head>
<body>
    <h3>Example:图形映射事件</h3>
    <img src="images/dzr.jpg" usemap="#example">
    <map name="example">
        <area coords="5,5,300,120" href="2链接的mouseover事件.html" target="_blank">
        <area coords="300,5,600,120" onclick="messageHandle()">
    </map>
</body>
</html>

运行结果：

前端基础 JavaScript 第五章事件和事件处理----假期学习第十三天_前段js_06

不写shape只写4个坐标，默认矩形。

usemap属性必须写，切值#后的名字必须和map标签的name标签一致(测试验证过了)

#语法上必须有，但是没写也有相同效果(测试验证过了)可能新版浏览器优化了

5.3.5 处理窗体事件

为了实现具体交互逻辑，窗体事件的使用最为频繁，此处仅举一个小例，后续详细论述

eg:用户注册提交检测逻辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example:窗体事件</title>
    <script language="JavaScript">
        function checkValid(s) {
            var len=s.length;
            for(var i=0;i<len;i++){
                if(s.charAt(i)!=""){
                    return false;//有一个非空都会返回false(不空)  完全空的才返回true
                }
            }
            return true;
        }
        function okHandle() {
            //js都是通过控件的name属性取得控件
            if(checkValid(document.test.userName.value)){
                alert("用户名不能为空！")
            }else if(checkValid(document.test.passWord.value)){
                alert("用户密码不能为空!")
            }else{
                alert("您填写正确！")
            }
        }
        function cancelHandle() {
            document.test.userName.value="";
            document.test.passWord.value="";
        }
    </script>
</head>
<body>
    <form name="test">
        <h3>Example:窗体事件</h3>
        <font size="2">用户名称：</font>
        <input type="text" name="userName">
        <br><br>
        <font size="2">用户密码:</font>
        <input type="text" name="passWord">
        <br><br>
        <input type="button" name="ok" value="确定" onclick="okHandle()">
                 
        <input type="button" name="cancel" value="取消" onclick="cancelHandle()">
    </form>
</body>
</html>

运行结果：

前端基础 JavaScript 第五章事件和事件处理----假期学习第十三天_文本域_07

5.3.6 处理错误事件

error事件，提供了脚本执行过程中处理错误的功能

处理错误事件不同于处理其他事件，事件处理函数不需要自己编写，浏览器自己执行，通过三个参数传递错误信息：

第1个参数描述所发生错误的信息

第2个参数是一个URL,指明引起错误的js代码所在的文档

第3个参数是该文档中错误代码所在行的行号

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example:错误处理事件</title>
    <script language="JavaScript">
        function errorHandle(errorMessage,url,line) {
            var message="错误信息："+errorMessage+"\n错误文档URL:"+url+"\n错误的行号:"+line;
            alert(message);
        }
        onerror=errorHandle;//必须为onerror属性赋值 自定义的错误事件处理器
        //okHandle 未定义引发错误
    </script>
</head>
<body>
    <h3>Example:错误处理事件</h3>
    <form>
        <input type="button" onclick="okHandle()" value="确定">
    </form>
</body>
</html>

运行结果：

点击确定后：

前端基础 JavaScript 第五章事件和事件处理----假期学习第十三天_前段js_08

5.4 事件对象

js1.2引入了event对象作为提供事件细节信息的机制，由于event对象包含了若干存储着事件细节信息的属性，所以可以通过访问event对象的属性来获取所发生事件的详细信息。

鼠标 / 键盘属性

属性	描述
altKey	返回当事件被触发时，"ALT" 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。

IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：

属性	描述
cancelBubble	如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement	对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode	对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY	发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue	如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement	对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement	对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y	事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性	描述
bubbles	返回布尔值，指示事件是否是起泡事件类型。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget	返回其事件监听器触发该事件的元素。
eventPhase	返回事件传播的当前阶段。
target	返回触发此事件的元素（事件的目标节点）。
timeStamp	返回事件生成的日期和时间。
type	返回当前 Event 对象表示的事件的名称。

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

方法	描述
initEvent()	初始化新创建的 Event 对象的属性。
preventDefault()	通知浏览器不要执行与事件关联的默认动作。
stopPropagation()	不再派发事件。

eg1：判断点击了鼠标哪个键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event.button</title>
    <script type="text/javascript">
        function whichMouseButton(event) {
            var n=event.button;
            if(n==2){
                alert("您点击了鼠标右键！");
            }else if(n==0){
                alert("您点击了鼠标左键！");
            }else if(n==1){
                alert("您点击了鼠标中键！");
            }else{
                alert("您点击了"+n+"号键，我不能确定他的名称！");
            }
        }
    </script>
</head>
<body onmousedown="whichMouseButton(event)">
<p>在本段文本上点击鼠标，试试效果！</p>
</body>
</html>

运行结果：

前端基础 JavaScript 第五章事件和事件处理----假期学习第十三天_html_09

eg:显示鼠标位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标位置</title>
    <script language="JavaScript">
        function mouselocation(event) {
            var x=event.clientX;
            var y=event.clientY;
            alert("鼠标的位置：("+x+","+y+")");
        }
    </script>
</head>
<body onmousedown="mouselocation(event)">
    <p>点击鼠标，显示鼠标位置！

</body>
</html>

运行结果：

前端基础 JavaScript 第五章事件和事件处理----假期学习第十三天_事件处理_10

eg:判断按下键盘键的unicode码（也即是ascii码）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>按下键盘的unicode码</title>
    <script type="text/javascript">
        function whichkeycode(event) {
            alert("您按下的键盘Unicode码是："+event.keyCode)
        }
    </script>
</head>
<body onkeypress="whichkeycode(event)">
<p>按下键盘试试！</p>
</body>
</html>