【JAVA WEB】JavaScript(WebAPI)--DOM基本概念获取元素点击事件键盘事件-编程知识

【JAVA WEB】JavaScript(WebAPI)--DOM基本概念获取元素点击事件键盘事件

什么是WebAPI

DOM的基本概念

DOM是什么

DOM树

获取元素

querySelector

querySelectorAll

事件

事件初识

基本概念

事件三要素

点击事件

键盘事件

什么是WebAPI

前端学习的 JS 分成三个大的部分

ECMAScript：基础语法部分
DOM API：操作页面结构
BOM API：操作浏览器

WebAPI 就包含了DOM+BOM。

DOM的基本概念

DOM是什么

DOM 全程为 Docunment Object Model

W3C标准给我们提供了一系列的函数，让我们可以操作：

网页内容
网页结构
网页样式

DOM树

一个页面的结构是一个树型结构，称为DOM树。

重要概念：

文档：一个页面就是一个文档，使用document表示
元素：页面中所有的标签都称为元素，使用element表示
节点：网页中所有的内容都可以称为节点（标签节点，注释节点，文本节点，属性节点），使用node表示

这些文档等概念在JS代码中对应一个个的对象。

所以才叫“文档对象模型”

获取元素

这部分工作类似于CSS选择器的功能

querySelector

选中一个元素

//这个是HTML5新增的，IE9及以上版本才能使用

用法：var element=document.querySelector(selectors);

selectors包含一个或多个要匹配的选择器的DOM字符串DOMstring，该字符串必须是有效的CSS选择器字符串，如果不是，则引发SYNTAX_ERR异常
表示文档中与指定的一组CSS选择器匹配的第一个元素的html元素Element对象
如果需要与指定选择器匹配的所有元素的列表，则应该使用querySelectorAll()
可以在任何元素上调用，不仅仅是document，调用这个方法的元素将作为本次查找的根元素

示例代码：

<body>

<div class="box1">box1</div>

<div class="box2">box2</div>

<h3><span><input type="text"></span></h3>

</body>

<script>

console.log(document.querySelector('.box1'));

console.log(document.querySelector('h3').querySelector('span').querySelector('input'))

</script>

querySelectorAll

选中一组元素

console.log(document.querySelectorAll('div'));

事件

事件初识

基本概念

JS要构建动态页面，就需要感知到用户的行为

用户对于页面的一些操作（点击，选择，修改等）都会在浏览器中产生一个个事件，被JS获取到，从而进行更复杂的交互操作

事件三要素

事件源：哪个元素触发的
事件类型：是点击，选中，还是修改
事件处理程序：进一步如何处理，往往是一个回调函数

参考手册w3school 在线教程https://www.w3school.com.cn/

点击事件

示例：

<body>

<input type="button" value="这是一个按钮">

</body>

<script>

//事件源

let button = document.querySelector('input')

//绑定事件类型（点击事件）onclick

//函数设定了事件处理程序

button.οnclick=function(){

alert("hello")

}

</script>

键盘事件

onkeydown
onkeypress
onkeyup

onkeydown

键盘按下时触发事件

<body>

<input type="text">

</body>

<script>

//事件源

let input = document.querySelector('input')

//绑定事件类型（点击事件）

//函数设定了事件处理程序

input.onkeydown = function(){

console.log("键盘正在按下")

}

</script>

当我们需要获取键盘输入了什么内容时可以通过event事件，如下操作：

<body>

<input type="text">

</body>

<script>

//事件源

let input = document.querySelector('input')

//绑定事件类型（点击事件）

//函数设定了事件处理程序

input.onkeydown = function(event){

console.log("键盘正在按下");

let a = event.keyCode;

console.log(a);

//转换成字符

let b=String.fromCharCode(a);

console.log(b);

}

</script>

效果：

从上面的效果可以看出onkeydown不区分大小写

因此我们需要使用onkeypress

事件在用户按下键时（键盘）发生

<body>

<input type="text">

</body>

<script>

//事件源

let input = document.querySelector('input')

//绑定事件类型（点击事件）

//函数设定了事件处理程序

input.onkeypress = function(event){

console.log("键盘正在按下");

let a = event.keyCode;

console.log(a);

//转换成字符

let b=String.fromCharCode(a);

console.log(b);

}

</script>

效果：可以看出onkeypress有效的显示了键盘输入内容

onkeyup

键盘松开时触发事件，下述是另一种写法，也可以如上面的方法进行编写

<body><input type="text" onkeyup="myOnkeyup()">
</body>
<script>function myOnkeyup(){console.log("按键被抬起")}
</script>

效果

不是所有的键都会触发onkeypress或者onkeydown 事件，如shift，alt按下时并未触发，因此我们需要另一些如altKey，ctrlKey，shiftKey

示例：

<body>

<input type="text">

</body>

<script>

let input = document.querySelector('input')

input.onkeydown = function(event){

if(event.shiftKey)

{

alert("shift键被按下")

}

}

</script>