JavaScript·DOM·Web_API之③事件源的获取、事件类型以及常用鼠标/键盘属性的总结
QQ:3020889729 小蔡
事件源获取的方法
也就是对元素的获取——将元素返回对象，然后作为事件源。
这样的结果就是，将标签元素，返回到一个对象元素中，才能顺延到后边（注册事件）事件类型的确定。
简要说明下事件源的获取方法有哪些：
- 通过id名——获取该id名的元素——getElementById(‘id’)
- 通过标签——获取全部document（文档）中所有该标签元素——getElementsByTagName(‘tagname’)
- 通过类——获取使用过该类的元素——getElementsByClassName(classname)
- 通过选择器——获取使用过该选择器的元素——querySelector(‘selector’)(返回使用该选择器的第一个元素)——querySelectorAll(seletor)（返回使用过该选择器的全部元素）
- 通过特殊属性——获取body元素和html整个页面元素——.body——.documentElement
注册事件（给事件源选择合适的事件类型）
当一个事件源确定后，我们需要确定事件类型（我们的事件类型可以唯一，就是可以以有多个触发）。
操作如下：（一般注册事件，包含选择事件类型和给事件添加服务程序）
html代码如下：（通过对象属性，实现事件注册——然后再通过表达式声明函数（匿名函数）达成功能。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button style="width:48px;height:20px" id = "but1" type="button" name="button">but_1</button>
<p id = "ys">点击一下，可以演示一段文字~</p>
<script type="text/javascript">
var but_1 = document.getElementById('but1');
var p1 = document.getElementById('ys');
but_1.onclick = function() {
p1.innerHTML = "武汉加油，中国加油！";
}
</script>
</body>
</html>
效果：
事件类型的总结（事件是属性）
当用户点击鼠标时
使用属性：.onclick
例子：实现点击事件类型的注册
<button style="width:48px;height:20px" id = "but1" type="button" name="button">but_1</button>
<p id = "ys">点击一下，可以演示一段文字~</p>
but_1.onclick = function() {
p1.innerHTML = "武汉加油，中国加油！";
}
效果：
当鼠标移至元素上/以及移出元素时
使用属性：.onmouseover——表示移至事件，表示移出元素
例子：
主要代码：
<h2 style="background:blue;color:red;width:240px" id = "bt">学习之路</h2>
h2.onmouseover = function() {
h2.innerHTML = "学会忍耐";
}
h2.onmouseout = function() {
h2.innerHTML = "学习之路";
}
效果：
再移出返回最初的”学习之路"……
当输入字段被改变时
使用属性：.onchange
例子：当离开输入框时，判断字段是否改变，改变了，事件就会被触发
<button style="width:48px;height:20px" id = "but1" type="button" name="button">but_1</button>
var but_1 = document.getElementById('but1');
var input_text = document.getElementById('wbsr');
var flag = 1;//颜色切换标志
input_text.onchange = function() {
flag ? but_1.style.background = "blue" : but_1.style.background = "red";
flag = !flag;
}
效果：往返触发字段修改的服务函数——触发要求是，字段修改，并且离开输入状态（光标从输入框退出）
当 HTML 表单被提交时/表单内容重置时
使用方法：.onsubmit_提交时
效果：当提交表单时（也就是表单确认按钮）,可以执行对应的服务程序。
使用同其它属性一样
使用方法：.onreset_重置时
效果：当重置表单时（也就是表单确认按钮）,可以执行对应的服务程序。
使用同其它属性一样
当图像/网页加载完成后
使用属性：.onload
效果：当页面加载完成或图片加载完成，执行对应设置的事件服务程序
使用同其它属性一样
当退出网页时
使用属性：.onunload
效果：当退出页面时，执行对应设置的事件服务程序
使用同其它属性一样
当用户敲击按键时
按键按下未弹起时
使用属性：.onkeydown
效果：当按键按下时，执行对应设置的事件服务程序
使用同其它属性一样
按键按弹起时
使用属性：.onkeyup
效果：当按键弹起时，执行对应设置的事件服务程序
使用同其它属性一样
按键按下弹起后
使用属性：.onkeypress
效果：当按键按下并且弹起后，执行对应设置的事件服务程序
使用同其它属性一样
鼠标/键盘属性的补充（属性补充）
这些相关属性的值为：true|false|1|0
- altKey 返回当事件被触发时，“ALT” 是否被按下。
- button 返回当事件被触发时，哪个鼠标按钮被点击。
- clientX 返回当事件被触发时，鼠标指针的水平坐标。
- clientY 返回当事件被触发时，鼠标指针的垂直坐标。
- ctrlKey 返回当事件被触发时，“CTRL” 键是否被按下。
- metaKey 返回当事件被触发时，“meta” 键是否被按下。
- relatedTarget 返回与事件的目标节点相关的节点。
- screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
- screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
- shiftKey 返回当事件被触发时，“SHIFT” 键是否被按下。
