typora-copy-images-to: img
今日内容
- 事件
- 综合案例：动态添加表格
- 常见的内置对象
- BOM对象
- javascript面向对象
- 综合案例：随机抽奖（抽人名），开光灯案例，轮播图案例
一.事件机制
1.常见的名词解释
-
事件
在网页里面的事件，指的触发网页的动作，比如：点击鼠标，双击鼠标，按键盘，那么这些动作称之为事件。
比如：脚踹电动车
-
事件源
在网页里面的事件源，指的网页的元素，比如：标签，属性，文本等等，这些称之为事件源
比如：电动车
-
监听
在网页里面的监听，指的通过触发网页的元素，调用事件对应的js代码，实现网页的动态效果
比如：电动车上的报警器。
监听过程： 脚踹电动车，引起报警器报警
2.事件机制概述
事件机制介绍：
回顾javascript基本概念： javascript是基于对象和事件驱动的一门客户端脚本语言。
在这里面事件机制：通过javascript的事件，触发网页的元素，调用事件对应的js代码（定义好的函数），实现网页的动态效果
<!--
1.事件源：input的普通按钮
2.事件：点击事件onclick
3.监听：事件绑定js代码，触发网页的元素，调用事件绑定的js代码，实现动态效果
-->
<input type="button" value="点击我，弹出框" onclick="fu1();" />
<script type="text/javascript">
//1.提供事件对应的js代码
function fu1 () {
alert("点我啊，啊，啊");
}
</script>
3.在html网页绑定事件的两种方式
-
方式一：直接绑定（直接在标签里面定义事件属性，绑定对应的js代码）
-
方式二：间接绑定（不在标签里面定义事件属性，在使用时在绑定）
-
代码如下：
<input type="button" value="直接绑定" onclick="f1();" /> <input type="button" value="间接绑定" id="bt2" /> <script type="text/javascript"> //1.直接绑定： function f1() { alert("直接绑定---"); } //2.间接绑定： //2.1 获取标签对象 var input2_tag = document.getElementById("bt2"); //2.2 标签对象操作事件属性 input2_tag.onclick = function(){ alert("间接绑定---"); } </script> -
细节
在事件绑定中，this表示谁？: 点击谁，谁就是this
<a href="#" id="a1">点击我，不跳转</a> <hr color="red" size="3" /> <input type="button" value="直接绑定111" οnclick="f1(this);" id="bt1" /> <script type="text/javascript"> //需求：点击按钮，获取a标签的文本内容 function f1(obj) {//定义obj=this; this表示按钮 //1.获取a标签对象 var a_tag = document.getElementById("a1"); //2.调用innerText alert(a_tag.innerText); } //需求：直接点击a标签。获取文本内容 document.getElementById("a1").οnclick=function(){ alert("标签的名称："+ this.nodeName); alert("标签的文本："+ this.innerHTML); }
4.常见的事件有那些
-
点击事件
onclick： 单击事件
ondbclick: 双击事件
-
鼠标状态事件
onmousedown： 鼠标按下事件
onmouseup：鼠标松开事件
onmousemove：鼠标移动事件（每次移动每次触发执行）
onmouseover： 鼠标悬浮事件（触发执行一次）
-
焦点事件
onfocus：获取焦点
onblur: 失去焦点
-
键盘事件
onkeydown：键盘按下事件
onkeyup:键盘松开事件
-
表单事件
onsubmit: 表单提交事件（只有提交按钮，才会触发事件）
-
内容改变事件
onchange: 在内容改变时，触发该事件
-
页面加载事件
onload: 等html网页完全加载完毕后，才执行事件里面的js代码
5.案例：演示常见的事件
-
onload: 等html网页完全加载完毕后，才执行onload事件里面的js代码
<head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ //需求：获取id=d1的文本值 alert(document.getElementById("d1").innerHTML); } </script> </head> <body> <div id="d1">我是谁，我来自哪里！</div> </body> -
onfocus：获取焦点 和 onblur: 失去焦点， 通常应用与对表单的校验
获取焦点： 通常用于输入框，点击输入框，获取焦点了。
失去焦点：通常用于输入框，离开输入框，失去焦点了。
<form action="../index.html" method="get"> 用户名：<input type="text" name="username" id="uname"/><br/> <button type="submit">提交按钮</button> <button type="button">普通按钮</button> </form> <script type="text/javascript"> //1.需求：点击用户名输入框时，提示请输入用户名 document.getElementById("uname").onfocus=function(){ console.log("获取焦点："+ this.name); } //2.需求：在离开用户名输入框时，提示用户名输入符合规范吗 document.getElementById("uname").onblur=function(){ console.log("失去焦点："+ this.name); } </script> -
onchange: 在内容改变时，触发该事件
<script type="text/javascript"> //1.页面加载事件 window.onload=function(){ //2.内容改变事件 document.getElementById("province").onchange=function(){ //3.获取改变的内容: this 表示option标签对象 var province_name = this.value; console.log(province_name); } //3.作业： 点击省份，在右侧显示该省份对应的市区 } </script> </head> <body> <select id="province"> <option>--请选择--</optgroup> <option value="henan">河南</optgroup> <option value="jianghsu">江苏</optgroup> <option value="gaugndong">广东</optgroup> </select> <select id="city"> <option>--请选择--</optgroup> </select> </body> -
onsubmit: 表单提交事件（只有提交按钮，才会触发事件）
-
直接绑定的方式：必须在form标签里面加关键词return
<form action="server.html" method="get" id="formBtn" onsubmit="return checkForm11()"> --- </form> //1.直接绑定： function checkForm11(){ console.log("测试前：：："+flag) //2.需求：用户名必须输入3-6个字符，才能提交表单，否则不提交 var flag=true; if(flag==false){ console.log("用户输入的数据不满足规范----不提交表单"); }else{ console.log("用户输入的数据满足规范------提交表单"); } //3.通过 boolean： 确定表单是否提交 console.log("测试后：：："+flag) return flag; } 注意： 1. return true: 提交表单 2. return false: 不提交表单 -
间接绑定的方式
<form action="server.html" method="get" id="formBtn"> --- </form> document.getElementById("formBtn").οnsubmit=function(){ //2.需求：用户名必须输入3-6个字符，才能提交表单，否则不提交 var flag=false; if(flag==false){ console.log("用户输入的数据不满足规范----不提交表单"); }else{ console.log("用户输入的数据满足规范------提交表单"); } return flag; } 注意： 1. return true: 提交表单 2. return false: 不提交表单
-
6.作业：
-
省市区三级联动：
需求：点击省份数据，显示市区数据，点击市区数据，显示市区对应的县城和区。
-
开关灯案例：
需求：点击关灯照片，显示开灯的照片，点击开灯的照片，显示关灯的照片
核心思路：
1步： 判断什么时候开灯，什么时候关灯
2步：在开灯时，修改src属性值为：on.gif 在关灯时，修改src属性值为：off.gif
二. 综合案例：动态添加表格
需求：输入姓名，年龄，以及姓名，点击添加按钮，动态在table表格加一行数据
分析：
-
获取用户输入的：姓名，年龄，以及性别
-
点击添加按钮：
思路一：
动态创建 tr,td标签，通过innerText设置获取用户输入的内容.
通过父标签tr的appendChild(td)
通过父标签table的appendChild(tr).
缺点：需要频繁的创建标签createElement(“标签名称”)，不停通过父标签追加子标签appendChild(tr)。
思路二：
1.获取姓名，年龄，性别。
2.把上述获取的内容拼接到 td字符串里面，再拼接到tr字符串里面
3.通过table标签的innerHTML属性=拼接好的字符串
优点：不需要频繁建标签createElement(“标签名称”)，不停通过父标签追加子标签appendChild(tr)。
-
点击删除按钮，删除一行数据
通过父标签删除子标签： 父标签.removeChild(子标签)。
通过table删除tr: table.removeChild(tr)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="name" placeholder="请输入姓名" autocomplete="off"> <input type="text" id="age" placeholder="请输入年龄" autocomplete="off"> <input type="text" id="gender" placeholder="请输入性别" autocomplete="off"> <input type="button" value="添加" id="add" onclick="addRow();"> </div> <table id="tb"> <caption>学生信息表</caption> <tr> <th>姓名
最低0.47元/天 解锁文章
4292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
