JavaWeb，JavaScript的学习（下）

事件

事件可以是浏览器行为，也可以是用户行为。当这些行为发生时，可以自动触发对应的JS函数的运行，称之为事件发生。JS的事件驱动指的就是行为触发代码运行的特点

常见事件

鼠标事件

onclick：当用户点击某个对象时调用的事件句柄

oncontextmenu：在用户点击鼠标右键打开上下文菜单时触发

ondblclick：当用户双击某个对象时调用的事件句柄

onmousedown：鼠标按钮被按下

onmouseenter：当鼠标移动到元素上时触发

onmouseleave：当鼠标移出元素时触发

onmousemove：鼠标被移动

onmouseover：鼠标移动到某元素上

onmouseout：鼠标从某元素移开

onmmouseup：鼠标按键被松开

键盘事件

onkeydown：某个键盘按键被按下

onkeypressdown：某个键盘按键被按下并松开

onkeyup：某个键盘按键被松开

表单事件

onblur：元素失去焦点时触发

onchange：该事件在表单元素的内容发生改变时触发

onfocus：元素获取焦点时触发

onfocusin：元素将要获取焦点时触发

onfocusout：元素将要失去焦点时触发

oninput：元素获取用户输入时触发

onreset：表单重置时触发

onsearch：用户向搜索域输入文本时触发

onselect：用户选取文本时触发

onsubmit：表单提交时触发

事件的绑定方式

事件的绑定方式有两种，一是通过元素的属性绑定，二是通过DOM编程动态绑定

注意事项：

一个事件可以同时绑定多个函数
一个元素可以绑定多个事件

通过元素的属性绑定

在元素内加上属性：事件名=”函数名()” 就能让事件发生时触发指定的函数

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function testFocus(){console.log("获得焦点了")}function testLoseFocus(){console.log("失去焦点")}function testChange(){console.log("内容改变")}function testChange2(value){console.log("选项改变为"+value)}function testSumit(){alert("提交成功")}function testReset(){alert("重置了")}</script>
</head>
<body><form action="表单常见事件.html" method="get" onsubmit="testSumit()" onreset="testReset()">用户昵称:<input type="text" name="realName" onfocus="testFocus()" onblur="testLoseFocus()" onchange="testChange()"><br>登录账号:<input type="text" name="logoinName"><br><input type="submit" name="smt" value="注册"> <input type="reset" name="res" value="清空"><br>选择城市:<select name="city" onchange="testChange2(this.value)"><option value="1">赣州</option><option value="2">吉安</option><option value="3">南昌</option><option value="4">九江</option></select></form>
</body>
</html>

通过DOM编程动态绑定

附：页面加载事件：onload，即页面加载完后才触发

事件的触发除了可以是DOM编程触发之外，还可以是DOM编程触发

通过DOM获得要操作的元素以及绑定事件的操作为：

//通过dom获得要操作的元素var btn = document.getElementById("btn1")btn.onclick=function(){alert("按钮单击了")}

但是由于html代码要由上而下执行，要想将此操作写在头标签中，就要使用到onload。

