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 语言有很多的常用事件。

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 对象的属性

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 对象的方法

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 对象提供了很多用于对字符串进行操作的方法。

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 对象没有直接访问的属性，只具有获取、设置日期和时间的方法。

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 的事件处理程序和常用对象的介绍，需要简单回顾这方面知识的同学可以迅速来过一遍基础。有补充或指正的内容欢迎在评论区中留言。