JavaScript事件处理和常用对象
文章目录
- 前言
- 一、事件处理程序
- 1.JavaScript 常用事件
- 2.事件处理程序的调用
- 二、常用对象
- 1.Window 对象
- 2.String 对象
- 3.Date 对象
- 总结
前言
JavaScript 语言是事件驱动型的。这意味着，该门语言可以通过事件触发来调用某一函数或者一段代码。该文还简单介绍了Window 、String、Date 对象如何使用。
一、事件处理程序
JavaScript 可以以事件驱动的方式直接对客户端的输入做出响应，无需经过服务器端程序。JavaScript 简化了图形界面的交互操作，使得其更加简单直接。
什么是事件处理程序？
JavaScript 与 Web 页面之间的交互是通过用户操作浏览器页面时触发事件来实现的。例如，当用户点击页面按钮时，会触发按钮的 onclick 事件，从而执行 onclick 调用的事件处理程序等等。事件处理程序是用于响应某个事件而执行的处理程序。它可以是任意 JavaScript 语句，但通常使用特定的自定义函数（Function）来对事物进行处理。
1.JavaScript 常用事件
JavaScript 语言有很多的常用事件。
| 事件 | 何时触发 |
| onabort | 对象载入被中断时触发 |
| onblur | 元素或窗口本身失去焦点时触发 |
| onchange | 改变<select>元素中的选项或其他表单元素失去焦点，并且在其获取焦点后内容发生过改变时触发 |
| onclick | 单击鼠标时触发。当光标的焦点在按钮上，并按下 Enter 键时，也会触发该事件 |
| ondblclick | 双击鼠标时触发 |
| onerror | 出现错误时触发 |
| onfocus | 任何元素或窗口本身获得焦点时触发 |
| onkeydown | 键盘上的按键（包括 Shift 或 Alt 等键）被按下时触发，如果一直按着某键，则会不断触发。当返回 false 时，取消默认动作 |
| onkeypress | 键盘上的按键被按下，并产生了一个字符时发生。也就是，当按下 Shift 或 Alt 等键时不触发。如果一直按下某键时，会不断触发。当返回 false 时，取消默认动作。 |
| onkeyup | 释放键盘上的按键时触发 |
| onload | 页面完全载入后，在 Window 对象上触发；当所有框架都载入后，在框架集上触发；<img>标记指定的图像完全载入后，在其上触发；或 <object> 标记指定的对象完全载入后，在其上触发。 |
| onmousedown | 单击任何一个鼠标键时触发 |
| onmousemove | 鼠标在某个元素上移动时持续触发 |
| onmouseout | 将鼠标从某个指定的元素上移开时触发 |
| onmouseover | 鼠标移到某个元素上时触发 |
| onmouseup | 释放任意一个鼠标按键时触发 |
| onreset | 点击重置按钮时，在 <form> 上触发 |
| onresize | 窗口或框架的大小发生改变时触发 |
| onscroll | 在任何带滚动条的元素或窗口上滚动时触发 |
| onselect | 选中文本时触发 |
| onsubmit | 单击提交按钮时，在<form> 上触发 |
| onunload | 页面完全卸载后，在 Window 对象上触发；或者所有框架都卸载后，在框架集上触发 |
2.事件处理程序的调用
在使用事件处理程序对页面进行操作时，最重要的是如何通过对象的事件来指定事件处理程序。在 JavaScript 中调用事件处理程序，复杂繁琐但可以供程序员进行更多的代码操作；在 HTML 中调用事件处理程序，简单实用但是更多复杂的交互不易实现。开发过程中可以根据实际情况来选择。
（1）在 JavaScript 中调用
在 JavaScript 中调用事件处理程序时，首先需要获得要处理对象的引用，然后将要执行的处理函数赋值给对应的事件。
实操：创建一个按钮，点击该按钮元素会触发事件 onclick，从而调用程序 function() 函数。
<input name="bt_submit" type="button" value="提交">
<script>
var b_save=document.getElementByld("bt_submit");
b_save.onclick=function(){
alert("点击了提交按钮");
}
</script>document.getElementById()方法是JavaScript中的一个DOM方法，用于根据元素的id属性获取元素对象。它接受一个参数，即元素的id属性值，然后返回具有该id的元素对象。通过这个方法，我们可以通过元素的id来访问和操作DOM树中的元素。
运行结果：
在上面的代码中，一定要将 <input> 标记代码放在 JavaScript 代码的上方，否则将会报出 " 'bt_submit' 为空或不是对象 " 的错误提示。
在 JavaScript 中指定事件处理程序时，事件名称必须是小写，才能正确响应事件。
（2）在 HTML 中调用
在 HTML 中分配事件处理程序，只需要在 HTML 标记中添加相应的事件，并在其中指定要执行的代码或是函数名即可。
实操：
<input name="bt_submit" type="button" value="提交" onclick="alert('数据内容已提交')">运行结果：
如上图所示，在 HTML 中的事件属性里添加相应的 Script 语句即可通过事件触发程序。
二、常用对象
JavaScript 是一门基于对象的语言，它可以应用自己创建的对象。JavaScript 的常用对象有 Window、String、Date 对象。
1.Window 对象
Window 对象即浏览器窗口对象，该对象是一个全局对象，它表示浏览器窗口或框架，并提供了与浏览器窗口和框架相关的方法和属性。
通过"Window"对象，可以访问和操作窗口大小、位置、URL、文档元素、浏览历史记录等。
Window 对象同 Math 对象一样，不需要使用 new 关键字创建对象实例，而是直接使用"对象名.成员"的格式来访问其属性或方法。
（1）Window 对象的属性
| 属性 | 功能描述 |
| document | 对窗口或框架中含有文档的 Document 对象的只读引用 |
| defaultStatus | 一个可读写的字符，用于指定状态栏中的默认消息 |
| frames | 表示当前窗口中所有 Frame 对象的集合 |
| location | 用于代表窗口或框架的 Location 对象。如果将一个 URL 赋予该属性，则浏览器将加载并显示该 URL 指定的文档 |
| length | 窗口或框架包含的框架个数 |
| history | 对窗口或框架的 History 对象的只读引用 |
| name | 用于存放窗口对象的名称 |
| status | 一个可读写的字符，用于指定状态栏中的当前信息 |
| top | 表示最顶层的浏览器窗口 |
| parent | 表示包含当前窗口的父窗口 |
| opener | 表示打开当前窗口的父窗口 |
| closed | 一个只读的布尔值，表示当前窗口是否关闭。当浏览器窗口关闭时，表示该窗口的 Window 对象并不会消失，不过其 closed 属性被设置成了 true |
| self | 表示当前窗口 |
| screen | 对窗口或框架的 Screen 对象的只读引用，获取屏幕尺寸、颜色深度等信息 |
| navigator | 对窗口或框架的 Navigator 对象的只读引用，通过 Navigator 对象可以获得与浏览器相关的信息 |
（2）Window 对象的方法
| 方法 | 功能描述 |
| alert() | 弹出一个警告对话框 |
| confirm() | 显示一个确认对话框，单击"确认"按钮时返回 true，否则返回 false |
| prompt() | 弹出一个提示对话框，并要求输入一个简单的字符串 |
| blur() | 将键盘焦点从顶层浏览器窗口中移走。在多数浏览器上，这将使窗体移到最后面 |
| close() | 关闭窗口 |
| focus() | 将键盘焦点赋予顶层浏览器窗口。在多数浏览器上，这将使窗体移到最前面 |
| open() | 打开一个新窗口 |
| scrollTo(x,y) | 将滚动页面滚动到（x,y）的坐标指定的位置 |
| scrollBy(offsetx,offsety) | 按照指定的位移量来滚动窗口 |
| setTimeout(timer) | 在经过指定的时间后再执行代码 |
| clearTimeout() | 取消对指定代码的延迟运行 |
| moveTo(x,y) | 将窗口移动到一个绝对位置 |
| moveBy(offsetx,offsety) | 将窗口按照指定位移量移动到某处 |
| resizeTo(x,y) | 设置窗口的大小 |
| resizeBy(offsetx,offsety) | 按照指定的位移量设置窗口的大小（用于扩大或缩小窗口，正值扩大，负值缩小） |
| print() | 相当于浏览器工具栏中的 "打印" 按钮 |
| setInterval() | 周期性执行指定的代码 |
| clearInterval | 停止周期性地执行代码 |
由于 Window 对象使用十分频繁，又是其他对象的父对象，所以在使用 Window 对象的属性和方法时，JavaScript 允许省略 window 对象的名称。
例如：
window.alert("Hellow world"); alert("Hellow world");以上两行代码的效果是一样的。注意代码里的 window 开头字母是小写！
在 Window 对象中， open() 方法和 close() 方法在实际网站开发中经常用到。
（1）open() 方法
open() 方法用于打开一个新的浏览器窗口，并在该窗口中添加指定 URL 地址的网页。该方法的语法格式如下：
windowVar=window.open(url,windownname,windowFeatures);windowVar：当前打开窗口的对象。如果 open() 方法执行成功，则 windowVar的值为 Window 对象，否则该值为空值。
url：目标窗口的 URL。如果 URL 是一个空字符串，则浏览器将打开一个空白窗口，允许使用 write() 方法创建动态 HTML。
windowname：用于指定新窗口的名称，该名称可以作为<a>标记和<form>的 target 属性的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法将不再创建一个新窗口，而只是一个返回该指定窗口的对象。
windowFeatures：对窗口属性进行设置的值，具体可选参数如下表所列：
对窗口属性进行设置的可选参数 参数 功能描述 width 窗口的宽度 height 窗口的高度 top 窗口顶部距离屏幕顶部的像素数 left 窗口左端距离屏幕左端的像素数 scrollbars 是否显示滚动条，值为 yes 或 no （可以通过设定值决定是否显示） resizable 设定窗口大小是否固定，值为 yes 或 no（可以通过设定值决定是否固定） toolbar 浏览器工具栏，包括后退及前进按钮等，值 yes 或 no（可以通过设定值决定是否显示） menubar 菜单栏，一般包括文件、编辑以及其他菜单项，值为 yes 或 no（可以通过设定值决定是否显示） location 地址栏，用于输入 URL 的浏览器文本区，值为 yes 或 no（可以通过设定值决定是否显示） windowFeatures 参数需要开发者根据不同参数来填写对应数据。
实操：在一个Html页面中使用 open() 方法来弹出另一个窗口。
<html>
<head>
<title>网站</title>
</head>
<body>
<script>
window.open("test.html","test","width=80,height=80,left=80");
</script>
</body>
</html>运行结果：
以前我们上网点击某处时会莫名其妙地弹出许多页面广告，这个原理和上面的差不多。不过现在先进的浏览器可以拦截弹窗了。
（2）close() 方法
close() 方法用于关闭当前窗口。该方法的语法格式如下：
window.close();实操：页面中添加 "关闭" 按钮，当用户单击 "关闭" 按钮时，响应关闭页面。
<input name="close" type="button" class="btn_grey" value="关闭" onclick="window.close()">运行结果：
2.String 对象
String 对象是动态对象，需要创建对象实例后才能引用其属性和方法。在 JavaScript 中可以直接在字符串后面加上点" . "去调用 String 对象的属性和方法。剩下的内容和在 Java 中使用String 基本无差。
（1）属性
String 对象最常用的属性是 length，该属性返回 String 对象的长度。该语法格式如下：
string.length返回值：一个只读的整数。代表字符串的字符个数，一个汉字一字符。
实例：
"这是一个字符串".length;运行结果：
（2）方法
String 对象提供了很多用于对字符串进行操作的方法。
| 方法 | 功能描述 |
| anchor(name) | 为字符串对象中的内容两边加上 HTML 的<a name=name></a>标记对 |
| big() | 为字符串对象中的内容两边加上 HTML 的<big></big>标记对 |
| bold() | 为字符串对象中的内容两边加上 HTML 的<b></b>标记对 |
| charAt(index) | 返回字符串对象中指定索引号的字符组成的字符串，内容为位置的有效值为 0 到字符串长度减 1 的连接起的数值。若指定索引位置超出了有效范围，返回一个空字符串 |
| charCodeAt(index) | 返回一个整数，该整数表示字符串对象中指定位置处的字符的 Unicode 编码 |
| concat(sl,...,sn) | 调用方法的字符串与指定字符串结合，结果返回新字符串 |
| fontcolor | 为字符串对象中的内容两边加上 HTML 的<font></font>标记对，并设置 color 属性，可以是颜色的十六进制值，也可以是颜色的预定义名 |
| fontsize(size) | 为字符串对象中的内容两边加上 HTML 的<font></font>标记对，并设置 size 属性 |
| indexOf(pattern) | 查询全字符串中第一次出现的 patten 字符，查到后返回该参数的位置值（int值）。如果该字符中不包含要查找的字符，则返回 -1 |
| indexOf(patten,startIndex) | 查询全字符串中第一次出现的 patten 字符，查到后返回该参数的位置值（int值）。如果该字符中不包含要查找的字符，则返回 -1。不过检索位置从 startIndex 指定的位置开始查找 |
| lastIndexOf(patten) | 从最后一个字母开始查询，第一次查询到的 patten 字符，查到后返回该参数的位置值（int值）。如果该字符中不包含要查找的字符，则返回 -1 |
| lastIndexOf(patten,startIndex) | 从最后一个字母开始查询，第一次查询到的 patten 字符，查到后返回该参数的位置值（int值）。如果该字符中不包含要查找的字符，则返回 -1。不过检索位置从 startIndex 指定的位置开始倒查 |
| localeCompare(s) | 用特定比较方法比较字符串与 s 字符串。如果字符串相等，则返回 0，否则返回一个非 0 数字值 |
下面是 String 的一些方法的使用：
（1）indexOf() 方法
indexOf() 方法用于返回 String 对象内第一次出现字符串的地方。
语法：
string.indexOf(subString,startIndex);subString：要在 String 对象中查找的子字符串。
startIndex：该整数值指出在 String 对象内开始查找的起点。
String 对象的索引值是从 0 开始算起的。
实操：查询字符串 "Hellow world!" 字符串中起点为 5 的遇见的第一个字母w的位置
<script>
var string = 'Hellw world!'
var result = string.indexOf("w",5);
alert("索引位位5开始索引第一个字母w所在的位置是；"+result);
</script>运行结果：
（2）substr() 方法
substr() 方法用于返回指定字符串的一个子串。语法格式如下：
string.substr(start,length)start：用于指定获取子字符串的起始下标，如果是一个负数，那么从字符串的尾部开始算起位置。-1 指字符串最后一个字符，-2 指字符串倒数第二个字符，等等。
length：用于指定获取子字符串中字符的个数。若忽略该参数，则从 start 开始位置截取到字符串结尾。
实操：在字符串 "你若安好，便是晴天" 字符串中截取拼接出 "晴天安好" 字符串。
<script>
var string = '你若安好，便是晴天'
var result1 = string.substr("2",2);
var result2 = string.substr("7");
alert("原话："+string+"\n截取内容："+result2+result1);
</script>运行结果：
（3）subtring() 方法
substring() 方法用于返回指定字符串的一个字串。语法格式如下：
string.substring(from,to)from：用于指定要获取子字符串的第一个字符在 string 中的位置。
to：用于指定要获取子字符串的最后一个字符在 string 中的位置。
注：to值不会截取到，截取到的最后一位值是 to值-1
实操：截取字符串"天上飘来几个字，那都不是事"字符串的 "不是"
<script>
var string = '天上飘来几个字，那都不是事'
var result1 = string.substring(10,12);
alert("原话："+string+"\n截取内容："+result1);
</script>运行结果：
（4）replace() 方法
replace() 方法用于替换一个与正则表达式匹配的字串。语法格式如下：
string.replace(regExp,substring);regExp：一个正则表达式。如果正则表达式中设置了表示 g，那么该方法将用替代字符串替代检测到的所有与模式匹配的子串，否则只替换所检测到的第一个与模式匹配的子串。
subString：用于指定替换文本或生成替换文本的函数。如果 subString 是一个字符串，那么每个匹配都将由该字符串替换。
substring 中的 ”$“ 字符的意义 字符 替换文本 $1,$2,...,$99 与 regExp 中的第1~99个子表达式匹配的文本 $& 与 regExp 相匹配的子串 $` 位于匹配字串左侧的文本 $' 位于匹配子串右侧的文本 $$ 直接量 $ 符号
实操：去掉字符串中的首尾空格。
<script>
function trim(){
var str=form1.oldString.value;
if(str==""){
alert("请输入原字符串");
form1.oldString.focus();
return;
}else{
var objExp=/(^\s*)|(\s*$)/g;
str=str.replace(objExp,"");
}
form1.newString.value=str;
}
</script>使用正则表达式，将有字符串首尾有空格的删去。
运行结果：
（5）split() 方法
split() 方法用于将字符串分割成字符串数组。语法格式如下：
string.split(delimiter,limit);delimiter：字符串或正则表达式，用于指定分隔符。
limit：用于指定返回数组的最大长度。如果设置了该参数，返回的子字符串长度不会比这个值大。
返回值：一个字符串数组。
在使用 split() 方法分割数组时，返回的数组不包括 delimiter 自身。
3.Date 对象
JavaScript 的 Date 对象可以对日期和时间进行操作。比如做一个页面上的实时钟表等例子。
1.创建 Date 对象
Date 对象是一个关于日期和时间的对象。它具有动态性，必须使用 new 关键字实例化Date对象。语法格式如下：
dateObj = new Date()
dateObj = new Date(dateValue)
dateObj = new Date(year,month,date,hours,minutes,seconds,ms) ms：表示毫秒。
month：表示月份。从零开始计数，month = 实际月份+1
2.Date 对象的方法
Date 对象没有直接访问的属性，只具有获取、设置日期和时间的方法。
| 方法 | 功能描述 |
| getFullYear() | 返回 Date 对象中的年份，4位数表示，采用本地时间或世界时 |
| getMonth() | 返回 Date 对象中的月份（0~11），采用本地时间或世界时 |
| getDate() | 返回 Date 对象中的日期（1~31），采用本地时间或世界时 |
| getDay() | 返回 Date 对象中的星期（0~6），采用本地时间或世界时 |
| getHours() | 返回 Date 对象中的小时（0~23），采用本地时间或世界时 |
实操：在页面中创建一个实时的时钟。
<script>
window.onload=function(){
window.setInterval(function() { realSysTime(document.getElementById("clock")); }, 1000);
}
function realSysTime(clock){
var now=new Date();
var year=now.getFullYear();
var month=now.getMonth();
var date=now.getDate();
var day=now.getDay();
var hour=now.getHours();
var minu=now.getMinutes();
var sec=now.getSeconds();
month=month+1;
var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var week=arr_week[day];
var time=year+"年"+month+"月"+date+"日"+week+" "+hour+":"+minu+":"+sec;
clock.innerHTML="当前时间："+time;
}
</script>运行结果：
总结
以上就是 JavaScript 的事件处理程序和常用对象的介绍，需要简单回顾这方面知识的同学可以迅速来过一遍基础。有补充或指正的内容欢迎在评论区中留言。