JS的常用事件
监听事件两大类：鼠标和键盘
| blur | 失去焦点 |
|---|---|
| focus | 获得焦点 |
| click | 鼠标单击 |
| dblclick | 鼠标双击 |
| keydown | 键盘按下 |
| keyup | 键盘弹起 |
| mousedown | 鼠标按下 |
| mouseover | 鼠标经过 |
| mousemove | 鼠标移动 |
| mouseout | 鼠标离开 |
| mouseup | 鼠标弹起 |
| reset | 表单重置 |
| submit | 表单提交 |
| change | 下拉列表选中项改变,或文本框内容改变 |
| select | 文本被选定 |
| load | 页面加载完毕 |
任何事件都具有一个事件句柄on
JS回调函数
方式一
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS常用事件</title>
</head>
<body>
<script type="text/javascript">
function hello(){
alert("你好");
}
</script>
<!--此时当前函数称为回调函数 callback-->
<input type="button" value="good" onclick="hello()"/>;
</body>
</html>
方式二：使用纯JS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>回调函数第二种</title>
</head>
<body>
<input type="button" value="这是我的按钮" id="mybtn"/>
<script type="text/javascript">
function doSome(){
alert("do Sth");
}
//获取按钮对象
var btnObj=document.getElementById("mybtn");
btnObj.onclick=doSome;//这里不要加小括号
</script>
</body>
</html>
这里用document代替整个HTML页面的操作我感觉有点像VBA里面的操作、
上面的函数可以直接用匿名函数
btnObj.onclick=function(){
alert("do Other");
}
我们再考虑一下代码的执行顺序
像上一个例子中，如果input语句是在script下面，那么运行到script中的mybtn，则会出现类似于空指针异常的报错
为了解决这个问题，我们需要使用onload
像下面这样写
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>回调函数第二种</title>
</head>
<body onLoad="ready()">
<script type="text/javascript">
//window.可以不写，也可以把οnlοad=ready()放在body括弧里
window.onload=ready;
function ready(){
//获取按钮对象
var btnObj=document.getElementById("mybtn");
btnObj.onclick=function(){
alert("do Other");
}
}
</script>
<input type="button" value="这是我的按钮" id="mybtn"/>
</body>
</html>
实现文本框和复选框的切换
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>修改变量框</title>
</head>
<body>
<script type="text/javascript">
var flag=true;
window.onload=function(){
document.getElementById("btn").onclick=function(){
if(flag){
var myText=document.getElementById("myText");
myText.type="checkbox";
var mybtn=document.getElementById("btn");
btn.value="将复选框改为文本框";
}else{
var myText=document.getElementById("myText");
myText.type="text";
var mybtn=document.getElementById("btn");
btn.value="将文本框改为复选框";
}
flag=!flag;
}
}
</script>
<input type="text" id="myText"/>
<input type="button" value="将文本框改为复选框" id="btn"/>
</body>
</html>
捕捉回车键
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>修改变量框</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var usernameEnter=document.getElementById("myText");
//event代表传过来的事件对象
usernameEnter.onkeydown=function(event){
//获取按下键盘的键是哪一个，获得的是键值
if(event.keyCode===13){
alert("刚刚敲下的是回车键，方便使用者操作");
}
}
}
</script>
<input type="text" id="myText"/>
</body>
</html>
void运算符
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>void运算符</title>
</head>
<body>
<a href="javascript:void(0)" onClick="window.alert('test code')">
保留了超链接的样式，执行void里面的表达式，返回一个空void，连空字符串也不返回
<!--javascript:不能省略-->
</a>
</body>
</html>
JS数组和for循环
这里的数组类似于Python的列表
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS数组</title>
</head>
<body>
<script type="text/javascript">
var arr=[false,1,2,'a',"abc"];
for(var i in arr){
//这里和foreach不一样，这里拿的仅仅是下标
alert(arr[i]);
}
</script>
</body>
</html>
ECMAScript、BOM、DOM
JS最主要就是帮助浏览器对用户提出请求进行处理
- JavaScript包括三大块:
ECMAScript:Js的核心语法（Es规范/ECMA-262标准)
DOM:Document Object Model(文档对象模型:对网页当中的节点进行增删改的过程。)HTML文档被当做一棵DOM树来看待。JS不能直接操作HTML标签，只能通过HTML标签关联的DOM对象对HTML下达指令
var domobj = document.getElementById( “id” );
<input type="text">
自动生成一个text_dom对象
BOM:Browser Object Model（浏览器对象模型)
关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是Bom编程。
- DOM和BOM的区别和联系?
BOM和DOM的关系
BOM的顶级对象是:window
DOM的顶级对象是:document
在浏览器关闭之前或则浏览器请求其他资源文件之前，本次生成的DOM对象一直存活在浏览器缓存中
在浏览器关闭时候,浏览器缓存中dom对象将要被销毁
在浏览器请求到新资源文件后，浏览器缓存中原有的dom对象将会被覆盖
DOM编程案例
获得和修改value的值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS数组</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var btnElt=document.getElementById("btn");
btnElt.onclick=function(){
alert(document.getElementById("username").value);
}
}
</script>
<input type="text" id="username"/>
<input type="button" value="获取文本框的value" id="btn"/>
</body>
</html>
document对象
文档对象，根据定为条件，用于在浏览器内存中定为DOM对象
浏览器加载完网页中所有标签后，在内存中使用【树形结构】来存储这些DOM对象。树形结构生成后，浏览器生成一个Ddocument对象管理这棵树（DOM树）
一个浏览器窗口运行期间，只会有一个document对象，如果一个页面被分割多块，那就有多个
双目标签也只算一个dom对象
使用onblur
<input type="text" onblur="alert(this.value)" />
<input type="button" value="获取文本框的value" id="btn"/>
只要光标离开文本框，就弹出
慕课切换界面播放就暂停，可能就是这个原理
innerHTML和InnerText
innerText只是忠实的显示内容文字，但不能处理HTML语句
而innerHTML可以把设置的内容用HTML的方式读出来
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inner</title>
<style type="text/css">
#div1 {
background-color: aquamarine;
width: 300px;
height: 300px;
border: 1px black solid;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
//通过id
var btn=document.getElementById("btn");
btn.onclick=function(){
var divElt=document.getElementById("div1");
divElt.innerHTML="<font color='red'>用户名不能为空</font?"
//innerHTML会把后面的当做代码进行解释，而innerText只会将后面的当普通字符串
//divElt.innerText="<font color='red'>用户名不能为空</font?"
}
}
</script>
<input type="button" value="设置div的内容" id="btn"/>
<div id="div1"></div>
</body>
</html>
键入首字母实现联想功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var myArray=["abandon","boy","cinema","dance","education","final","green","hello","ice","jerk"];
function fun1() {
var mytext = document.getElementById("one").value;
var value="";
for (let i = 0; i < myArray.length; i++) {
if(myArray[i].indexOf(mytext)!=-1){
value=value+myArray[i]+"<br/>";
}
}
var mydiv=document.getElementById("mydiv");
mydiv.innerHTML=value;
mydiv.style.display="block";
}
</script>
</head>
<body>
<center>
<input type="text" id="one" size="50" onkeyup="fun1()"/>
<input type="button" id="two" size="50" style="background-color: aqua" value="百度一下">
<div id="mydiv" style="font-size:10px;color:white;background-color: black;width: 500px;height: 200px;display: none">
</div>
</center>
</body>
</html>
结束时间：2021-04-15
1287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
