javaScript事件处理
【摘要】
文章目录
1.窗体事件2.鼠标事件3.键盘事件5.常用事件方法（包括窗口事件，鼠标事件，键盘事件，文本事件）6.事件冒泡和事件捕捉
JS事件指再浏览器窗体或者HTML元素上发生的，乐意触发JS代码块运行的行为，下面，我们一起来看看相关事件。
1.窗体事件
例如 onload事件：当页面完全加载完成之后（包括图像，js文件，css文件等）...
JS事件指再浏览器窗体或者HTML元素上发生的，乐意触发JS代码块运行的行为，下面，我们一起来看看相关事件。
1.窗体事件
例如 onload事件：当页面完全加载完成之后（包括图像，js文件，css文件等）该事件就会被触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>花狗在线</title>
<script>
window.onload=function(){ var mydiv = document.getElementById("mydiv"); alert("页面加载完成，mydiv的内容是："+mydiv.innerText);
}
</script>
</head>
<body>
<div id='mydiv'>我是花狗，花狗的花，花狗的狗。</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
对此还有：
resize事件：当调整浏览器的窗口到一个新的宽度或者高度时，就会触发resize事件。
scroll事件：文档或者浏览器窗口被滚动期间会触发scroll事件。
焦点事件：指元素对焦点的获得与失去，如文本框选中或者取消选中。
2.鼠标事件
例如当鼠标单击左键，会发生onclick事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>花狗在线</title>
<style> html,body{ width: 100%; height: 100%; }
</style>
<script>
function mouseclick(){
alert('页面被单击');
}
</script>
</head>
<body onclick="mouseclick()">
<div id='mydiv'>我是花狗，花狗的花，花狗的狗。</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
注意：将html和body 的样式表都设置为width: 100%，height: 100%，否则onclick无效。
3.键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>花狗在线</title>
<style> html,body{ background-color: aquamarine; width: 100%; height: 100%; }
</style>
<script>
function keydown(event){ if(event.keyCode==37){ alert(event.keyCode +'你按下了左键'); } if(event.keyCode==38){ alert(event.keyCode +'你按下了上键'); } if(event.keyCode==39){ alert(event.keyCode +'你按下了右键'); } if(event.keyCode==40){ alert(event.keyCode +'你按下了下键'); }
}
</script>
</head>
<body onkeydown="keydown(event)">
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
5.常用事件方法（包括窗口事件，鼠标事件，键盘事件，文本事件）
| 方法 | 描述 |
|---|---|
| onabort | 图像加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标单击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或者图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或者按住 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或者图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被单击 |
| onresize | 窗口或者框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被单击 |
| onunload | 用户退出页面 |
6.事件冒泡和事件捕捉
事件发生就会产生事件流，当一个HTML元素产生一个事件时，该事件会在元素节点和根节点之间按特定的顺序转播，类似于递和归。事件触发方式如下：addEventListener(“click”,“doSomething”,“ture”); 若第三个参数时ture是事件捕捉，若为false，则为事件冒泡，默认是冒泡。
捕捉型事件传播：
冒泡型事件传播
文章来源: blog.csdn.net，作者：花狗Fdog，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/Fdog_/article/details/109772976
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）