JavaScriptDOM事件 学习打卡

本节介绍

1、掌握什么是事件
2、掌握HTML事件
3、掌握DOM0级事件
4、掌握常用的鼠标和键盘事件
5、掌握this的指向

事件

1、就是文档或者浏览器窗口中发生的一些特定的交互瞬间。
2、主要2种：
a. HTML事件
b. DOM0级事件

HTML事件

1、直接在HTML元素标签内添加的事件，执行脚本。
2、语法：<tag 事件=“执行脚本”></tag>
3、功能：在html元素上绑定事件
4、说明：执行脚本可以是一个函数的调用

鼠标事件

1、onload – 页面加载时触发
2、onclick – 鼠标点击时触发
3、onmouseover – 鼠标滑过时触发
4、onmouseout – 鼠标离开时触发
5、onfoucs – 获得焦点时触发
6、onblur – 失去焦点时触发
7、onchange – 域的内容发生改变时触发

关于this的指向

在事件触发函数中，this是对该DOM对象的引用

DOM0级事件

1、通过DOM获取HTML元素
2、（获取HTML元素）.事件 = 执行脚本
3、语法：ele.事件 = 脚本
4、功能：在DOM对象上绑定事件
5、说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

鼠标事件 – 补充

1、onsubmit事件 – 表单中的确认按钮被点击时发生 – 不是加在按钮上而是表单上
2、onmousedown – 鼠标按钮在元素上按下时触发
3、onmouseup – 在元素上松开鼠标按钮时触发 – 2和3成就了onclick事件
4、onmousemove – 在鼠标指针移动时触发
5、onresize – 当调整浏览器窗口大小时触发
6、onscroll – 拖动滚动条滚动时触发

键盘事件与keycode属性

1、onkeydown – 在用户按下一个键盘按键时触发
2、onkeypress – 在按下键盘按键时发生（只会响应字母和数字符号）
3、onkeyup – 在键盘按键松开时发生
4、keycode：返回onkeypress onkeydown 或者onkeyup事件触发的键的值得字符代码，或者键的代码

常见的DOM操作

(1) getElementById 返回带有指定的ID元素
(2) getElementsByTagName 返回的是包含带有指定标签名的所有元素的节点列表
(3) getElementsByClassName 返回的是包含带有指定类名的所有元素的节点列表
(4) getElementsByName 获取相同名称（name）的元素的所有节点列表

总结

1、DOM：将文档表现为结构化的表示方法，使得每一个页面元素都是可操控的。DOM将网页和脚本以及其他编程语言联系起来。
2、DOM树：

思维导图