JavaScript-5.1-JavaScript 事件-JavaScript 事件
JavaScript 事件
- JavaScript 是一门基于事件的语言，很多操作都离不开事件的支持
- JavaScript 事件共分为鼠标事件、键盘事件和 HTML 事件
一：鼠标事件
- 鼠标事件就是需要通过鼠标进行触发的事件
| 事件 | 发生时间 |
|---|---|
| onclick | 用户单击对象时 |
| ondblclick | 用户双击对象时 |
| onmouseover | 鼠标移到某个元素之上 |
| onmouseout | 鼠标移出某个元素时 |
| onmousemove | 鼠标被移动 |
| onmousedown | 鼠标按键被按下 |
| onmouseup | 鼠标按键被松开 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style type="text/css">
div{
width: 400px;
height: 100px;
border:1px solid #888;
}
#div2{
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<button id="btn1">鼠标单击</button>
<button id="btn2">鼠标双击</button>
</div>
<div id="div2">鼠标在此元素区域内</div>
<div id="div3">
<button id="btn3">用户按键被按下，没有抬起</button>
<button id="btn4">用户按键被按下，然后抬起</button>
</div>
</body>
<script type="text/javascript">
// 获取元素节点
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
var div2 = document.getElementById('div2');
// 单击对象,无论鼠标是否抬起都弹窗
btn1.onclick = function(){
alert('用户单击按钮时，弹出此对话框');
}
// 双击对象,无论鼠标是否抬起都弹窗
btn2.ondblclick = function(){
alert("用户双击按钮时，弹出此对话框");
}
// 用户鼠标移到该元素时
div2.onmouseover = function(){
alert("用户鼠标移到该元素时，弹出此对话框");
}
// 用户鼠标移出该元素时
div2.onmouseout = function(){
alert("用户鼠标移出该元素时，弹出此对话框");
}
// 用户在该元素区域内移动
div2.onmousemove = function(){
alert("用户在该元素区域内移动，弹出此对话框");
}
// 用户按键被按下，没有抬起
btn3.onmousedown = function(){
alert("用户鼠标按下没有抬起时，弹出此对话框");
}
// 用户按键被按下，然后抬起
btn4.onmouseup = function(){
alert("用户鼠标按下然后抬起时，弹出此对话框");
}
</script>
</html>
效果动态图
onmouseover 与 onmousemove 的区别
鼠标都是移动触发事件的发生，当鼠标移到一个元素时，先触发 onmouseover，在该元素区域内移动触发 onmousemove
onclick、onmousedown、onmouseup 区别
1.onclick：无论鼠标有无抬起都触发
2.onmousedown：鼠标按下没有抬起才触发
3.onmouseup：鼠标按下抬起后才触发
二：键盘事件
- 键盘事件是指通过按下键盘按键所触发的事件
- 按下一个按键并抬起的过程，可以分为三个阶段
| 事件 | 发生时间 |
|---|---|
| onkeydown | 键盘按下去触发 |
| onkeypress | 键盘按下并松开的瞬间触发 |
| onkeyup | 键盘抬起时触发 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
document.onkeyup = function(e){ // 触发事件时，将事件因子通过事件触发函数传入
var evn = window.event; // 取到事件因子
var code = evn.keyCode; // 通过 keyCode 属性确定 ASCII 码值
if(code==13){
alert("Enter")
}
}
</script>
</html>
效果动态图
1、键盘事件注意事项
（1）三个事件的执行顺序
- onkeydown
- onkeypress
- onkeyup
（2）长按时触发的事件
- 当长按一个键时，会不断触发 onkeydown 和 onkeypress
- 只有按键抬起以后才会触发 onkeyup 事件
（3）onkeydown/onkeyup 和 onkeypress 的区别
- onkeypress 只能捕获字母、数字、符号键，不能捕获功能键（如 Enter 键、F1~F12键等）
- onkeydown/onkeyup 基本可以捕获所有功能键（特殊键盘的某些按键除外）
- 捕获字母键时
- onkeypress 可以区分大小写
- onkeydown/onkeyup 不区分大小写
- 捕获数组键时
- onkeydown/onkeyup 可以区分主键盘和小键盘
- onkeypress 不能够区分
（4）通常将键盘事件声明在 document 上
- 在使用键盘监听时，通常会直接将键盘检测到 document 上，onkeydown 和 onkeyup 通常监听一个即可
document.onkeydown = function(){
// 键盘按键按下时触发的函数
}
2、判断键盘按键
- 在使用键盘事件时，除了需要检测触发的是 onkeydown 还是 onkeyup，更重要的是判断用户按下去的是哪一个按键
- 当监测键盘事件时，浏览器会默认将事件因子 e 传入事件触发函数中，事件因子可以通过 keyCode 等属性确认按键 ASCII 码值，进而确定用户按下的是哪一个按键
(1)取到事件因子
- 绝大部分浏览器可以将事件因子通过触发函数传入，但是部分浏览器需要通过 window.event 手动取到
document.onkeydown = function(e){ // 触发事件时，会将事件因子通过事件触发函数传入
var evn = e; // 方法一取得事件因子
var evn = window.event; // 方法二取得事件因子
}
(2) 取到 ASCII 码值
- 通过事件因子可以取到用户按键的 ASCII 码值
var code = evn.keyCode; // 方法一取到 ASCII 码值
var code = evn.which; // 方法二取到 ASCII 码值
var code = evn.charCode; // 方法三取到 ASCII 码值
三：HTML 事件
- 鼠标事件和键盘事件是需要通过鼠标或键盘才能触发的事件
- HTML 事件，表示网页中的 HTML 标签发生变化的时候自动触发的事件
| 事件 | 发生时间 |
|---|---|
| onload | 文档或图像加载后 |
| onunload | 文档卸载后，即退出页面时 |
| onblur | 元素失去焦点 |
| onselect | 文本被选中 |
| oninput | 元素在用户输入时触发 |
| onchange | 内容被改变 |
| onfocus | 元素获得焦点时 |
| onsubmit | 表单提交时 |
| onreset | 重置按钮被单击 |
| onresize | 窗口被重新调整大小时 |
| onscroll | 当文档被滚动时发生的事件 |
| ondrag | 当元素正在拖动时发生的事件 |
| ondragstart | 当元素开始被拖动的时侯触发的事件 |
| ondragover | 元素被拖动到指定区域的时候触发的事件 |
| ondrop | 当放置被拖动元素时触发的事件 |
1、案例
- 输入框中输入内容，下方提示文字可以动态显示输入数据
- 输入框最多输入 140 个字，超出字数限制给予提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 事件</title>
<style type="text/css">
textarea{
width: 200px;
height: 100px;
}
span{
font-weight: bold;
font-size:20px;
color:#f00;
}
.div3{
height:800px;
}
</style>
</head>
<body>
<div>
<form>
<table>
<tr>
<td colspan="2">
<input type="text" id="text">
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="textContent" placeholder="请输入文字"></textarea>
</td>
</tr>
<tr>
<td>
<input type="reset" value="重置" id="btn1">
<input type="submit" value="注册" id="btn2">
</td>
</tr>
</table>
</form>
</div>
<div>
已输入<span id="write">0</span>个字，
还可以输入<span id="leftText">140</span>个字
</div>
<div class="div3"></div>
</body>
<script type="text/javascript">
var textContent = document.getElementById('textContent');
var write = document.getElementById('write');
var leftText = document.getElementById('leftText');
var text = document.getElementById('text');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
textContent.oninput = function(){
var max = 140;
if(textContent.value.length>max){
/*
substring：用于提取字符串中介于两个指定下标之间的字符
有两个参数，索引从0开始
一个参数时，则表示开始位置
两个参数时
第一个参数为开始的索引，对应 String 数字中的开始位置（包括）
第二个参数为截至的索引位置（不包括），对应 String 中的结束位置
*/
textContent.value = textContent.value.substring(0,max);
leftText.innerText = 0;
alert("不能超过"+max+"个字！");
}
write.innerText = textContent.value.length;
leftText.innerText = max-textContent.value.length;
}
textContent.onselect = function(){
alert("文本被选中");
}
text.onfocus = function(){
alert("元素获得焦点");
}
document.onreset = function(){
alert("重置按钮");
}
document.onsubmit = function(){
alert("提交按钮");
}
window.onresize = function(){
alert("窗口被调整");
}
window.onscroll = function(){
alert("正在滚动");
}
</script>
</html>
效果动态图
四：event 事件因子
- 取到事件因子有两种方式，除了键盘事件，还可以在任何事件的触发函数中使用 window.event 取到事件因子对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event 事件因子</title>
</head>
<body>
<div>
<button id="btn1">事件因子</button>
</div>
</body>
<script type="text/javascript">
var btn1 = document.getElementById('btn1');
btn1.onclick = function(e){
var evn = window.event;
console.log(evn);
}
</script>
</html>
效果图
| 属性名 | 说明 |
|---|---|
| keyCode | 检测键盘事件相对应的 Unicode 字符码 |
| srcElement | 返回触发事件的元素 |
| type | 返回当前 event 对象表示的事件名称 |
| button | 检查按下的鼠标键 |
| x,y | 返回鼠标相对应于 css 属性中有 position 属性的上级元素的 x 和 y 坐标 |
| clientX,clientY | 返回鼠标在浏览器窗口区域窗口中的 x 和 y 坐标 |
| screenX,screenY | 返回鼠标相对于用户屏幕中 x 和 y 坐标 |
| altKey | 检查 Alt 键的状态。当 Alt 键按下时，值为 True；否则为 False |
| ctrlKey | 检查 Ctrl 键的状态。 当Ctrl 键按下时，值为 True；否则为 False |
| shiftKey | 检查 Shift 键的状态。 当Shift 键按下时，值为 True；否则为 False |
| toElement | 检测 onmouseover 和 onmouseout 事件发生时，鼠标所进入的元素 |
| fromElement | 检测 onmouseover 和 onmouseout 事件发生时，鼠标所离开的元素 |
注意
检测鼠标按键的 button 属性仅用于 onmousedown、onmouseup 和 onmousemove 事件
对于其他时间，不管鼠标状态如何，都返回 0 （比如 onclick ）
他有8个属性值，分别是 0 没按键、1 按左键、2 按右键、3 按左右键、4 按中间键、5 按左键和中间键、6 按右键和中间键、7 按所有键
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