将以上操作放在一个函数（假设名为ready）内，在body标签中加上属性οnlοad=”ready()“，在页面加载完后（即整个html代码执行），函数ready内的操作最后加载出来，而id为btn1的元素更早加载出来，就可以将此操作放在头标签中，例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function ready(){//通过dom获得要操作的元素var btn = document.getElementById("btn1")btn.onclick=function(){alert("按钮单击了")}}</script>
</head>
<body onload="ready()"><button id="btn1">按钮</button>
</body>
</html>

可以简写为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload=function(){//通过dom获得要操作的元素var btn = document.getElementById("btn1")btn.onclick=function(){alert("按钮单击了")}}</script>
</head>
<body><button id="btn1">按钮</button>
</body>
</html>

BOM编程

BOM是Browser Object Model的简写，即浏览器对象模型。

BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法（(通过window对象及属性的一系列方法控制浏览器行为的一种编程)

BOM没有统一的标准（每种客户端都可以自定标准)。

BOM编程是将浏览器窗口的各个组成部分抽象成各个对象，通过各个对象的API操作组件行为的一种编程

BOM编程的对象结构如下

window：顶级对象，代表整个浏览器窗口

location对象：window对象的属性之一,代表浏览器的地址栏
history对象：window对象的属性之一,代表浏览器的访问历史
screen对象：window对象的属性之一,代表屏幕
navigator对象：window对象的属性之一，代表浏览器软件本身
document对象：window对象的属性之一,代表浏览器窗口目前解析的html文档
console对象：window对象的属性之一,代表浏览器开发者工具的控制台
localStorage对象：window对象的属性之一，代表浏览器的本地数据持久化存储
sessionStorage对象：window对象的属性之一,代表浏览器的本地数据会话级存储

常见API

window对象的API

三种弹窗方式：

alert：信息提示框

prompt：信息输入框

confirm：信息确认框

setTimeout：定时执行指定函数，需要的两个参数分别为一个函数和一个指定的毫秒数

这些函数前的window.可以省略

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function fun1(){window.alert("hello")}function fun2(){var aa =window.prompt("请输入：")console.log(aa)}function fun3(){var bb =window.confirm("确定吗？")console.log(bb)}function fun4(){window.setTimeout(function(){console.log("hello")},5000)}</script>
</head>
<body><button onclick="fun1()">信息提示框</button><button onclick="fun2()">信息确认框</button><button onclick="fun3()">信息输入框</button><button onclick="fun4()">五秒后向控制台打印hello</button>
</body>
</html>

history属性的API

history.forward()：向前翻页，下一页

history.back()：向后翻页，上一页

history.go(n)：向前翻n页

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function funA(){history.back()}function funB(){history.forward()}</script>
</head>
<body><button onclick="funA()">上一页</button><button onclick="funB()">下一页</button><a href="<http://www.atguigu.com>">尚硅谷</a>
</body>
</html>

location属性的API

location.href：网页的地址，可以操作其属性进行赋值达到跳转页面的目的

sessionStorage和localStorage的API

sessionStorage是存储会话级别的数据，即浏览器关闭即清除

localStorage是存储持久级别的数据，即浏览器关闭还在

sessionStorage.setItem()和localStorage.setItem()：存储数据，数据的格式为key-value格式，即两个参数，第一个是key，第二个是value

sessionStorage.getItem()和localStorage.getItem()：获取数据，参数为数据的key值，返回值为value值

sessionStorage.removeItem()和localStorage.removeItem()：移除数据，参数为想要移除的数据的key值

console属性的API

console.log()：向控制台打印

DOM编程

DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程。

document对象代表整个html文档，可以用来访问页面中的所有元素，是最复杂的一个dom对象。

根据HTML代码结构特点，document对象本身是一种树形结构的文档对象

DOM编程的步骤：获得DOM树—>从document中获取要操作的元素—>对元素进行操作

获取页面元素的几种方式

通过document获得元素

document.getElementById()：根据元素的Id值获取页面上的唯一的一个元素

document.getElementByTagName()：根据标签名获取一个或多个元素

document.getElementByName()：根据元素的name属性获取指定name的元素

document.getElementByClassName()：根据元素的class属性值获取指定的元素

通过父元素获取子元素

假如通过document获取了父元素a，操作元素a使用a.children就可以获得a的所有子元素组成的集合

a.firstElementChild：通过父元素a获取a的第一个子元素

a.lastElementChild：通过父元素a获取a的最后一个子元素

通过子元素获取父元素

假如通过document获取了子元素b，操作元素b使用b.parentElement就可以获得b的父元素

通过当前元素获取兄弟元素

假如通过document获取了子元素b，操作元素b使用b.previousElementSibling就可以获得b的前一个子元素，使用b.nextElementSibling就可以获得b的后一个子元素

对元素进行操作

操作元素属性值

先获取元素，再使用元素名.属性名=”属性值” 为元素赋新的属性值即可操作元素属性值

操作元素样式

先获取元素，再使用元素名.style.样式名=”样式” 为元素赋新的样式即可操作元素样式

原始样式名中的中横线”-”在操作样式时要去掉，然后将横线后的第一个字母大写，例：border-radius —> borderRadius

操作元素文本

先获取元素，再使用元素名.innerText=“文本内容” 或元素名.innerHTML=”识别HTML语法的文本内容”

innerText：双标签元素中间的文本，不会识别HTML语法

innerHTML：双标签元素中间的文本，会识别HTML语法

操作元素的例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function changeAttribute(){var in1 =document.getElementById("in1")in1.type="button"in1.value="world"}function changeStyle(){var in1 =document.getElementById("in1")in1.style.color="yellow"in1.style.borderRadius="5px"}function changeText(){var div1 = document.getElementById("div01")div1.innerText="world"}</script><style>#in1{color: red;}</style>
</head>
<body><input type="text" value="hello" id="in1"><br><button onclick="changeAttribute()">变化属性</button><button onclick="changeStyle()">变化样式</button><div id="div01">hello</div><button onclick="changeText()">变化文本</button>
</body>
</html>

增删元素

document.createElement(“标签名”)：创建元素节点并返回，但不会自动添加到文档中

document.createTextNode(“文本值”)：创建文本节点并返回，但不会自动添加到文档中

element.appendChild(ele)：将ele添加到元素element的所有子节点后面

parentEle.insertBefore(newEle,targetEle)：将newEle插入到targetEle前面

parentEle.replaceChild(newEle, oldEle)：用新节点替换原有的旧子节点

element.remove()：删除元素element

例：一个按钮在有序列表最后处增加一条吉安，再一个按钮删除吉安：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function addJA(){var ja =document.createElement("li")ja.id="ja"ja.innerText="吉安"var cityul =document.getElementById("city")cityul.appendChild(ja)}function removeJA(){var ja = document.getElementById("ja")ja.remove()}</script>
</head>
<body><ul id="city"><li id="bj">北京</li><li id="sh">上海</li><li id="sz">深圳</li><li id="gz">赣州</li></ul><hr><button onclick="addJA()">增加吉安</button><button onclick="removeJA()">删除吉安</button>
</body>
</html>