JavaScript
今日目标
- 掌握 JavaScript 的基础语法
- 掌握 JavaScript 的常用对象（Array、String）
- 能根据需求灵活运用定时器及通过 js 代码进行页面跳转
- 能通过DOM 对象对标签进行常规操作
- 掌握常用的事件
- 能独立完成表单校验案例
7，事件监听
要想知道什么是事件监听，首先先聊聊什么是事件？
HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。
事件监听是JavaScript 可以在事件被侦测到时==执行一段逻辑代码。==例如下图当我们点击 开灯 按钮，就需要通过 js 代码实现替换图片
再比如下图输入框，当我们输入了用户名 光标离开 输入框，就需要通过 js 代码对输入的内容进行校验，没通过校验就在输入框后提示 用户名格式有误!
7.1 事件绑定
JavaScript 提供了两种事件绑定方式：
方式一：通过 HTML标签中的事件属性进行绑定
如下面代码，有一个按钮元素，我们是在该标签上定义
事件属性，在事件属性中绑定函数。onclick就是单击事件的事件属性。onclick='on（）'表示该点击事件绑定了一个名为on()的函数xxxxxxxxxx<input type="button" onclick='on()’>下面是点击事件绑定的
on()函数xxxxxxxxxxfunction on(){alert("我被点了");}方式二：通过 DOM 元素属性绑定
如下面代码是按钮标签，在该标签上我们并没有使用
事件属性，绑定事件的操作需要在 js 代码中实现xxxxxxxxxx<input type="button" id="btn">下面 js 代码是获取了
id='btn'的元素对象，然后将onclick作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行xxxxxxxxxxdocument.getElementById("btn").onclick = function (){alert("我被点了");}
代码演示：
xxxxxxxxxx
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数--> <input type="button" value="点我" onclick="on()"> <br> <input type="button" value="再点我" id="btn"> <script> function on(){ alert("我被点了"); } //方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件 document.getElementById("btn").onclick = function (){ alert("我被点了"); } </script></body></html>
7.2 常见事件
上面案例中使用到了 onclick 事件属性，那都有哪些事件属性供我们使用呢？下面就给大家列举一些比较常用的事件属性
| 事件属性名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
onfocus获得焦点事件。如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。
onblur失去焦点事件。如下图，当点击了输入框后，输入框就获得了焦点；再点击页面其他位置，那输入框就失去焦点了。下图示例是将输入的文本转换为大写。
onmouseout鼠标移出事件。onmouseover鼠标移入事件。如下图，当鼠标移入到 苹果 图片上时，苹果图片变大；当鼠标移出 苹果图片时，苹果图片变小。
onsubmit表单提交事件如下是带有表单的页面
xxxxxxxxxx<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><form id="register" action="#" ><input type="text" name="username" /><input type="submit" value="提交"></form><script></script></body></html>如上代码的表单，当我们点击
提交按钮后，表单就会提交，此处默认使用的是GET提交方式，会将提交的数据拼接到 URL 后。现需要通过 js 代码实现阻止表单提交的功能，js 代码实现如下：- 获取
form表单元素对象。 - 给
form表单元素对象绑定onsubmit事件，并绑定匿名函数。 - 该匿名函数如果返回的是true，提交表单；如果返回的是false，阻止表单提交。
xxxxxxxxxxdocument.getElementById("register").onsubmit = function (){//onsubmit 返回true，则表单会被提交，返回false，则表单不提交return true;}- 获取